:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: full-bleed WebGL stage; HUD floats at the four corners like a film title card, controls dock at the bottom */
:root {
  --ink: #04060b;
  --veil: rgba(6, 9, 16, 0.62);
  --line: rgba(214, 200, 168, 0.18);
  --text: #ece6d8;
  --muted: #9a9686;
  --sol: #e9b55c;
  --good: #7fd6b4;
  --bad: #e8705f;
  --mid: #b8b2a2;
  --wood: #6cc48a; --fire: #ec6f5d; --earth: #d9b45e; --metal: #dcdde6; --water: #6c9cf0;
  --f-display: "Noto Serif KR", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
html, body { height: 100%; }
body { background: var(--ink); color: var(--text); font-family: var(--f-body); overflow: hidden; -webkit-font-smoothing: antialiased; }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }

.hud { position: absolute; inset: 0; pointer-events: none;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.clock { min-width: 0; display: grid; gap: 6px; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.brand { font-family: var(--f-display); font-size: 13px; letter-spacing: .32em; color: var(--sol); }
.date { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: clamp(28px, 5.4vw, 52px); font-weight: 400; letter-spacing: -.01em; line-height: 1; }
.date small { font-size: .42em; color: var(--muted); margin-left: .4em; letter-spacing: 0; }
.readout { display: grid; grid-template-columns: auto auto; gap: 3px 14px; font-size: 12px; color: var(--muted); width: max-content; max-width: 100%; }
.readout b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.readout .hj { font-family: var(--f-display); }

.chart { pointer-events: auto; background: var(--veil); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px 9px; display: grid; gap: 6px; }
.chart h2 { margin: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.chart h2 .tag { color: var(--sol); letter-spacing: .06em; }
.pillars { display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; direction: rtl; }
.pil { direction: ltr; display: grid; justify-items: center; gap: 1px; }
.pil .lab { font-size: 10px; color: var(--muted); }
.pil .g { font-family: var(--f-display); font-size: 24px; font-weight: 700; line-height: 1.12; }
.pil .tg { font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.pil.day .lab { color: var(--sol); }
.e0 { color: var(--wood); } .e1 { color: var(--fire); } .e2 { color: var(--earth); } .e3 { color: var(--metal); } .e4 { color: var(--water); }

.caption { align-self: end; justify-self: center; text-align: center; display: grid; gap: 6px; max-width: min(640px, 100%);
  opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease; text-shadow: 0 2px 18px rgba(0,0,0,.9); }
.caption.on { opacity: 1; transform: none; }
.cap-eyebrow { font-size: 11px; letter-spacing: .34em; color: var(--sol); }
.cap-title { font-family: var(--f-display); font-size: clamp(26px, 5vw, 44px); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
.cap-sub { font-size: 13.5px; color: #cfc8b7; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.chip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; letter-spacing: .04em; }
.chip.good { color: var(--good); } .chip.bad { color: var(--bad); } .chip.mid, .chip.none { color: var(--mid); }

.dock { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px;
  background: var(--veil); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.btn { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--text); font: 500 12.5px var(--f-body);
  height: 34px; min-width: 34px; padding: 0 10px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn:hover { border-color: rgba(233,181,92,.6); }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
.btn svg { width: 14px; height: 14px; fill: currentColor; }
.track { position: relative; height: 34px; min-width: 0; }
.track input { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.rail { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(214,200,168,.2); transform: translateY(-50%); border-radius: 2px; }
.fill { position: absolute; left: 0; top: 50%; height: 2px; background: var(--sol); transform: translateY(-50%); border-radius: 2px; }
.mk { position: absolute; top: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; transform: translateY(-50%); background: var(--ink); border: 1.5px solid var(--mid); }
.mk.good { border-color: var(--good); } .mk.bad { border-color: var(--bad); } .mk.birth, .mk.now, .mk.future { border-color: var(--sol); background: var(--sol); }
.mk-l { position: absolute; top: -3px; transform: translateX(-50%); font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tlabel { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.mk-l.cm-end-label { transform:translateX(-100%);font-size:11px; }
.mk-l.cm-now-label { top:22px; }
@container (max-width:360px) { .mk-l.cm-now-label { display:none; } }

.intro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(ellipse at center, rgba(4,6,11,.25), rgba(4,6,11,.78)); transition: opacity 1.2s ease; z-index: 5; }
.intro.gone { opacity: 0; pointer-events: none; }
.intro-in { display: grid; gap: 14px; justify-items: center; max-width: 520px; }
.intro .kicker { font-size: 11px; letter-spacing: .4em; color: var(--sol); }
.intro h1 { font-family: var(--f-display); font-size: clamp(40px, 9vw, 76px); font-weight: 600; margin: 0; letter-spacing: .06em; line-height: 1.05; }
.intro p { margin: 0; color: #cfc8b7; font-size: 14.5px; line-height: 1.65; text-wrap: balance; }
.intro .sample { font-size: 12px; color: var(--muted); }
.play-big { height: 46px; padding: 0 26px; font-size: 14px; letter-spacing: .12em; border-color: rgba(233,181,92,.7); color: var(--sol); }
.play-big:hover { background: rgba(233,181,92,.1); }

.drawer { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: min(360px, 100%); background: rgba(8,11,19,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--line); transform: translateX(102%); transition: transform .45s cubic-bezier(.2,.8,.2,1); overflow-y: auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + 20px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  padding-left: 20px; padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.drawer.open { transform: none; }
.drawer h3 { font-family: var(--f-display); font-size: 20px; margin: 0 0 4px; font-weight: 600; }
.drawer .hint { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
form { display: grid; gap: 14px; }
.row { display: grid; gap: 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label, .lbl { font-size: 11.5px; color: var(--muted); letter-spacing: .06em; }
input[type=date], input[type=time], input[type=number], select { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.04); color: var(--text); border: 1px solid var(--line); border-radius: 4px; height: 38px; padding: 0 10px; font: 14px var(--f-body); }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg label { display: grid; place-items: center; height: 36px; cursor: pointer; font-size: 13px; color: var(--text); letter-spacing: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + span { color: var(--sol); }
.seg label:has(input:checked) { background: rgba(233,181,92,.12); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text); letter-spacing: 0; line-height: 1.5; }
.check input { margin-top: 3px; accent-color: var(--sol); }
.note { font-size: 11.5px; color: var(--muted); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 12px; }
.actions { display: flex; gap: 8px; }
.actions .btn { flex: 1; height: 40px; }
.primary { border-color: rgba(233,181,92,.7); color: var(--sol); }

@media (max-width: 640px) {
  .readout { font-size: 11px; }
  .pillars { grid-template-columns: repeat(4, 36px); }
  .pil .g { font-size: 20px; }
  .dock { grid-template-columns: auto 1fr auto auto; }
  .tlabel { display: none; }
  .cap-sub { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .caption, .intro, .drawer { transition: none; } }
.cm-flow { position:absolute;z-index:3;right:24px;bottom:145px;width:min(440px,46%);height:285px;pointer-events:none;opacity:0;background:radial-gradient(ellipse,rgba(4,7,13,.85),rgba(4,7,13,.52) 65%,transparent 90%);transition:opacity .35s; }
.cm-flow svg { width:100%;height:100%;overflow:visible; }
.cm-flow .event-step { position:absolute;left:0;right:0;bottom:-22px;text-align:center;font:11px/1.6 var(--f-body);color:#ddd4c4;letter-spacing:.06em; }
.cm-flow .legend { position:absolute;left:0;right:0;top:-18px;display:flex;gap:16px;justify-content:center;font:10px/1.5 var(--f-body);color:#bab8b0; }
.cm-flow .legend span::before { content:'';display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:5px;background:#92d6bc; }
.cm-flow .legend span:last-child::before { background:#e8897d; }
.cm-flow .flow-source { position:absolute;top:-42px;left:0;right:0;text-align:center;color:var(--sol);font:10px/1.5 var(--f-body);letter-spacing:.12em; }
.cm-birth-city { position:absolute;z-index:3;pointer-events:none;color:#ffe3aa;text-shadow:0 2px 10px #000;font:12px/1.5 var(--f-body);letter-spacing:.08em; }
.cm-original-explaining .caption { justify-self:start;text-align:left;max-width:49%;padding-left:18px; }
.cm-original-explaining .caption .cap-sub { justify-content:flex-start; }
.cm-original-explaining .caption .cap-title { font-size:clamp(25px,4cqw,42px); }
.cm-original-explaining .caption .cap-eyebrow { letter-spacing:.2em; }
.cm-credit { position:absolute;right:20px;bottom:68px;z-index:3;pointer-events:auto;font:10px/1.5 var(--f-body);color:var(--muted); }
.cm-credit summary { list-style:none;min-height:25px; }
.cm-credit div { position:absolute;right:0;bottom:30px;width:min(320px,85cqw);padding:13px;background:#080b13;border:1px solid var(--line); }
.cm-credit a { color:var(--sol); }
@container (max-width:640px) {
 .cm-flow { left:12px;right:12px;width:calc(100% - 24px);height:245px;bottom:188px; }
 .cm-flow .legend { display:none; }
 .cm-flow .flow-source { text-align:right;top:-19px;left:auto;right:5px;max-width:180px; }
 .cm-original-explaining .caption { justify-self:center;text-align:center;max-width:100%;padding:0; }
 .cm-original-explaining .caption .cap-sub { justify-content:center; }
 .cm-original-explaining .caption .cap-title { font-size:25px; }
 .cm-credit { bottom:60px;right:16px; }
 .cm-birth-city { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .cm-flow { transition:none; } }
#cm-original {container-type:inline-size;}
.cm-reading {position:relative;display:grid;gap:10px;max-width:510px;text-shadow:0 2px 14px #000;pointer-events:auto;}
.cm-reading[hidden] {display:none;}
.cm-reading-active .caption {max-width:47%;justify-self:start;text-align:left;padding-left:18px;pointer-events:auto;}
.cm-reading-active .caption .cap-title {font-size:clamp(24px,3.2vw,38px);line-height:1.35;max-width:510px;}
.cm-reading-active .caption .cap-eyebrow {font-size:13px;letter-spacing:.07em;}
.cm-reading-active .caption .cap-sub {display:none;}
.cm-reading-meaning {font:15px/1.7 var(--f-body);color:#eee7da;margin:0;}
.cm-reading-guidance {display:grid;gap:7px;margin:0;font:14px/1.6 var(--f-body);}
.cm-reading-guidance > div {display:grid;grid-template-columns:64px 1fr;gap:9px;}
.cm-reading-guidance dt {color:var(--sol);}
.cm-reading-guidance dd {margin:0;color:#ded7ca;}
.cm-reading-status {font:12px/1.5 var(--f-body);color:var(--mid);}
.cm-reading-status[data-tone=good] {color:var(--good);}
.cm-reading-status[data-tone=bad] {color:#e4a79b;}
.cm-reading-why {font:12px/1.65 var(--f-body);color:#c8c4bb;max-width:510px;}
.cm-reading-why summary {min-height:28px;color:#dbd0bc;cursor:pointer;}
.cm-reading-why p {margin:7px 0;}
.cm-reading-why[open] {position:absolute;left:0;right:0;bottom:0;z-index:6;max-height:min(360px,60vh);overflow:auto;padding:14px;background:rgba(8,11,19,.97);border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 32px rgba(0,0,0,.35);}
.cm-reading-reference {color:var(--sol);font-size:12px;}
.cm-reading-source {font-size:11px;color:#aaa79f;}
.cm-elements-toggle {display:none;}
.cm-reading-active .cm-flow {bottom:190px;}
@media(max-width:640px) {
 .cm-reading-active .hud {padding-left:14px;padding-right:14px;gap:8px;}
 .cm-reading-active .top {flex-wrap:nowrap;}
 .cm-reading-active .chart {display:none;}
 .cm-reading-active .date {font-size:28px;}
 .cm-reading-active .readout {font-size:12px;}
 .cm-reading-active .readout > :nth-child(-n+6) {display:none;}
 .cm-reading-active .caption,.cm-reading-active.cm-original-explaining .caption {max-width:100%;width:100%;padding:0;text-align:left;justify-self:stretch;gap:7px;}
 .cm-reading-active .caption .cap-title {font-size:25px;line-height:1.35;}
 .cm-reading {gap:8px;padding:8px 10px 3px;background:linear-gradient(transparent,rgba(4,7,13,.88) 18%);border-radius:4px;}
 .cm-reading-meaning {font-size:15px;line-height:1.65;}
 .cm-reading-guidance {font-size:14px;gap:7px;}
 .cm-reading-guidance > div {grid-template-columns:60px 1fr;gap:7px;}
 .cm-reading-why {font-size:12px;}
 .cm-reading-why summary {min-height:44px;}
 .cm-elements-toggle {display:inline-flex;align-items:center;justify-content:center;justify-self:start;min-height:40px;padding:0 10px;color:var(--sol);border:1px solid var(--line);border-radius:4px;background:rgba(8,11,19,.8);font:13px var(--f-body);}
 .cm-reading-active .cm-flow {visibility:hidden;bottom:230px;}
 .cm-reading-active.cm-show-elements .cm-flow {visibility:visible;}
 .cm-show-elements .cm-reading-meaning,.cm-show-elements .cm-reading-guidance,.cm-show-elements .cm-reading-why {display:none;}
 .cm-show-elements .cm-reading {background:none;padding:0;}
 .cm-reading-active .cm-credit {bottom:65px;right:14px;}
 .cm-reading-active .dock {gap:6px;}
 .cm-reading-active .dock .btn {height:40px;min-width:40px;}
}
@media(max-width:360px) {
 .cm-reading-active .caption .cap-title {font-size:23px;}
 .cm-reading-guidance > div {grid-template-columns:56px 1fr;gap:6px;}
}


.cm-reading-controls {display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:auto;}
.cm-reading-controls[hidden] {display:none;}
.cm-skip-decade {margin-left:auto;min-height:44px;font-size:13px;color:var(--sol);white-space:nowrap;}
@media(max-width:640px) {
 .cm-reading-controls {gap:6px;}
 .cm-reading-controls .cm-elements-toggle {min-height:44px;font-size:12px;padding:0 7px;}
 .cm-skip-decade {padding:0 8px;font-size:12px;}
 .cm-reading-active .caption .cap-eyebrow {font-size:12px;line-height:1.5;}
}

*{box-sizing:border-box}html,body,#cm-original{margin:0;width:100%;height:100%;overflow:hidden}
#cm-original{height:100%!important;background:#04060b}
#cm-original.idle .hud,#cm-original.idle .cm-flow,#cm-original.idle .cm-birth-city{visibility:hidden}
.top{pointer-events:none}.chart,.readout{display:none}.clock .brand{font:11px var(--f-body);letter-spacing:.13em}
.date{font-size:clamp(22px,3vw,34px)}.dock{grid-template-columns:auto 1fr auto auto;min-height:60px;margin-top:14px}
.dock .btn{min-width:44px;height:44px}.cm-reading-controls button{min-height:44px}
.caption:not(.on){visibility:hidden}.caption.on{visibility:visible}
.cm-reading-why[open]{max-height:260px;overscroll-behavior:contain}
.cm-reading-meaning{font-size:15px}.cm-reading-guidance{font-size:14px}
.cm-reading-active .caption{max-width:48%;margin-bottom:10px}
.hud{padding:24px 26px 18px;gap:6px;grid-template-rows:auto 1fr auto auto}
.cm-flow{bottom:220px}.cm-credit{display:none}
@media(max-width:640px){
 .hud,.cm-reading-active .hud{padding:14px 14px 12px;gap:6px}
 .clock .brand{font-size:10px}.date,.cm-reading-active .date{font-size:22px}
 .caption,.cm-reading-active .caption{max-width:100%;margin:0;padding:0 2px}
 .cm-reading-active .caption .cap-title{font-size:23px;line-height:1.3}
 .cm-reading{background:linear-gradient(transparent,rgba(4,7,13,.96) 14%);gap:6px;padding:10px 0 2px}
 .cm-reading-meaning{line-height:1.5}.cm-reading-guidance{line-height:1.45}
 .cm-reading-why summary{min-height:38px}.cm-reading-source{font-size:11px}
 .cm-reading-status{font-size:12px}.cm-reading-controls{flex-wrap:wrap}
 .cm-reading-controls .cm-elements-toggle,.cm-skip-decade{font-size:12px;padding:0 8px}
 .dock{margin-top:12px;padding:6px;gap:8px}
 .cm-reading-active .cm-flow{bottom:210px;height:250px}
 .cap-title{font-size:26px}.cap-eyebrow{letter-spacing:.08em}.cap-sub{font-size:13px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#cm-original.idle .hud{display:none!important}#cm-original.idle .cm-birth-city,#cm-original.idle .cm-flow{display:none!important}
@media(max-width:640px){
 .cm-reading{max-height:260px;overflow-y:auto;overscroll-behavior:contain}
 .top{max-width:calc(100% - 110px)}
 .cm-reading-active .caption .cap-title{word-break:keep-all;font-size:22px}
 .cm-reading-controls{flex-wrap:nowrap}
}

/* The chart, its native-language labels and its explanation each own a row.
   The mobile visual slot participates in the HUD grid instead of covering it. */
.cm-visual-slot{min-height:0}
.cm-flow,.cm-reading-active .cm-flow{
 display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:5px;
 height:350px;bottom:155px;padding:8px 10px;
 background:linear-gradient(140deg,rgba(4,7,13,.84),rgba(4,7,13,.58));border-radius:8px;
}
.cm-flow svg{width:100%;height:100%;min-height:0;overflow:hidden}
.cm-flow .flow-source,.cm-flow .event-step{
 position:static;inset:auto;max-width:100%;margin:0;text-align:center;
 font:11px/1.45 var(--f-body);letter-spacing:0;overflow-wrap:anywhere;
}
.cm-flow .flow-source{color:var(--sol)}
.cm-flow .event-step{min-height:32px;display:flex;align-items:center;justify-content:center}
.cm-flow-factors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.cm-flow-factors:empty{display:none}
.cm-flow-factor{min-width:0;display:grid;align-content:start;gap:3px;padding:5px 4px;border:1px solid var(--line);border-radius:4px;background:#080d17b3;text-align:center;overflow-wrap:anywhere}
.cm-factor-name{font:10px/1.4 var(--f-body);color:#bfc4cc}
.cm-factor-detail{font:11px/1.4 var(--f-body);color:#dfd9cc}
.cm-flow-factor[data-sign=positive]{border-color:#92d6bc55}
.cm-flow-factor[data-sign=negative]{border-color:#e8897d55}
.cm-flow-result{min-height:18px;text-align:center;font:12px/1.5 var(--f-body);overflow-wrap:anywhere}
@media(max-width:640px){
 .cm-reading-active.cm-show-elements .cm-visual-slot{position:relative;display:flex;overflow:hidden}
 .cm-reading-active.cm-show-elements .cm-flow{
  position:relative;inset:auto;flex:1;width:100%;height:100%;min-height:0;margin:0;padding:7px;
 }
 .cm-show-elements .caption .cap-title,.cm-show-elements .cm-reading{display:none}
 .cm-show-elements .caption{gap:6px}
 .cm-show-elements .cm-flow .flow-source{font-size:10px}
 .cm-show-elements .cm-flow .event-step{font-size:11px;min-height:32px}
 .cm-reading-controls .cm-elements-toggle{min-width:0;flex:1;white-space:normal;line-height:1.35;text-align:center}
}

/* Mobile reads like a film subtitle, with one edge-to-edge scrim instead of a card. */
@font-face{font-family:"Pretendard Variable";src:url("/fonts/animus/PretendardVariable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@media(max-width:640px){
 :root{--f-body:"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
 :root:lang(ja){--f-body:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans CJK JP","Pretendard Variable",sans-serif}
 :root:lang(zh){--f-body:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Pretendard Variable",sans-serif}
 :root:lang(zh-Hans){--f-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Pretendard Variable",sans-serif}
 #cm-original.cm-reading-active:not(.cm-show-elements)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,7,13,.88),rgba(4,7,13,.72) 35%,rgba(4,7,13,.3) 68%,transparent 92%);
 }
 .hud{z-index:2}
 .hud,.cm-reading-active .hud{padding:18px 20px 14px;gap:10px}
 .top{max-width:100%}
 .clock .brand{font-size:9px;letter-spacing:.06em;color:#b6a58a}
 .date,.cm-reading-active .date{font-size:20px}
 .cm-reading-active .caption,.cm-reading-active.cm-original-explaining .caption{gap:12px;padding:0}
 .cm-reading-active .caption .cap-eyebrow{font:400 10px/1.6 var(--f-body);letter-spacing:.05em;color:#c7ad7d}
 .cm-reading-active .caption .cap-title{
  font:400 clamp(20px,5.5vw,23px)/1.45 var(--f-body);letter-spacing:-.025em;
  text-wrap:pretty;word-break:normal;overflow-wrap:anywhere;color:#eee9df;
 }
 .cm-reading{background:none;border:0;border-radius:0;padding:0;gap:12px;max-height:280px;scrollbar-width:thin;scrollbar-color:#ffffff1f transparent;text-shadow:0 1px 10px #0008}
 .cm-reading-status{font:400 11px/1.6 var(--f-body);letter-spacing:.02em}
 .cm-reading-meaning{font:400 14px/1.8 var(--f-body);color:#e2dfd8}
 .cm-reading-guidance{font:400 13px/1.75 var(--f-body);gap:12px}
 .cm-reading-guidance>div{grid-template-columns:minmax(0,1fr);gap:3px}
 .cm-reading-guidance dt{font:400 10px/1.6 var(--f-body);letter-spacing:.04em;color:#bfa87b}
 .cm-reading-guidance dd{color:#c6c8cd}
 .cm-reading-why{font:400 11px/1.75 var(--f-body)}
 .cm-reading-why summary{display:flex;align-items:center;min-height:44px;color:#a9aeb7;gap:6px}
 .cm-reading-why summary::before{content:"+";font-size:16px;font-weight:300}
 .cm-reading-why[open] summary::before{content:"−"}
 .cm-reading-why summary::-webkit-details-marker{display:none}
 .cm-reading-why[open]{background:rgba(10,17,28,.92);border-color:#ffffff14;border-radius:12px;padding:12px 16px}
 .cm-reading-controls{gap:10px;padding-top:4px}
 .cm-reading-controls .cm-elements-toggle,.cm-skip-decade{font:400 11px/1.5 var(--f-body);background:transparent;border:1px solid #ffffff1a;border-radius:999px;color:#c6b28b;min-height:44px;padding:6px 12px}
 .dock{background:rgba(11,20,31,.28);border-color:#ffffff14;border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-top:6px;padding:7px;gap:8px}
 .dock .btn{border-color:#ffffff12;border-radius:50%;width:44px;min-width:44px;height:44px;padding:0}
 .cm-reading-active.cm-show-elements .cm-flow{background:linear-gradient(140deg,rgba(8,16,27,.58),rgba(8,16,27,.26));border-radius:14px}
}

/* Short viewports reserve the dock and skip controls; only the prose scrolls. */
@media(max-width:640px) and (max-height:640px){
 .cm-reading-active:not(.cm-show-elements) .hud{grid-template-rows:auto minmax(0,1fr) auto}
 .cm-reading-active:not(.cm-show-elements) .cm-visual-slot{display:none}
 .cm-reading-active:not(.cm-show-elements) .caption{min-height:0;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
 .cm-reading-active:not(.cm-show-elements) .caption>:not(.cm-reading){flex-shrink:0}
 .cm-reading-active:not(.cm-show-elements) .cm-reading{min-height:0;max-height:none;flex:0 1 auto}
 .cm-reading-active .cap-sub:empty{display:none}
}