:root{--ink:#111932;--muted:#737886;--paper:#f7f7f2;--blue:#2b50ee;--line:#dfE1df;--soft:#eaeefc;--lime:#d5ef90;font-family:'DM Sans','Noto Sans JP',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}a{color:inherit;text-decoration:none}button{color:inherit}img{display:block;max-width:100%}button img{flex-shrink:0}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #697bff;outline-offset:4px}.skip{position:fixed;left:16px;top:-70px;z-index:50;background:white;padding:12px}.skip:focus{top:12px}.lab-header{min-height:82px;padding:18px 32px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:27px;font-weight:800;letter-spacing:-1.4px;display:flex;align-items:center;gap:20px}.brand span{font-size:10px;font-weight:500;letter-spacing:2px;color:#b6bfda}.lab-header nav{display:flex;align-items:center;gap:25px;font-size:12px}.lab-header nav>a{color:#b6bfda}.light-button,.navy-button,.text-button,.icon-button{border:0;display:inline-flex;justify-content:center;align-items:center;gap:10px;font-size:12px;font-weight:600;border-radius:100px;min-height:42px;padding:10px 20px}.light-button{background:#eef0f7}.lab-header .light-button{background:#fff;color:var(--ink)}.lab-header .light-button span{font-size:10px;color:#68718a;padding-left:10px}.navy-button{background:var(--ink);color:white}.navy-button img{filter:brightness(0) invert(1)}.text-button{background:transparent;color:var(--muted)}.icon-button{padding:10px;background:#edf0f4;width:42px;flex-shrink:0}.lab-shell{display:grid;grid-template-columns:224px minmax(0,1fr)}.sidebar{padding:36px 20px;position:sticky;top:0;align-self:start;height:100dvh;overflow:auto;border-right:1px solid var(--line)}.eyebrow{font-size:9px;letter-spacing:1.6px;font-weight:600;line-height:1.6;margin:0;color:var(--muted)}.sidebar>.eyebrow{font-size:8px;letter-spacing:1px}.sidebar h1{font-size:27px;line-height:1.55;letter-spacing:-1px;font-weight:700;margin:20px 0 15px}.side-description{font-size:10px;color:var(--muted);line-height:2}.side-count{font-size:10px;margin:25px 0 22px;color:var(--muted)}.side-count strong{font-size:23px;color:var(--ink);margin-right:4px}#section-nav{display:flex;flex-direction:column;gap:5px}#section-nav button{border:0;background:none;display:flex;align-items:center;text-align:left;gap:10px;padding:12px 10px;border-radius:12px;width:100%;font-size:10px;line-height:1.4}#section-nav button[aria-current=true]{background:var(--ink);color:white}#section-nav .num{font-size:10px;opacity:.5;font-family:'DM Sans',sans-serif}#section-nav .picked{margin-left:auto;border:1px solid #cfd3dc;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:9px;flex-shrink:0}#section-nav .picked.empty{border-style:dotted;color:#afb4c0}#section-nav button[aria-current=true] .picked{border-color:#66708c}.side-note{font-size:9px;line-height:2;color:var(--muted);margin:28px 10px 0}.mobile-picker{display:none}main{padding:32px clamp(22px,3vw,48px) 32px;min-width:0}.intro{display:flex;align-items:center;justify-content:space-between;padding-bottom:28px;border-bottom:1px solid var(--line);gap:20px}.intro-title{font-size:clamp(18px,1.9vw,27px);font-weight:500;letter-spacing:-1px;margin:8px 0 0}.edition{text-align:right;color:var(--muted);font-size:8px;line-height:1.8;letter-spacing:1px}.section-heading{display:flex;align-items:center;justify-content:space-between;padding:28px 0 24px;gap:20px}.section-number{font-size:9px;letter-spacing:1.5px;color:var(--muted);margin:0 0 8px}.section-heading h2{font-size:24px;font-weight:600;letter-spacing:-.8px;margin:0 0 8px}.section-heading p:last-child{font-size:11px;color:var(--muted);line-height:1.7;margin:0}.stepper{display:flex;gap:7px}.stepper button{width:37px;height:37px;background:white;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.compare-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.compare-toolbar>p{font-size:9px;color:var(--muted);margin:0}.view-modes{display:inline-flex;gap:4px;background:#e9ebe7;padding:4px;border-radius:100px;flex-shrink:0}.view-modes button{background:transparent;border:0;border-radius:100px;padding:9px 16px;font-size:10px;white-space:nowrap}.view-modes button[aria-pressed=true]{background:white;box-shadow:0 1px 5px #1119320a}.pair-picker{display:flex;align-items:center;gap:15px;margin:0 0 18px;font-size:10px;color:var(--muted)}[hidden]{display:none!important}.pair-picker label{display:flex;align-items:center;gap:9px}.pair-picker select{border:1px solid var(--line);border-radius:10px;padding:7px 30px 7px 12px;background:white;color:var(--ink)}.concept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.concept-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.concept-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.concept-card.is-selected{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}.card-label{display:flex;align-items:center;justify-content:space-between;padding:15px 17px 12px}.card-label h3{font-size:13px;font-weight:600;margin:0}.card-label .selected-tag{font-size:9px;background:var(--soft);color:var(--blue);padding:5px 9px;border-radius:100px;min-height:23px}.card-label .view-tag{font-size:8px;color:var(--muted);letter-spacing:.7px}.image-button{display:block;position:relative;width:100%;padding:0;border:0;background:#eef0f4;aspect-ratio:3/2;overflow:hidden}.image-button>img{width:100%;height:100%;object-fit:contain;transition:transform .45s}.image-button:hover>img{transform:scale(1.035)}.zoom-label{position:absolute;right:9px;bottom:9px;background:#fffE;color:var(--ink);border-radius:100px;padding:6px 9px;font-size:8px;display:flex;gap:4px;align-items:center}.zoom-label img{width:12px;height:12px}.card-body{padding:18px 17px}.motion-label{font-size:8px;letter-spacing:1.5px;color:var(--muted);margin:0 0 13px}.motion-recipe{display:grid;gap:11px;margin:0 0 20px}.motion-recipe>div{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;font-size:10px;line-height:1.8}.motion-recipe dt{color:var(--muted);font-size:9px}.motion-recipe dd{margin:0;overflow-wrap:anywhere}.select-concept{width:100%;min-height:41px;border:1px solid var(--line);border-radius:100px;background:white;font-size:11px;font-weight:600;transition:background .2s}.select-concept[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:white}.decision-footer{display:flex;align-items:center;justify-content:space-between;padding:25px 0 20px;gap:20px}.decision-footer>p{font-size:11px;line-height:1.8;color:var(--muted)}.decision-footer>div{display:flex;align-items:center;gap:12px}.context-note{max-width:670px;font-size:9px;color:var(--muted);line-height:1.9;margin:0}.storage-status{font-size:9px;color:var(--muted);margin:12px 0 0}dialog{border:0;padding:0;color:var(--ink)}dialog::backdrop{background:#071020c9;backdrop-filter:blur(7px)}body:has(dialog[open]){overflow:hidden}.image-dialog{width:calc(100vw - 48px);height:calc(100dvh - 48px);max-width:1800px;max-height:none;border-radius:20px;overflow:hidden;background:var(--paper)}.image-dialog[open]{display:flex;flex-direction:column}.image-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;background:white;flex-shrink:0}.image-top>div:last-child{display:flex;gap:12px;align-items:center}.image-top h2{font-size:16px;margin:4px 0 0;font-weight:600}.image-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:20px;background:#e9eae6}.image-stage img{width:100%;height:100%;object-fit:contain;flex-shrink:0;max-width:1536px}.image-stage.original{display:block}.image-stage.original img{max-width:none;width:auto;height:auto;margin:auto}.image-bottom{padding:16px 24px;display:flex;align-items:center;gap:20px;flex-shrink:0;background:white}.image-bottom>p{flex:1;font-size:11px;line-height:1.7;margin:0;color:var(--muted)}.image-bottom>.navy-button{white-space:nowrap}.summary-dialog{width:min(1000px,calc(100vw - 40px));max-height:calc(100dvh - 48px);border-radius:22px;padding:32px;background:var(--paper)}.summary-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.summary-top h2{font-size:24px;margin:10px 0}.summary-intro{font-size:11px;color:var(--muted);line-height:1.8;margin-bottom:25px}#summary-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.summary-item{min-width:0;background:white;padding:12px;border-radius:12px;display:flex;align-items:center;gap:13px;border:1px solid var(--line);text-align:left}.summary-item img{width:110px;aspect-ratio:3/2;object-fit:contain;background:#eef0f5;border-radius:7px}.summary-item .no-image{width:110px;aspect-ratio:3/2;background:#f1f2ee;border-radius:7px;display:grid;place-items:center;font-size:9px;color:var(--muted);flex-shrink:0}.summary-item small{font-size:8px;color:var(--muted);display:block;margin-bottom:4px;letter-spacing:.6px}.summary-item strong{font-size:11px;font-weight:600;display:block;line-height:1.8}.summary-item em{font-size:10px;font-style:normal;display:block;color:var(--blue);margin-top:4px}.export-area{padding:24px 0 0}.export-area>label{display:block;font-size:11px;font-weight:600;margin-bottom:10px}textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:14px;background:white;color:var(--ink);font-size:11px;line-height:1.9}.export-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}.import-label{font-size:10px;cursor:pointer;padding:10px;position:relative}.import-label input{position:absolute;width:1px;height:1px;opacity:0;left:0;bottom:0}.import-label:focus-within{outline:3px solid #697bff;outline-offset:1px;border-radius:8px}.export-status{font-size:11px;line-height:1.8;color:var(--muted);min-height:18px;margin-bottom:0}.toast{position:fixed;z-index:30;bottom:25px;left:50%;transform:translate(-50%,20px);padding:13px 22px;border-radius:100px;background:var(--ink);color:white;font-size:11px;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1700px){.concept-grid{gap:24px}.card-body{padding:23px}.motion-recipe>div{font-size:12px}.motion-recipe dt{font-size:11px}.card-label{padding:19px 23px}.card-label h3{font-size:16px}}
@media(max-width:1150px){.lab-shell{grid-template-columns:180px minmax(0,1fr)}.sidebar{padding:28px 12px}.sidebar h1{font-size:23px}.sidebar>.eyebrow{font-size:7px}.side-description{font-size:9px}#section-nav button{font-size:9px;gap:7px;padding:11px 7px}.concept-grid{gap:10px}main{padding:26px 20px}.motion-recipe>div{grid-template-columns:1fr;gap:0}.motion-recipe{gap:10px}.card-body{padding:15px 13px}.card-label{padding:13px}.decision-footer>div{gap:3px}.decision-footer>p{font-size:10px}.decision-footer .navy-button{font-size:10px;padding:10px 14px}.compare-toolbar>p{font-size:8px}}
@media(max-width:800px){.lab-header{padding:17px 20px;min-height:70px}.brand{font-size:24px;gap:10px}.brand span{font-size:7px;letter-spacing:1px;max-width:75px}.lab-header nav{gap:12px}.lab-header nav>a{font-size:9px}.lab-header .light-button{font-size:10px;min-height:36px;padding:9px 12px}.lab-header .light-button span{padding-left:0;font-size:9px}.lab-shell{display:block}.sidebar{position:static;height:auto;overflow:visible;padding:17px 20px;background:#fff;border-right:0;border-bottom:1px solid var(--line)}.sidebar>.eyebrow,.sidebar h1,.side-description,.side-note,#section-nav{display:none}.side-count{margin:0 0 13px;font-size:10px}.side-count strong{font-size:18px}.mobile-picker{display:flex;align-items:center;gap:16px;font-size:10px}.mobile-picker select{min-width:0;flex:1;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:11px 13px;color:var(--ink);font-size:12px}main{padding:23px 20px}.intro{padding-bottom:20px}.intro-title{font-size:21px;line-height:1.7}.edition{display:none}.section-heading{padding:23px 0 20px}.section-heading h2{font-size:23px}.section-heading p:last-child{font-size:10px}.concept-grid,.concept-grid.two{grid-template-columns:1fr}.compare-toolbar{align-items:flex-start;gap:15px;flex-wrap:wrap;margin-bottom:16px}.compare-toolbar>p{font-size:9px}.view-modes button{padding:9px 14px}.card-label{padding:15px 18px}.card-label h3{font-size:14px}.card-body{padding:18px}.motion-recipe>div{grid-template-columns:58px minmax(0,1fr);gap:10px;font-size:11px}.motion-recipe dt{font-size:10px}.concept-grid{gap:22px}.decision-footer{display:block;padding:20px 0}.decision-footer>div{justify-content:space-between;margin-top:14px}.decision-footer .navy-button{font-size:11px;padding:12px 18px}.decision-footer>p{font-size:11px}.context-note{font-size:9px}.pair-picker{justify-content:space-between;gap:5px}.pair-picker label{gap:7px;font-size:10px}.image-dialog{width:100vw;height:100dvh;border-radius:0;margin:0}.image-top{padding:15px;gap:10px}.image-top h2{font-size:14px}.image-top .eyebrow{font-size:8px}.image-top>div:last-child{gap:7px}.image-top .light-button{font-size:9px;padding:8px 12px;min-height:36px}.image-top .icon-button{width:36px;min-height:36px;padding:7px}.image-stage{padding:10px}.image-bottom{padding:15px;flex-wrap:wrap;gap:12px}.image-bottom>p{flex-basis:100%;order:3;font-size:10px}.image-bottom>.navy-button{margin-left:auto;font-size:10px;padding:10px 15px}.image-bottom .view-modes button{font-size:10px;padding:8px 12px}.summary-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:20px}.summary-top h2{font-size:19px}.summary-top{gap:10px}.summary-top .eyebrow{font-size:7px}#summary-list{grid-template-columns:1fr}.summary-item img,.summary-item .no-image{width:100px}.export-actions{gap:5px}.export-actions button{font-size:10px;padding:10px 14px}}
/* Keep the comparison notes comfortable to read, even beside three images. */
.lab-header nav{font-size:12px}.side-description{font-size:11px}#section-nav button{font-size:11px}.side-note{font-size:10px}.section-heading p:last-child{font-size:12px}.compare-toolbar>p{font-size:10px}.view-modes button{font-size:11px}.card-label h3{font-size:15px}.card-label .selected-tag{font-size:10px}.motion-label{font-size:9px}.motion-recipe>div{font-size:12px;grid-template-columns:57px minmax(0,1fr)}.motion-recipe dt{font-size:10px}.select-concept{font-size:12px;min-height:44px}.decision-footer>p{font-size:12px}.context-note{font-size:10px}.summary-item strong{font-size:12px}.summary-item em{font-size:11px}
.lab-header nav>a,.lab-header .light-button{white-space:nowrap}.lab-header .light-button span{white-space:nowrap}
@media(max-width:1150px) and (min-width:801px){.motion-recipe>div{grid-template-columns:1fr;font-size:12px}.motion-recipe dt{font-size:10px}#section-nav button{font-size:10px}.side-description{font-size:10px}}
@media(max-width:800px){.motion-recipe>div{grid-template-columns:62px minmax(0,1fr);font-size:13px}.motion-recipe dt{font-size:11px}.context-note{font-size:10px}.section-heading p:last-child{font-size:11px}.side-count{font-size:11px}.card-label h3{font-size:16px}.compare-toolbar>p{font-size:10px}}
@media(max-width:500px){.brand span{display:none}.lab-header{gap:12px}.lab-header nav{gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
