/* Apple-inspired utility interface. Scientific color meanings are preserved. */
:root {
 --bg:#f5f5f7;--white:#fff;--ink:#1d1d1f;--muted:#6e6e73;--line:#e5e5e7;
 --green:#2baf77;--purple:#8a65cf;--coral:#c6503b;--deep:#0071e3;--blue:#0066cc;
 --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;word-break:keep-all}
button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;color:inherit;transition:background-color .18s,color .18s,border-color .18s,transform .18s}
button:active{transform:scale(.98)}button,a,select{touch-action:manipulation}
a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,svg:focus-visible{outline:3px solid var(--deep);outline-offset:4px}

/* Frosted navigation and a restrained, centered introduction. */
.header{position:sticky;top:0;z-index:20;min-height:68px;padding:12px max(32px,calc((100vw - 1344px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(250,250,252,.86);border-bottom:1px solid rgba(0,0,0,.07);backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px)}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.5px}
.brand-icon{display:grid;place-items:center;width:32px;height:34px;font-size:34px;line-height:1;font-weight:400}
.brand-sub{display:block;font-size:9px;color:var(--muted);margin-top:1px;font-weight:400}
.header-right{display:flex;align-items:center;gap:28px}.subject{color:var(--muted);font-size:12px}
.text-button{padding:10px 0;color:var(--blue);font-size:13px;background:transparent}
.text-button:hover{text-decoration:underline;text-underline-offset:4px}.text-button span{margin-left:6px}
main{max-width:1408px;padding:0 32px;margin:0 auto}
.intro{display:flex;justify-content:center;text-align:center;padding:72px 16px 56px}
.intro>div:first-child{max-width:900px}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:16px}
.eyebrow span{display:none}
h1{font-size:clamp(38px,4.6vw,60px);line-height:1.2;letter-spacing:-.055em;font-weight:600}
h1 span{color:#6e6e73}.intro-copy{max-width:660px;margin:22px auto 0;font-size:17px;line-height:1.65;letter-spacing:-.35px;color:var(--muted)}
.intro-mark,.journey{display:none}.mobile-break{display:none}

/* The generator is the primary object. */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 336px;align-items:start;gap:24px}
.card{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:20px}
.lab{overflow:hidden}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:28px 28px 22px}
.section-index{display:block;margin-bottom:7px;font-size:10px;font-weight:600;letter-spacing:.12em;color:#86868b}
.card-heading h2{font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.65px}
.mode-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;color:#64646b;background:#f5f5f7;border-radius:999px;white-space:nowrap;font-size:11px}
.mode-pill i{width:5px;height:5px;background:#86868b;border-radius:50%}
.mode-pill.running{color:#1767b6;background:#eef6ff}.mode-pill.running i{background:var(--deep);animation:pulse 1.4s ease-in-out infinite}.mode-pill.stopped{color:var(--muted)}
.scene-wrap{position:relative;margin:0 16px;border-radius:16px;background:#fafafc;overflow:hidden;touch-action:pan-y;user-select:none}
.scene-top{position:absolute;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:1;pointer-events:none}
.field-direction{display:flex;align-items:center;gap:6px;font-size:11px;color:#50886b}.field-direction i{width:18px;height:2px;background:#64b691}.field-direction b{font-weight:600;margin-left:4px}
.scene-hint{display:flex;align-items:center;gap:8px;font-size:11px;color:#86868b}.scene-hint span{font-size:20px;font-weight:400}
#scene{display:block;width:100%;height:auto;min-height:280px;aspect-ratio:760/410;cursor:grab;touch-action:pan-y}#scene.dragging{cursor:grabbing}
.scene-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px 20px}
.angle-badge{font-size:30px;line-height:1;letter-spacing:-1px;font-weight:600;font-variant-numeric:tabular-nums}.angle-badge span{font-size:20px;margin-left:3px;color:#86868b;font-weight:400}
.scene-key{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 16px;font-size:10px;color:var(--muted)}
.scene-key>span,.bars-legend>span{display:inline-flex;align-items:center;gap:6px}
.scene-key i,.bars-legend i{width:16px;height:2px;display:block;flex-shrink:0}
.green{background:var(--green)}.purple{background:var(--purple)}.orange{background:#e4a44c}.coral{background:var(--coral)}

/* N-pole explanation stays on the generator surface. */
.flux-cause{margin:0 22px;padding:14px 0 6px;border:0;background:transparent}
.cause-body{display:grid;grid-template-columns:minmax(190px,1.15fr) 54px minmax(190px,1fr);align-items:center;gap:14px}
.cause-view-group,.cause-result{min-width:0}
.cause-view-title{font-size:13px;font-weight:600;color:#4c6e59;line-height:1.5;letter-spacing:-.35px;text-align:center;margin:0 0 14px}
.cause-views{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0}
.cause-view{flex:1;min-width:0;text-align:center}.cause-view>span{display:block;font-size:11px;color:#7f8f82;margin-bottom:4px}.cause-view.current-view>span{color:#3e7c56;font-weight:600}
.end-on-svg{display:block;width:100%;height:auto}.time-arrow{font-size:22px;color:#9eafa1;flex-shrink:0;margin-top:-6px}
.cause-connector{text-align:center;color:#7c8f80;font-size:10px;line-height:1.65}.cause-connector>span{display:block}
.cause-trend{display:inline-block;white-space:nowrap;font-size:10px;color:#258058;background:#eaf5ee;padding:4px 6px;border-radius:6px;margin-bottom:8px}
.cause-connector b{display:block;font-size:24px;font-weight:400;color:#a4b2a6;margin-top:4px}
.scene-current-info{color:var(--coral);text-align:center;margin:0 0 12px}
.scene-current-info>span{display:block;font-size:11px;margin-bottom:4px}.scene-current-info>strong{display:block;font-size:14px;font-weight:600;line-height:1.5;white-space:nowrap}
.scene-current-info.still{color:var(--muted)}
.cause-response{text-align:center;border:1px solid #e9e3f1;border-radius:14px;background:#fdfbff;padding:14px 12px;min-width:0}
.cause-reference-field{display:flex;align-items:center;justify-content:center;gap:12px;color:#429b6c;margin-bottom:7px}
.cause-reference-field span{font-size:11px}.cause-reference-field b{font-size:30px;line-height:1;font-weight:400}
.cause-response>span{display:block;font-size:13px;font-weight:600;color:#8a65bd}
.cause-response>svg{display:block;width:100%;height:42px;max-width:260px;margin:3px auto;overflow:visible}
.cause-response strong{display:block;font-size:12px;line-height:1.7;font-weight:600;color:#7e6599;letter-spacing:-.3px}
.cause-response small{display:block;font-size:10px;color:#9583aa;margin-top:7px}
.flux-cause[data-trend=stopped] .cause-trend,.flux-cause[data-trend=turn] .cause-trend{background:#eeedf2;color:#797383}

/* Blue controls, scientific layer colors. */
.controls{padding:26px 28px 24px}
.angle-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.angle-label label{font-size:14px;font-weight:600}.angle-label label span{font-size:11px;font-weight:400;color:#86868b;margin-left:10px}
.angle-label output{font-size:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
input[type=range]{display:block;width:100%;appearance:none;-webkit-appearance:none;height:5px;border-radius:5px;margin:25px 0 12px;background:#dedee3;cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:22px;width:22px;border:1px solid #e0e0e4;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.16)}
input[type=range]::-moz-range-thumb{height:20px;width:20px;border:1px solid #e0e0e4;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.angle-ticks{display:flex;justify-content:space-between;margin:0 -7px;gap:2px}
.angle-ticks button{min-width:30px;min-height:34px;padding:6px 5px;background:transparent;color:#86868b;font-size:11px;border-radius:8px;font-variant-numeric:tabular-nums}
.angle-ticks button.active,.angle-ticks button:hover{color:var(--blue);background:#f0f6fd}.angle-ticks button.active{font-weight:600}
.playback{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 22px;border-radius:999px;background:var(--deep);color:#fff;font-size:13px;font-weight:400;white-space:nowrap}
.primary-button:hover{background:#0077ed}.primary-button>span:first-child{font-size:12px}
.secondary-button{min-height:44px;padding:10px 18px;border-radius:999px;color:var(--ink);background:#f5f5f7;border:1px solid #ededf0;font-size:12px;white-space:nowrap}
.secondary-button:hover,.secondary-button.active{background:#e9e9ed}




.icon-button{display:inline-grid;place-items:center;width:36px;height:40px;background:transparent;color:var(--muted);font-size:24px;border-radius:50%}.icon-button:hover{background:#f5f5f7;color:var(--blue)}
/* Explicit direction and speed choices stay visible at every width. */
.playback>#reset{margin-left:auto;width:44px;height:44px}
.rotation-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:24px}
.rotation-setting{min-width:0;margin:0;padding:0;border:0}
.rotation-setting legend{padding:0;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--ink);line-height:1.5}
.choice-buttons{display:flex;align-items:stretch;gap:8px;min-width:0}
.choice-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 0;min-width:0;min-height:44px;padding:10px;font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;color:#333336;background:#fff;border:1px solid #bfc0c7;border-radius:10px}
.choice-buttons button>span{font-size:18px;font-weight:400;line-height:1}
.choice-buttons button:hover{background:#f0f6fd;border-color:#78a6d8;color:var(--blue)}
.choice-buttons button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.choice-buttons button[aria-pressed=true]:hover{background:#005bb8;border-color:#005bb8;color:#fff}
@media(max-width:640px){.rotation-settings{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:22px}.rotation-setting legend{font-size:13px;margin-bottom:9px}.choice-buttons button{min-height:44px;font-size:13px}}

.layer-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:22px;padding-top:19px;border-top:1px solid #ededf0;color:#616166;font-size:12px}
.layer-controls label{display:inline-flex;align-items:center;gap:8px;position:relative;cursor:pointer;min-height:26px}
.layer-controls input{position:absolute;opacity:0;width:18px;height:18px;margin:0}
.layer-controls .check{display:grid;place-items:center;width:17px;height:17px;border:1px solid #c6c6cc;border-radius:5px;color:#fff;background:#fff;font-size:12px;line-height:1}
.layer-controls input:focus-visible+.check{outline:3px solid var(--deep);outline-offset:3px}
.layer-controls input:checked+.check:after{content:'✓'}
.layer-controls input:checked+.green-check{background:var(--green);border-color:var(--green)}
.layer-controls input:checked+.purple-check{background:var(--purple);border-color:var(--purple)}
.layer-controls input:checked+.coral-check{background:var(--coral);border-color:var(--coral)}
.snapshot-note{font-size:11px;line-height:1.7;letter-spacing:-.15px;color:#86868b;margin-top:12px}

/* Live observations. */
.observation-heading{display:flex;align-items:center;gap:8px;padding:7px 2px 16px}
.observation-heading h2{font-size:14px;font-weight:600;letter-spacing:-.3px}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--deep)}
.observation-heading>span:last-child{margin-left:auto;color:#86868b;font-size:11px;white-space:nowrap}
.observations .card+.card{margin-top:14px}
.metric{padding:24px}.metric-title{display:flex;align-items:center;gap:8px}
.number-badge{display:grid;place-items:center;width:20px;height:20px;flex-shrink:0;border-radius:6px;font-size:11px;font-weight:600}
.green-bg{background:#edf7f1;color:#288259}.purple-bg{background:#f2eef9;color:var(--purple)}.coral-bg{background:#fcf0ed;color:var(--coral)}
.metric-title h3{font-size:14px;font-weight:600;line-height:1.5;letter-spacing:-.5px}.tiny-label{display:none}
.metric-value{display:flex;align-items:baseline;gap:3px;margin-top:24px}
.metric-value strong{font-size:48px;font-weight:600;line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.metric-value>span:first-of-type{font-size:19px;margin-left:3px;font-weight:400}.green-text{color:#288d60}
.trend-badge{margin-left:auto;padding:4px 7px;border-radius:6px;background:#edf7f1;color:#38815c;font-size:10px;white-space:nowrap}
.meter{height:5px;border-radius:8px;background:#ededf0;overflow:hidden;margin-top:19px}
.fill{height:100%;width:71%;border-radius:8px;transition:width .1s linear}
.green-fill{background:var(--green)}.purple-fill{background:var(--purple)}.coral-fill{background:var(--coral)}
.meter-labels{display:flex;justify-content:space-between;margin-top:8px;color:#86868b;font-size:10px}
.metric p{margin-top:16px;color:var(--muted);font-size:12px;line-height:1.8;letter-spacing:-.25px}
.aperture-line{display:flex;align-items:center;gap:8px;margin-top:17px;padding-top:13px;border-top:1px solid #ededf0;color:#86868b;font-size:10px}
.aperture-line b{font-size:11px;font-weight:600;color:#48825e;border-radius:4px;background:#f1f7f3;padding:1px 6px}
.aperture-line>span:last-child{margin-left:auto;font-size:9px}
.relation-view{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:68px;margin:21px 0 2px}
.relation-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;flex-shrink:0;font-size:40px;line-height:1;font-weight:400;transition:opacity .15s}
.relation-arrow small{display:block;font-size:10px;font-weight:400;margin-top:9px;white-space:nowrap}
.external-mini{color:var(--green)}.induced-mini{color:var(--purple);width:76px}.compact-purple-arrow{display:block;width:100%;height:40px;overflow:visible}
.relation-chip{padding:6px 8px;border-radius:7px;background:#f5f1fa;color:#8662b9;font-size:11px;white-space:nowrap}
.principle-note{margin-top:16px;padding-top:13px;border-top:1px solid #ededf0;color:#80708f;font-size:11px;line-height:1.7}
.principle-note span{margin-right:7px;color:#8662b9;font-weight:600}.principle-note b{font-weight:600;color:#8662b9}
.relation-footnote{display:block;font-size:10px;line-height:1.7;color:#998ba7;margin-top:9px}
.current-reading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:22px}
.current-reading strong{font-size:28px;color:var(--coral);letter-spacing:-.7px;font-weight:600;white-space:nowrap}
.current-reading>span{color:#86868b;font-size:11px;white-space:nowrap}.current-reading b{font-size:14px;color:var(--coral);font-weight:600;margin-left:5px}
.current-meter{display:flex;align-items:center;gap:8px;margin-top:15px;font-size:10px;color:#86868b}.current-meter .meter{flex:1;margin:0}
.current-path{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;padding:12px 8px;border-radius:9px;background:#fcf5f3;color:var(--coral)}
.current-path>span{font-family:Georgia,serif;font-size:15px;font-style:italic}.current-path i{font-style:normal;font-size:13px}
.current-path.still{font-size:12px;color:#8b8180}.current-path:not(.still) span,.current-path:not(.still) i{color:var(--coral)}
.current-card p{margin-top:13px}

/* Secondary angle snapshots. */
.key-section{padding:64px 0 60px}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.section-title h2{font-size:30px;font-weight:600;letter-spacing:-1px;line-height:1.3}
.section-title>p{padding-bottom:2px;font-size:12px;color:#86868b;white-space:nowrap}
.moment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.moment{padding:26px 24px;text-align:left;border:1px solid transparent;border-radius:18px}
.moment:hover{border-color:#d4d4d8;background:#fafafc}.moment.active{border-color:var(--deep);background:#fff}
.moment-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.moment-top strong{font-size:32px;font-weight:600;letter-spacing:-1px;line-height:1.2}
.moment-top>span{color:#86868b;font-size:10px;line-height:1.5;text-align:right}
.mini-bars{display:flex;flex-direction:column;gap:6px;margin:26px 0 22px}
.mini-bars i{display:block;position:relative;height:4px;background:#ededf0;border-radius:4px}
.mini-bars i:after{content:'';display:block;width:var(--amount);height:100%;border-radius:4px}
.mini-flux:after{background:var(--green)}.mini-current:after{background:var(--coral)}
.moment h3{font-size:15px;font-weight:600;line-height:1.75;letter-spacing:-.4px}
.moment p{font-size:11px;line-height:1.7;color:var(--muted);margin-top:9px}
.moment-link{display:block;margin-top:22px;color:var(--blue);font-size:12px}
.bars-legend{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:16px 2px 0;font-size:10px;color:#86868b}
.bars-legend>span:last-child{margin-left:auto}
footer{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1344px;margin:0 auto;padding:24px 0 32px;border-top:1px solid #dedee3;font-size:10px;color:#86868b}
.footer-brand{font-size:12px;font-weight:600;color:var(--muted)}footer>span:last-child{font-size:9px;letter-spacing:.1em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{border:1px solid var(--line);border-radius:24px;width:calc(100% - 40px);max-width:480px;padding:32px;color:var(--ink);background:#fff}
dialog::backdrop{background:rgba(29,29,31,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.dialog-heading h2{font-size:25px;line-height:1.3;letter-spacing:-.8px;font-weight:600}
dialog ol{padding-left:22px;margin:28px 0 12px}dialog li{padding:0 0 24px 6px;font-size:14px;color:#86868b}
dialog li b{font-weight:600;color:var(--ink)}dialog li p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:6px}
dialog .primary-button{width:100%}
@keyframes pulse{50%{opacity:.35}}

@media(min-width:1600px){
 main{max-width:1480px}.workspace{grid-template-columns:minmax(0,1fr) 360px;gap:28px}.metric{padding:27px}
}
@media(max-width:1280px){
 .workspace{grid-template-columns:minmax(0,1fr) 306px;gap:20px}.metric{padding:21px}.metric-title h3{font-size:13px}
 .relation-arrow{width:60px}.induced-mini{width:70px}.relation-chip{font-size:10px;padding:6px}.aperture-line>span:last-child{display:none}
 .scene-hint{font-size:10px}.cause-body{grid-template-columns:minmax(170px,1.1fr) 46px minmax(170px,1fr);gap:10px}
 .cause-view-title{font-size:12px}.scene-current-info>strong{font-size:13px}.cause-response strong{font-size:11px}.cause-connector{font-size:9px}
 .scene-key{font-size:9px;gap:7px 12px}.controls{padding:24px}.primary-button{padding:11px 18px}.secondary-button{padding:10px 14px}
 footer{margin-left:32px;margin-right:32px}
}
@media(max-width:1100px){
 .header,main{padding-left:28px;padding-right:28px}.workspace{grid-template-columns:minmax(0,1fr);gap:28px}
 .observations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
 .observation-heading{grid-column:1/-1;padding:0 2px}.observations .card+.card{margin-top:0}.metric{height:100%;padding:21px}
 .metric-title{align-items:flex-start}.metric-title h3{font-size:13px}.metric-value{flex-wrap:wrap}.trend-badge{font-size:9px}
 .relation-view{gap:4px}.relation-arrow{width:52px}.induced-mini{width:62px}.relation-arrow small{font-size:9px}.relation-chip{font-size:9px;padding:5px}
 .current-reading{flex-wrap:wrap;gap:4px}.current-path{gap:8px;padding-left:6px;padding-right:6px}
 .cause-body{grid-template-columns:minmax(240px,1.2fr) 64px minmax(220px,1fr);gap:22px}.cause-view-title{font-size:14px}
 .scene-current-info>strong{font-size:15px}.cause-response strong{font-size:13px}.cause-connector,.scene-key{font-size:11px}
 .primary-button{padding-left:22px;padding-right:22px}.section-title h2{font-size:26px}.moment-grid{gap:16px}.moment{padding:22px 18px}
 .moment-top{align-items:flex-start}.moment-top strong{font-size:28px}.moment h3{font-size:13px}.moment p{font-size:10px}
}
@media(max-width:900px){
 .intro{padding-top:60px;padding-bottom:48px}h1{font-size:48px}.intro-copy{font-size:16px}
 .observations{gap:12px}.metric{padding:20px 16px}.metric p{font-size:11px}.metric-value strong{font-size:42px}.trend-badge{margin-left:4px}
 .relation-view{flex-wrap:wrap;justify-content:center;column-gap:10px}.relation-chip{order:3;width:100%;text-align:center;margin-top:4px}
 .principle-note{font-size:10px}.relation-footnote{font-size:9px}.current-path{gap:6px}
 .cause-body{grid-template-columns:minmax(200px,1.2fr) 54px minmax(190px,1fr);gap:14px}
 .section-title{align-items:flex-start;flex-direction:column;gap:10px}.moment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .moment{padding:26px}.moment h3{font-size:15px}.moment p{font-size:12px}
}
@media(max-width:720px){
 .observations{grid-template-columns:1fr;gap:14px}.metric{padding:24px}.metric-title{align-items:center}.metric-title h3{font-size:15px}.metric p{font-size:13px}
 .metric-value{flex-wrap:nowrap}.metric-value strong{font-size:46px}.trend-badge{margin-left:auto;font-size:11px}.aperture-line>span:last-child{display:block}
 .relation-view{flex-wrap:nowrap;justify-content:center;gap:24px}.relation-arrow{width:70px}.induced-mini{width:76px}
 .relation-chip{order:initial;width:auto;font-size:11px;margin-top:0;padding:7px 10px}.relation-arrow small{font-size:10px}
 .principle-note{font-size:12px}.relation-footnote{font-size:11px}.current-reading{flex-wrap:nowrap}.current-path{gap:14px}
}
@media(max-width:640px){
 .header{min-height:64px;padding:10px 18px;gap:16px}.brand{font-size:14px;gap:8px}.brand-icon{font-size:30px;width:28px}.brand-sub{font-size:8px}
 .header-right{gap:0}.subject{display:none}.text-button{font-size:12px}main{padding:0 16px}
 .intro{padding:44px 8px 36px}.eyebrow{font-size:11px;margin-bottom:12px}h1{font-size:38px;line-height:1.24;letter-spacing:-.065em}h1 span{display:block}
 .intro-copy{font-size:14px;margin-top:17px;line-height:1.75}.mobile-break{display:block}
 .card{border-radius:18px}.card-heading{padding:22px 20px 18px;gap:10px}.section-index{font-size:9px;margin-bottom:5px}
 .card-heading h2{font-size:19px}.mode-pill{font-size:9px;padding:6px 9px;gap:5px}
 .scene-wrap{margin:0 8px;border-radius:12px}.scene-top{top:12px;left:12px;right:12px}.field-direction{font-size:9px;gap:5px}.field-direction i{width:14px}.scene-hint{display:none}
 #scene{min-height:236px}.flux-cause{margin:0 14px;padding-top:4px}.cause-body{grid-template-columns:minmax(0,1fr);gap:14px}
 .cause-view-title{font-size:13px;margin-bottom:14px}.cause-views{max-width:320px;margin:0 auto}.cause-view>span{font-size:12px}
 .cause-connector{display:flex;justify-content:center;align-items:center;gap:10px;font-size:11px;line-height:1.4}
 .cause-connector .cause-trend{margin:0;font-size:10px}.cause-connector br{display:none}.cause-connector b{transform:rotate(90deg);margin:0;font-size:22px}
 .scene-current-info{margin:0 0 12px}.scene-current-info>span{font-size:11px}.scene-current-info>strong{font-size:15px}
 .cause-response{padding:16px;border-radius:12px}.cause-response>svg{height:40px;max-width:240px}
 .cause-response>span,.cause-response strong{font-size:13px}.cause-response small{font-size:11px}
 .scene-bottom{align-items:flex-end;padding:20px 16px;gap:12px}.angle-badge{font-size:28px}.scene-key{gap:5px 10px;max-width:215px;font-size:9px}.scene-key i{width:13px}
 .controls{padding:22px 20px}.angle-label label{font-size:13px}.angle-label label span{display:none}.angle-label output{font-size:18px}
 input[type=range]{margin-top:24px;margin-bottom:14px}.angle-ticks{gap:0;margin-left:-5px;margin-right:-5px}.angle-ticks button{font-size:10px;min-width:0;padding:6px 3px;flex:1}
 .playback{gap:8px;margin-top:20px}.primary-button{min-height:44px;padding:11px 18px;font-size:12px}.secondary-button{min-height:44px;padding:10px 15px;font-size:12px}

 .layer-controls{gap:8px 15px;font-size:11px;margin-top:16px;padding-top:16px}.layer-controls label{gap:6px;min-height:30px}.layer-controls .check{width:16px;height:16px;font-size:11px}
 .snapshot-note{font-size:10px;margin-top:10px}.workspace{gap:24px}.observation-heading{padding-left:4px;padding-right:4px}.observation-heading h2{font-size:14px}.observation-heading>span:last-child{font-size:11px}
 .metric{padding:24px 22px}.current-path{gap:14px}.key-section{padding:44px 0 36px}
 .section-title{margin-bottom:20px;gap:10px;padding:0 4px}.section-title h2{font-size:24px;letter-spacing:-.8px}.section-title>p{font-size:11px;white-space:normal}
 .moment-grid{gap:12px}.moment{padding:22px 16px;border-radius:16px}.moment-top{flex-direction:column;gap:7px;align-items:flex-start}.moment-top strong{font-size:30px}
 .moment-top>span{text-align:left;font-size:10px;min-height:30px}.mini-bars{margin:20px 0 18px}.moment h3{font-size:12px;line-height:1.8}.moment p{font-size:10px}.moment-link{margin-top:18px;font-size:10px}
 .bars-legend{font-size:9px;gap:9px 16px;line-height:1.7}.bars-legend>span:last-child{flex-basis:100%;margin-left:0}
 footer{margin-left:20px;margin-right:20px;padding-top:20px;padding-bottom:28px}.footer-brand{font-size:11px}footer>span:last-child{font-size:8px}
 dialog{padding:26px 24px;border-radius:20px}.dialog-heading h2{font-size:22px}
}
@media(max-width:360px){
 h1{font-size:34px}.card-heading{padding-left:16px;padding-right:16px}.card-heading h2{font-size:17px}.mode-pill{padding:5px 7px;font-size:8px}
 .layer-controls{column-gap:10px}.relation-view{gap:12px}.relation-chip{font-size:10px;padding-left:8px;padding-right:8px}.current-path{gap:10px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
}

/* Channel identity and a single-line title. */
.brand-profile{display:block;width:40px;height:40px;flex-shrink:0;border-radius:50%;object-fit:cover;border:1px solid rgba(0,0,0,.06)}
.intro h1{font-size:clamp(19px,4.2vw,58px);white-space:nowrap;letter-spacing:-.05em;line-height:1.24}
.footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;font-size:12px;letter-spacing:0}
.footer-links a{color:var(--blue);line-height:1.6}.footer-links a:hover{text-decoration:underline;text-underline-offset:4px}.footer-links span{margin-left:4px}
.mode-pill.detent{color:#1767b6;background:#eef6ff}.mode-pill.detent i{background:var(--deep)}
@media(max-width:640px){footer{align-items:flex-start;flex-wrap:wrap;gap:16px}.footer-links{width:100%;gap:10px 20px;font-size:11px}.brand-profile{width:36px;height:36px}.intro{padding-left:0;padding-right:0}}

/* Keep the full field-line label readable in narrow angle cards. */
.moment-top strong{flex:0 0 auto}.moment-top>span{min-width:0;overflow-wrap:anywhere}
.bars-legend>span{min-width:0;max-width:100%;overflow-wrap:anywhere}

/* Local explanation panels retain the same quiet experiment surface. */
.turn-explainer.card{margin:0 28px 28px;padding:24px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.turn-heading h3{font-size:17px;font-weight:600;line-height:1.5;letter-spacing:-.45px}
.turn-heading p{margin-top:9px;color:var(--muted);font-size:13px;line-height:1.8;letter-spacing:-.2px}
.turn-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.turn-sample{display:flex;flex-direction:column;align-items:center;min-width:0;padding:14px 10px;border:1px solid #e7e7ec;border-radius:12px;background:#fafafc;text-align:center}
.turn-sample>span{font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
.turn-sample svg{display:block;width:100%;height:auto;max-width:190px;margin:10px auto 8px;overflow:visible}
.turn-sample strong{display:block;font-size:13px;font-weight:600;line-height:1.5;color:#288d60}
.turn-sample small{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.6}
.turn-sample.active{border-color:#77a9dd;background:#f2f7fd}
.turn-sample.active>span{color:var(--blue)}
.turn-summary{margin-top:18px;color:var(--ink);font-size:13px;font-weight:600;line-height:1.8;letter-spacing:-.2px}
.turn-note{margin-top:8px;color:var(--muted);font-size:11px;line-height:1.8}
.boundary-label{color:#77707f;fill:#77707f;font-size:11px;font-weight:600;line-height:1.5}
.boundary-note{margin-top:9px;color:var(--muted);font-size:11px;line-height:1.8;letter-spacing:-.15px}
.right-hand-card{min-width:0;padding:24px}
.right-hand-heading h3{font-size:16px;font-weight:600;line-height:1.5;letter-spacing:-.4px}
.right-hand-heading p{margin-top:9px;color:var(--muted);font-size:12px;line-height:1.8;letter-spacing:-.2px}
.right-hand-examples{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:20px}
.hand-example{min-width:0;padding:14px 12px;border:1px solid #e7e7ec;border-radius:12px;background:#fafafc}
.hand-example-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hand-example-heading strong{font-size:15px;font-weight:600;line-height:1.4}
.hand-trend{color:#48825e;font-size:11px;line-height:1.5;text-align:right}
.hand-example svg{display:block;width:100%;height:auto;margin:12px auto;overflow:visible}
.hand-sequence{color:var(--coral);font-size:13px;font-weight:600;line-height:1.7;text-align:center;overflow-wrap:anywhere}
.hand-reason{margin-top:9px;color:var(--muted);font-size:12px;line-height:1.8;letter-spacing:-.2px}
.hand-view-note{margin-top:17px;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.8}
@media(max-width:1100px){.observations>.right-hand-card{grid-column:1/-1}.right-hand-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.hand-example{padding:18px}.hand-example svg{max-width:340px}.right-hand-heading h3{font-size:17px}}
@media(max-width:720px){.right-hand-examples{grid-template-columns:minmax(0,1fr);gap:18px}.right-hand-card{padding:24px}.hand-example{padding:16px}.hand-example svg{max-width:360px}.hand-view-note{font-size:11px}}
@media(max-width:640px){.turn-explainer.card{margin:0 20px 24px;padding-top:22px}.turn-heading h3{font-size:16px}.turn-heading p{font-size:12px}.turn-samples{gap:8px;margin-top:18px}.turn-sample{padding:12px 6px;border-radius:10px}.turn-sample>span{font-size:13px}.turn-sample svg{margin-top:9px;margin-bottom:7px}.turn-sample strong{font-size:12px}.turn-sample small{font-size:10px;line-height:1.7}.turn-summary{font-size:12px}.turn-note,.boundary-note{font-size:11px}.right-hand-card{padding:24px 22px}}

[hidden]{display:none!important}
.flux-cause[data-boundary="true"] .cause-reference-field{display:none}
.hand-example.active{border-color:#77a9dd;background:#f2f7fd}

.workspace>.right-hand-card{grid-column:1/-1;padding:28px}
.right-hand-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.hand-example{padding:22px}
.hand-example svg{max-width:340px}
.turn-growth{margin-top:20px;padding:18px;border-radius:12px;background:#f8faf9}
.turn-growth h4{font-size:12px;font-weight:600;line-height:1.6;color:var(--ink)}
.turn-growth-bars{display:grid;gap:12px;margin-top:14px}
.turn-growth-row{display:grid;grid-template-columns:88px minmax(0,1fr) 70px;align-items:center;gap:12px;font-size:11px;color:var(--muted)}
.turn-growth-row strong{text-align:right;font-size:11px;color:#288d60;font-weight:500;font-variant-numeric:tabular-nums}
.growth-track{height:8px;background:#e5eee7;border-radius:4px;overflow:hidden}
.growth-track i{display:block;height:100%;background:#2aab70;border-radius:4px}
.turn-growth>p{margin-top:12px;font-size:10px;line-height:1.7;color:var(--muted)}
.turn-sample em{margin-top:7px;color:#73737c;font-size:10px;font-style:normal;line-height:1.6}
@media(max-width:720px){.right-hand-examples{grid-template-columns:minmax(0,1fr)}.workspace>.right-hand-card{padding:24px 22px}.hand-example{padding:16px}}
@media(max-width:640px){.turn-growth{padding:14px 12px}.turn-growth-row{grid-template-columns:76px minmax(0,1fr) 64px;gap:8px;font-size:10px}.turn-growth-row strong{font-size:10px}.turn-sample em{font-size:9px}}

/* Reuse the actual generator scene for the two hand-overlay examples. */
.hand-example .generator-hand-svg{width:100%;max-width:none;margin:10px auto 16px}
.hand-example{padding:20px 16px}
.turn-explainer.card{padding-top:22px;padding-bottom:0}
.turn-heading p{max-width:68ch}
@media(max-width:720px){.hand-example{padding:16px 10px}.hand-example .generator-hand-svg{margin:12px 0}.hand-view-note{font-size:11px}}

/* Recognizable social marks, with each footer link kept as one wrapping unit. */
.footer-links .footer-social-link{display:inline-flex;align-items:center;gap:8px;min-height:32px;white-space:nowrap}
.footer-social-icon{display:block;width:20px;height:20px;flex:0 0 20px}
.footer-links .footer-external{margin-left:0;font-size:13px;line-height:1}