:root{--graphite-surface:linear-gradient(155deg, #373737 0%, #202020 46%, #131313 100%);color:#111;font-synthesis:none;text-rendering:optimizelegibility;background:#fdfdfd;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#fdfdfd;min-width:320px;min-height:100vh;margin:0}button,[role=slider]{font:inherit}button{cursor:pointer}.app-shell{min-height:100dvh;padding:18px;position:relative}.topbar{z-index:2;align-items:center;gap:12px;display:flex;position:absolute;top:18px;right:18px}.sound-button{appearance:none;color:#727270;background:0 0;border:0;min-height:34px;padding:4px;font-size:12px;transition:color .16s}.sound-button:hover{color:#24231f}.sound-button:focus-visible{outline-offset:2px;outline:2px solid #777}.mode-switch{--segment-width:58px;isolation:isolate;grid-template-columns:repeat(2, var(--segment-width));background:#f0f0ef;border:1px solid #dededc;border-radius:999px;align-items:center;gap:2px;min-height:34px;padding:2px;display:inline-grid;position:relative;box-shadow:inset 0 1px 2px #0000000a,0 1px #fff}.mode-thumb{z-index:0;pointer-events:none;width:var(--segment-width);background:var(--graphite-surface);border-radius:999px;height:calc(100% - 4px);transition:transform .18s cubic-bezier(.2,0,0,1),box-shadow .18s;position:absolute;top:2px;left:2px;overflow:hidden;box-shadow:inset 0 0 0 1px #0000004d,0 1px 2px #00000024}.mode-switch[data-mode=color] .mode-thumb{transform:translateX(calc(var(--segment-width) + 2px))}.mode-thumb:before{content:"";pointer-events:none;filter:blur(6px);opacity:.7;background:radial-gradient(at 20% 10%,#ffffff3d,#0000 65%),radial-gradient(at 90% 90%,#ffffff17,#0000 60%);transition:transform .6s cubic-bezier(.2,0,0,1),opacity .2s;position:absolute;inset:-8px;transform:translate(-4px)}.mode-thumb:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:1px;box-shadow:inset 0 1px #ffffff38,inset 0 -1px #0000004d}@media (hover:hover){.mode-switch:hover .mode-thumb:before{opacity:1;transform:translate(5px)}}.mode-switch:focus-within .mode-thumb:before{opacity:1}.mode-switch:has(.mode-button:active) .mode-thumb{box-shadow:inset 0 1px 3px #0006,0 0 #0000}.mode-button{z-index:1;appearance:none;color:#71716f;min-height:28px;min-width:var(--segment-width);background:0 0;border:0;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:500;transition:color .16s,transform .1s;position:relative}.mode-button:hover{color:#24231f}.mode-button--active{box-shadow:none;color:#fff;text-shadow:0 1px 1px #0000003d;background:0 0}.mode-button--active:hover{color:#fff}.mode-button:active{transform:scale(.96)}.mode-button:focus-visible{outline-offset:4px;outline:2px solid #666}.main-content{flex-direction:column;width:100%;max-width:1180px;min-height:calc(100dvh - 36px);margin:0 auto;display:flex}.portrait-panel{flex-direction:column;align-items:center;padding:27vh 0 clamp(12px,1.7vh,20px);display:flex}.portrait-frame{aspect-ratio:1;width:min(26vw,315px);max-width:315px;position:relative}.portrait-loading{color:#727270;place-items:center;font-size:12px;display:grid;position:absolute;inset:0}.asset-status-slot{text-align:center;max-width:90vw;min-height:20px}.retry-button{color:inherit;text-underline-offset:3px;background:0 0;border:0;padding:4px 8px;text-decoration:underline}.face-canvas{filter:grayscale(0);object-fit:contain;width:100%;height:100%;transition:filter .18s ease-out;display:block}.face-canvas[data-mode=mono]{filter:grayscale()}.portrait-unavailable{color:#888;letter-spacing:.08em;text-align:center;text-transform:uppercase;border:1px dashed #cfcfcf;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:11px;display:flex}.year-readout{font-variant-numeric:tabular-nums;background:var(--graphite-surface);text-shadow:0 1px 1px #0000003d;color:#fff;border-radius:999px;margin-top:clamp(24px,5vh,46px);padding:10px 16px;font-size:14px;font-weight:500;line-height:1;box-shadow:inset 0 1px #fff3,inset 0 0 0 1px #00000038,0 1px 2px #0000001f}.asset-status{color:#996648;text-align:center;margin:14px 0 0;font-size:12px}.work-caption{color:#727270;text-align:center;max-width:90vw;min-height:3.2em;margin:12px 0 26px;font-size:12px;line-height:1.6}.controls-panel{width:100%;max-width:940px;margin:0 auto;padding:0 clamp(0px,2vw,24px);position:relative}.hint{color:#888;letter-spacing:.02em;opacity:1;justify-content:center;align-items:center;gap:8px;width:100%;min-height:24px;font-size:12px;transition:opacity .26s,transform .26s,visibility 0s linear .26s;display:flex;position:absolute;top:-26px;transform:translateY(0)}.hint--hidden{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-5px)}.hint-dot{background:#aaa;border-radius:50%;width:5px;height:5px;display:inline-block}.ruler-block{width:100%;max-width:min(62vw,760px);margin:0 auto}.ruler-viewport{cursor:grab;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;outline:none;max-width:100%;height:106px;margin:0 auto;position:relative;overflow:hidden}.ruler-viewport[data-dragging=true]{cursor:grabbing}.ruler-viewport[data-dragging=true] .ruler-center{transform:translate(-50%)scaleY(1.08)}@media (hover:hover){.ruler-viewport:hover .ruler-tick{background-color:#999}.ruler-viewport:hover .ruler-tick--work{background-color:#555}}.ruler-tick{background:#c7c7c7;border-radius:1px;width:2px;max-height:calc(100% - 10px);transition:background-color .12s;display:block;position:absolute;bottom:5px;transform:translate(-50%);box-shadow:1px 0 #ffffffd9}.ruler-tick--work{background-color:#888;background-image:linear-gradient(90deg,#fff3,#0000)}.ruler-center{transform-origin:bottom;background:linear-gradient(90deg,#484848,#191919 55%,#303030);border-radius:2px;width:4px;height:80px;transition:transform .1s;position:absolute;bottom:5px;left:50%;transform:translate(-50%);box-shadow:inset 1px 0 #ffffff26,1px 0 1px #00000014}.footer-note{color:#aaa;letter-spacing:.06em;text-align:center;text-transform:uppercase;width:100%;margin-top:auto;padding-top:32px;font-size:10px;line-height:1.6;display:block}.sr-only{clip:rect(0, 0, 0, 0);width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=640px){.app-shell{padding:16px}.main-content{min-height:calc(100dvh - 32px)}.portrait-panel{padding-top:22vh}.portrait-frame{width:min(68vw,300px);max-width:300px}.year-readout{margin-top:3vh}.ruler-block{max-width:100%}.ruler-viewport{height:92px}.topbar{top:14px;right:14px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}