.showcase.is-column{height:clamp(480px,51vw,650px);background:#f5f8ff;border-color:#dce7f6}
.is-column .showcase-art{visibility:hidden}
.column-scene{position:absolute;inset:0;touch-action:pan-y;cursor:grab;perspective:1250px;perspective-origin:50% 48%;overflow:visible}
.column-scene:active{cursor:grabbing}
.column-scene:focus-visible{outline:2px solid #1557d4;outline-offset:-5px}
.column-rotor{position:absolute;left:50%;top:47%;width:0;height:0;transform-style:preserve-3d}
.column-card{position:absolute;left:calc(var(--card-width) / -2);top:calc(var(--card-height) / -2);width:var(--card-width);height:var(--card-height);transform-style:preserve-3d}
.column-face{position:absolute;inset:0;border:1px solid #a9c2e3;border-radius:6px;backface-visibility:hidden;overflow:hidden}
.column-front{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding:10px 12px;background:#fff;color:#1c427c;box-shadow:0 5px 12px -7px #254a7c40}
.column-front>span{white-space:normal;overflow-wrap:anywhere;font-size:11px;font-weight:600;line-height:1.35}
.column-front>strong{display:block;min-height:0;align-self:center;font:italic 17px/1.35 Georgia,"Noto Sans KR",serif;overflow-wrap:anywhere}
.column-front>small{white-space:normal;color:#637e9f;font-size:9px;line-height:1.25}
.column-back{display:grid;place-items:center;transform:rotateY(180deg);background:#e5effd;color:#9cb8df;font:36px Georgia,serif}
.column-axis{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#dde8f7;pointer-events:none}
.column-heading{position:absolute;top:24px;left:26px;z-index:3;display:grid;gap:8px;pointer-events:none}
.column-heading>span{font-size:14px;font-weight:700;color:#203d65}
.column-heading small{color:#617b9d;font-size:11px}
.column-dock{position:absolute;right:0;bottom:0;left:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-top:1px solid #d5e1f2;background:#f5f8ff}
.column-current{min-width:0;display:grid;gap:7px}
.column-current>span{font:11px ui-monospace,Consolas,monospace;color:#647e9f}
.column-current a{display:block;max-width:390px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1557d4;font-size:12px;font-weight:700;min-height:24px}
.column-current a:hover{text-decoration:underline;text-underline-offset:3px}
.column-buttons{display:flex;gap:6px;flex:none}
.spatial-toggle,.column-next{min-height:44px;padding:0 12px;border:1px solid #a7bfdc;border-radius:6px;background:#fff;color:#254879;font-family:inherit;font-size:11px;font-weight:600;line-height:1.4;cursor:pointer}
.spatial-toggle:hover,.column-next:hover{border-color:#1557d4;color:#1557d4}
.spatial-toggle:disabled{cursor:default;color:#5e7391}
.column-hint{position:absolute;right:24px;top:24px;z-index:3;margin:0;color:#617b9d;font-size:10px;pointer-events:none}
.column-scene[hidden],.column-heading[hidden],.column-dock[hidden],.column-hint[hidden]{display:none}
.relation-figure[data-loop] .relation-join{animation:relation-trace 12s linear infinite;animation-play-state:paused}
.relation-figure[data-loop-playing="true"] .relation-join{animation-play-state:running}
.identity-art[data-loop]>div{perspective:600px}
.identity-art[data-loop]>div span{animation:symbol-orbit 13s ease-in-out infinite;animation-play-state:paused;transform-style:preserve-3d}
.identity-art[data-loop]>div span:nth-child(2){animation-delay:-3s}
.identity-art[data-loop]>div span:nth-child(3){animation-delay:-6s}
.identity-art[data-loop]>div span:nth-child(4){animation-delay:-9s}
.identity-art[data-loop-playing="true"]>div span{animation-play-state:running}
@keyframes relation-trace{to{stroke-dashoffset:-120}}
@keyframes symbol-orbit{0%,100%{transform:translateY(-6px) rotateY(-24deg)}50%{transform:translateY(7px) rotateY(24deg)}}
@media(max-width:600px){
 .showcase.is-column{height:490px}
 .column-heading{top:18px;left:16px;gap:6px}
 .column-heading>span{font-size:12px}
 .column-heading small{font-size:10px}
 .column-hint{display:none}
 .column-front{padding:9px 10px;gap:4px}
 .column-front>strong{font-size:14px}
 .column-front>span{font-size:9px}
 .column-front>small{font-size:8px}
 .column-dock{align-items:stretch;flex-direction:column;gap:10px;padding:12px 14px}
 .column-current{gap:5px}
 .column-current a{max-width:100%;font-size:11px}
 .column-buttons{display:grid;grid-template-columns:1fr 1fr}
 .spatial-toggle,.column-next{padding-inline:8px;font-size:11px}
 .column-rotor{top:43%}
}
@media(prefers-reduced-motion:reduce){.relation-figure[data-loop] .relation-join,.identity-art[data-loop]>div span{animation:none!important}}

/* Screen-reviewed hero: visual column and readable formula are separate areas. */
.about-page .launch{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,58px);min-height:calc(100svh - 72px);padding:36px var(--about-pad) 44px}
.launch-copy{text-align:left}
.launch-copy h1{font-size:clamp(38px,4.5vw,66px);line-height:1.17;letter-spacing:-.068em}
.launch-copy p{max-width:30em;font-size:17px;line-height:1.85}
.launch .wide-break{display:none}
.launch-actions{justify-content:flex-start}
.about-page .info-header nav a{font-size:12px}
.showcase.is-column{display:grid;grid-template-rows:56px minmax(360px,1fr) auto;min-height:700px;height:auto;margin-top:0;border-color:#cfddf0;background:#f4f8fe}
.is-column .column-heading{position:relative;top:auto;left:auto;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-bottom:1px solid #dce6f4;background:#f4f8fe}
.column-heading>span{font-size:14px}
.column-heading small{font-size:11px}
.column-hint{display:none}
.column-viewport{position:relative;grid-row:2;min-height:0;overflow:hidden}
.column-viewport[hidden]{display:none}
.column-scene{position:absolute;inset:0;width:100%;height:100%;min-height:0;perspective-origin:50% 50%}
.column-scene::before,.column-scene::after{position:absolute;right:0;left:0;z-index:1;height:24px;pointer-events:none;content:""}
.column-scene::before{top:0;background:linear-gradient(#f4f8fe,transparent)}
.column-scene::after{bottom:0;background:linear-gradient(transparent,#f4f8fe)}
.column-rotor{top:50%}
.column-dock{position:relative;inset:auto;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;padding:14px 20px;background:#fff;border-top-color:#cfddf0}
.column-current{grid-template-rows:auto auto minmax(62px,auto) 40px;gap:4px}
.column-current>span{color:#64748b;font-size:10px}
.column-current>strong{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere;color:#253e60;font-size:16px;font-weight:700;line-height:23px;letter-spacing:-.04em}
#column-equation{display:block;align-self:center;max-height:none;margin:0;padding-block:5px;color:#164b9f;font:italic 25px/1.35 Georgia,"Noto Sans KR",serif;overflow-wrap:anywhere}
#column-equation.is-wordy{font-family:"Noto Sans KR",sans-serif;font-style:normal;font-size:14px;line-height:1.6}
.column-current a{display:inline-flex;width:fit-content;min-height:40px;align-items:center;max-width:100%;font-size:13px}
.column-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px}
.column-speed-control{display:flex;align-items:center;gap:6px;min-width:0;padding-inline:10px;border:1px solid #a7bfdc;border-radius:6px;background:#fff;color:#254879;font-size:11px}
.column-speed{min-width:0;min-height:42px;border:0;background:transparent;color:#254879;font:inherit;cursor:pointer}
.column-speed:focus-visible{outline:2px solid #1557d4;outline-offset:2px}
.spatial-toggle,.column-next{font-size:12px;min-height:44px}
.column-front{border-color:#9bb7dc;background:#fff;gap:6px}
.column-front>span{font-size:11px;color:#345783}
.column-front>strong{font-size:17px;line-height:1.35}
.column-front>small{font-size:9px}
.column-back{display:flex;align-items:center;padding:12px;background:#e5effc;border-color:#adc4e4;color:#436a9d}
.column-back strong{display:block;font:italic 17px/1.35 Georgia,"Noto Sans KR",serif;overflow-wrap:anywhere;min-width:0}
.column-card[data-type="text"] .column-front>strong,.column-card[data-type="text"] .column-back strong{font-family:"Noto Sans KR",sans-serif;font-style:normal;font-size:13px;line-height:1.4;word-break:normal;overflow-wrap:anywhere}
.column-card[data-density="long"] .column-front>strong,.column-card[data-density="long"] .column-back strong{font-size:13px;line-height:1.4}
@media(max-width:1100px) and (min-width:901px){.launch-copy h1{font-size:39px}.launch-copy p{font-size:15px}.launch-secondary,.launch .about-primary{font-size:12px}}
@media(max-width:900px){
 .about-page .launch{grid-template-columns:minmax(0,1fr);min-height:0;gap:30px;padding-block:40px}
 .launch-copy{max-width:650px;margin:auto;text-align:center}
 .launch-copy h1{font-size:clamp(38px,6.5vw,57px)}
 .launch-copy p{max-width:37ch;margin:18px auto}
 .launch-actions{justify-content:center}
 .showcase.is-column{width:min(100%,600px);justify-self:center}
}
@media(max-width:600px){
 .about-page .launch{gap:22px;padding-block:22px 30px}
 .launch-copy h1{font-size:clamp(32px,8.5vw,41px);letter-spacing:-.065em}
 .launch-copy p{font-size:15px;line-height:1.75;margin-block:15px 18px}
 .launch-actions{gap:8px}
 .showcase.is-column{height:auto;min-height:650px;grid-template-rows:52px minmax(350px,1fr) auto}
 .is-column .column-heading{padding:10px 14px}
 .column-heading>span{font-size:12px}
 .column-heading small{font-size:10px}
 .column-front>span{font-size:10px}
 .column-front>strong{font-size:15px;line-height:1.4}
 .column-back{padding:10px}
 .column-back strong{font-size:15px;line-height:1.4}
 .column-card[data-type="text"] .column-front>strong,.column-card[data-type="text"] .column-back strong{font-size:12px;line-height:1.4}
 .column-card[data-density="long"] .column-front>strong,.column-card[data-density="long"] .column-back strong{font-size:12px;line-height:1.4}
 .column-dock{padding:12px 14px}
 .column-buttons{gap:5px}
 .column-speed-control{gap:2px;padding-inline:5px;font-size:10px}
 .spatial-toggle,.column-next{font-size:10px;padding-inline:5px}
 .column-current>strong{font-size:15px}
 #column-equation{font-size:23px}
 #column-equation.is-wordy{font-size:13px}
 .about-page .info-header nav a{font-size:11px}
}
@media(max-width:360px){
 .launch-actions{gap:6px}
 .launch .about-primary{gap:12px;padding-inline:12px;font-size:11px}
 .launch-secondary{gap:5px;padding-inline:3px;font-size:11px}
}
@media(min-width:901px) and (max-height:800px){
 .showcase.is-column{min-height:max(640px,calc(100svh - 152px))}
}