:root{--bg:#0c0a08;--ink:#e7ddcb;--ink-70:#e7ddcbb3;--ink-45:#e7ddcb73;--ink-25:#e7ddcb40;--ink-12:#e7ddcb1f;--halo:#0c0a08cc;--serif:"Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;--sans:"Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--ease:cubic-bezier(.32, 0, .12, 1);--fade:.9s}:root[data-theme=light]{--bg:#dcd5c8;--ink:#2b251e;--ink-70:#2b251ebd;--ink-45:#2b251e85;--ink-25:#2b251e4d;--ink-12:#2b251e24;--halo:#dcd5c8d9}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;transition:background-color var(--fade) var(--ease), color var(--fade) var(--ease);margin:0;overflow:hidden}.ui,.ui *,.hover-label,.field-label,.loading{transition-property:color,background-color,border-color,opacity,transform;transition-duration:var(--fade), var(--fade), var(--fade), .7s, .7s;transition-timing-function:var(--ease)}body{font-family:var(--sans);font-size:11px}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}a{color:inherit;text-decoration:none}.app{position:fixed;inset:0}.app canvas{touch-action:none;display:block}.ui{pointer-events:none;grid-template:"head head modes"". . ."1fr"meta action panel"/1fr auto 1fr;gap:12px;padding:clamp(18px,3vw,40px) clamp(18px,3vw,44px);display:grid;position:fixed;inset:0}.ui>*{pointer-events:none}.ui button,.ui a{pointer-events:auto}.caps{font-family:var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-45);font-size:10px;font-weight:500;line-height:1.6}.head{grid-area:head;align-self:start}.head .caps{margin-bottom:8px}.head h1{font-family:var(--serif);letter-spacing:-.005em;color:var(--ink);margin:0 0 10px;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1}.head h1 em{color:var(--ink-70);font-style:italic}.head .sub{color:var(--ink-45)}.head .sub b{color:var(--ink-70);font-weight:500}.topright{text-align:right;grid-area:modes;place-self:start end}.theme{justify-content:flex-end;align-items:center;gap:12px;margin-bottom:18px;display:flex}.theme button{font-family:var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-45);padding:8px 0;font-size:10px;font-weight:500}.theme button:hover{color:var(--ink-70)}.theme button.active{color:var(--ink)}.theme .sep{background:var(--ink-25);width:1px;height:10px}.modes{opacity:0;transition:opacity .7s var(--ease), transform .7s var(--ease);transform:translateY(-6px)}.modes.on{opacity:1;transform:none}.modes .caps{margin-bottom:6px}.modes button{font-family:var(--serif);color:var(--ink-45);transition:color .4s var(--ease);margin-left:auto;padding:2px 0;font-size:18px;line-height:1.5;display:block;position:relative}.modes button:hover{color:var(--ink-70)}.modes button.active{color:var(--ink)}.modes button.active:before{content:"";background:var(--ink-70);width:6px;height:1px;position:absolute;top:50%;left:-16px}.action{text-align:center;flex-direction:column;grid-area:action;place-self:end center;align-items:center;gap:10px;display:flex}.action .primary{font-family:var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink);transition:opacity .5s var(--ease), letter-spacing .6s var(--ease);padding:14px 6px 12px;font-size:11px;font-weight:500;position:relative}.action .primary:after{content:"";background:var(--ink);transform-origin:0;opacity:.5;height:1px;transition:transform .7s var(--ease), opacity .5s var(--ease);position:absolute;bottom:8px;left:6px;right:6px;transform:scaleX(.28)}.action .primary:hover:after{opacity:.9;transform:scaleX(1)}.action .primary:disabled{opacity:.25;pointer-events:none}.action .secondary{font-family:var(--serif);color:var(--ink-45);transition:color .4s var(--ease);font-size:15px;font-style:italic}.action .secondary:hover{color:var(--ink)}.action .hint{color:var(--ink-25);transition:opacity 1s var(--ease)}.panel{text-align:right;opacity:0;max-width:34ch;transition:opacity .7s var(--ease), transform .7s var(--ease);grid-area:panel;place-self:end;transform:translateY(8px)}.panel.on{opacity:1;transform:none}.panel .index{margin-bottom:8px}.panel h2{font-family:var(--serif);letter-spacing:-.005em;margin:0 0 10px;font-size:clamp(28px,3vw,40px);font-weight:400;line-height:1.02}.panel .group{color:var(--ink-45)}.panel .group span+span:before{content:"  ·  "}.panel .return{font-family:var(--serif);color:var(--ink-45);transition:color .4s var(--ease);margin-top:14px;font-size:15px;font-style:italic}.panel .return:hover{color:var(--ink)}.meta{text-align:left;color:var(--ink-25);letter-spacing:.04em;grid-area:meta;place-self:end start;font-size:9.5px;line-height:1.7}.meta a{border-bottom:1px solid var(--ink-12);transition:color .4s var(--ease)}.meta a:hover{color:var(--ink-70)}.hover-label{pointer-events:none;font-family:var(--serif);color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .25s var(--ease);will-change:transform;text-shadow:0 1px 12px var(--halo);font-size:16px;font-style:italic;position:fixed;top:0;left:0}.hover-label.on{opacity:.92}.hover-label:before{content:"";background:var(--ink-45);vertical-align:middle;width:14px;height:1px;margin-right:10px;display:inline-block}.field-label{font-family:var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-45);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity 1.2s var(--ease);font-size:10px;font-weight:500}.field-label.on{opacity:1}.field-label.center{transform:translate(-50%)}.loading{background:var(--bg);transition:opacity 1.4s var(--ease);z-index:5;place-items:center;display:grid;position:fixed;inset:0}.loading.off{opacity:0;pointer-events:none}.loading .inner{text-align:center}.loading .inner .caps{margin-bottom:14px}.loading .bar{background:var(--ink-12);width:120px;height:1px;margin:0 auto;position:relative;overflow:hidden}.loading .bar i{background:var(--ink-70);transition:width .4s var(--ease);position:absolute;top:0;bottom:0;left:0}@media (max-width:760px){.ui{grid-template-columns:1fr 1fr;grid-template-areas:"head modes"". .""panel panel""action action""meta meta";padding:18px 16px 16px}.head h1{font-size:24px}.theme{gap:10px;margin-bottom:12px}.modes button{font-size:16px}.action{text-align:left;justify-self:start;align-items:flex-start}.panel{text-align:left;justify-self:start;max-width:none;margin-bottom:14px}.panel h2{font-size:26px}.meta{max-width:46vw;margin-top:14px;font-size:9px}.meta .meta-more,.hover-label{display:none}}
