:root{color-scheme:dark;--ink:#15203a;--blue:#2764ff;--soft:#92adff;--mist:#f4f7fb}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--mist);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #92adff;outline-offset:5px}.review{padding:10px 5%;background:#223456;display:flex;justify-content:space-between;font:10px monospace;color:#c7d5ed}header{max-width:1320px;margin:auto;padding:25px 40px;display:flex;justify-content:space-between;gap:35px;align-items:center}header img{width:220px;height:auto}nav{display:flex;gap:25px;font-size:12px;color:#b8c9e7}nav a[aria-current=page]{color:#fff;border-bottom:1px solid var(--blue);padding-bottom:8px}main{max-width:1320px;margin:auto}.intro{padding:65px 40px 0}.eyebrow{font:11px monospace;letter-spacing:.06em;color:var(--soft);margin:0 0 26px}.intro h1{font-size:clamp(45px,5.6vw,80px);line-height:1.03;letter-spacing:-.055em;font-weight:500;max-width:22ch;margin:0 0 30px}.intro-row{display:flex;justify-content:space-between;align-items:end;gap:50px}.intro-row p{font-size:19px;line-height:1.55;color:#c7d5ed;max-width:54ch;margin:0}.intro-row span{font:11px monospace;color:var(--soft);max-width:25ch;text-align:right;line-height:1.7}.art{padding:0 40px 65px}.scene{height:450px;position:relative;margin:25px 0 5px}canvas{display:block;width:100%;height:100%}.fallback{position:absolute;top:20px;max-width:50ch}.scene-line{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid #92adff35;border-bottom:1px solid #92adff35;padding:17px 0}.scene-line>span{font:10px monospace;color:var(--soft);max-width:50ch;line-height:1.7}.controls{display:flex;gap:10px;flex-wrap:wrap}.controls button{border:1px solid #92adff45;padding:10px 13px;background:none;color:white;font-size:11px}.controls #compare{background:var(--blue);border-color:var(--blue)}.labels{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:27px}.labels button{text-align:left;color:white;background:none;border:0;border-bottom:1px solid #92adff30;padding:0 0 22px}.labels small{font:10px monospace;color:var(--soft)}.labels h2{font-size:23px;line-height:1.12;font-weight:500;margin:13px 0}.labels p{font-size:14px;color:#b8c9e7;line-height:1.5;margin:0;max-width:33ch}.labels button:hover h2{color:var(--soft)}.labels small:after{content:'＋';margin-left:20px}.caption{font-size:12px;line-height:1.6;color:#b8c9e7;margin:25px 0 0;max-width:85ch}.explanation{background:var(--mist);color:var(--ink);display:grid;grid-template-columns:1fr 2fr;padding:65px 40px;gap:45px}.explanation .eyebrow{color:var(--blue)}.explanation h2{font-size:45px;line-height:1.08;font-weight:500;letter-spacing:-.04em;margin:0 0 24px;max-width:22ch}.explanation p{font-size:19px;color:#52617a;line-height:1.65;max-width:54ch}.explanation a{display:inline-block;color:var(--blue);border-bottom:1px solid var(--blue);padding-bottom:8px;font-size:14px;margin-top:10px}.logic{padding:55px 40px;display:grid;grid-template-columns:1fr 2fr;gap:10px 45px;color:#b8c9e7;font-size:14px;line-height:1.7}.logic p:last-child{grid-column:2}.logic p{margin:0}footer{max-width:1240px;margin:0 auto;padding:25px 0;border-top:1px solid #92adff25;display:flex;justify-content:space-between;font:10px monospace;color:#92adff}dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(550px,100%);height:100dvh;max-height:100dvh;max-width:100%;padding:0;border:0;background:var(--mist);color:var(--ink);overflow:auto}dialog::backdrop{background:#060d1e88;backdrop-filter:blur(4px)}.panel-top{position:sticky;top:0;background:var(--mist);padding:24px 30px;border-bottom:1px solid #15203a25;display:flex;justify-content:space-between;align-items:center;font:10px monospace}.panel-top button{color:var(--ink);padding:10px;background:none;border:1px solid #15203a35}.panel-copy{padding:35px 30px}.panel-copy h2{font-size:42px;letter-spacing:-.04em;line-height:1.06;font-weight:500;margin:0 0 30px}.panel-copy p{font-size:17px;line-height:1.65;color:#52617a}.panel-copy p:first-of-type{font-size:23px;color:#15203a;line-height:1.35}.panel-copy blockquote{margin:30px 0;background:var(--ink);color:white;border-left:3px solid var(--blue);padding:25px;font-size:22px;line-height:1.35}.panel-copy a{color:var(--blue);text-decoration:underline;text-underline-offset:5px}@media(max-width:700px){header{padding:22px;display:block}header img{width:190px}nav{gap:12px;flex-wrap:wrap;margin-top:25px;font-size:11px}.intro{padding:35px 22px 0}.intro h1{font-size:45px}.intro-row{display:block}.intro-row p{font-size:17px}.intro-row span{display:block;text-align:left;margin-top:22px}.art{padding:0 22px 40px}.scene{height:340px;margin-top:0}.scene-line{display:block}.controls{margin-top:14px;gap:7px}.controls button{font-size:10px;padding:9px}.labels{gap:25px;grid-template-columns:1fr}.labels h2{font-size:25px}.labels p{max-width:none}.explanation,.logic{grid-template-columns:1fr;gap:15px;padding:40px 22px}.explanation h2{font-size:35px}.explanation p{font-size:17px}.logic p:last-child{grid-column:auto}footer{padding:25px 22px;gap:20px;line-height:1.6}}

/* Study 22: sculptural scale and connected surfaces. */
.scene{height:590px;margin-top:0}.intro{padding-top:42px}.intro h1{max-width:24ch}.scene canvas{touch-action:pan-y}.explanation{background:transparent;border-top:1px solid #92adff30;color:#f4f7fb}.explanation .eyebrow{color:#92adff}.explanation p{color:#b8c9e7}.explanation a{color:#92adff}@media(max-width:700px){.scene{height:380px}.intro{padding-top:30px}}

.scene canvas{cursor:grab}.scene canvas:active{cursor:grabbing}nav{flex-wrap:wrap;justify-content:flex-end;max-width:800px}.caption:after{content:" Drag the model to inspect its depth. Arrow keys also turn the view.";color:#92adff}
/* System model has seven fixed readable exploration points. */
body[data-concept=redesign] .labels{grid-template-columns:repeat(4,1fr);gap:30px}body[data-concept=redesign] .labels h2{font-size:21px}body[data-concept=redesign] .scene{height:650px}.lens-note{font-size:13px;color:#c7d5ed;line-height:1.6;border-left:2px solid #2764ff;padding-left:18px;margin:22px 0 0;max-width:70ch}@media(max-width:700px){body[data-concept=redesign] .labels{grid-template-columns:1fr 1fr;gap:25px 18px}body[data-concept=redesign] .labels p{font-size:13px}body[data-concept=redesign] .scene{height:430px}}

.core-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:11px/1.4 Consolas,monospace;text-align:center;color:#f4f7fb;letter-spacing:.03em;pointer-events:none}.core-word[hidden]{display:none}

/* Study 26: one commitment, readable interfaces, balanced editorial links. */
body[data-concept=redesign] .scene{height:490px;margin:12px 0 0}
body[data-concept=redesign] .labels{grid-template-columns:repeat(3,1fr);gap:38px}
.scene-tag{position:absolute;pointer-events:none;font:11px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#c7d5ed;background:#15203ae8;padding:5px 8px;border-left:2px solid #92adff;white-space:nowrap;transform:translate(-50%,-50%)}
.scene-tag.decision{border-color:#2764ff;color:white}
.scene-legend{position:absolute;left:0;bottom:12px;font:11px/1.6 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#b8c9e7;pointer-events:none}
.scene-legend b{color:#92adff;font-weight:400}.scene-legend span{display:inline-block;margin-right:22px}.scene-legend span:before{content:'';display:inline-block;width:22px;height:2px;background:#2764ff;vertical-align:middle;margin-right:8px}.scene-legend span:last-child:before{background:#92adff}
@media(max-width:700px){body[data-concept=redesign] .scene{height:330px}body[data-concept=redesign] .labels{grid-template-columns:1fr;gap:23px}.scene-tag{font-size:10px;padding:4px 5px}.scene-legend{font-size:10px;bottom:0}.scene-legend span{margin-right:10px}}

/* Study 27: graphic first, words outside the routes. */
body[data-concept=redesign] .scene{height:450px;margin:0}
.scene-tag,.scene-tag.decision{background:none;border:0;border-radius:0;padding:0;font:11px/1 Consolas,monospace;color:#c7d5ed;letter-spacing:.03em}
body[data-concept=redesign] .labels{margin:0 0 27px;gap:44px}
body[data-concept=redesign] .labels h2{font-size:25px;margin:11px 0}
body[data-concept=redesign] .labels button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:16px 0 22px;border-top:1px solid #92adff40;border-bottom:0}
body[data-concept=redesign] .scene-line{border-top:0;border-bottom:1px solid #92adff30;padding:0 0 18px;flex-wrap:wrap}
.scene-legend{position:static;pointer-events:none;font-size:11px;flex:0 0 auto}
.scene-line #status{font:15px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#f4f7fb;max-width:none;flex:1;text-align:center}
.lens-note{display:none}.caption{font-size:11px;max-width:90ch;color:#9dafcc;margin-top:17px}
.controls button{font-size:11px;padding:9px 12px}.intro-row span{display:none}
@media(max-width:700px){body[data-concept=redesign] .scene{height:290px}body[data-concept=redesign] .labels{gap:0;margin:0 0 22px}body[data-concept=redesign] .labels button{display:grid;grid-template-columns:32px 1fr;gap:2px 12px;padding:16px 0}body[data-concept=redesign] .labels h2{font-size:22px;margin:0}body[data-concept=redesign] .labels p{grid-column:2;margin-top:5px}body[data-concept=redesign] .labels small{padding-top:6px}.labels small:after{display:none}.scene-line{display:flex;gap:13px}.scene-line #status{font-size:13px;text-align:right}.controls{margin:0;width:100%}.scene-tag{font-size:10px}.intro h1{font-size:41px}}