:root{color:#20221f;font-synthesis:none;text-rendering:optimizelegibility;background:#d9ddd7;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{min-width:320px;min-height:100%;margin:0}body{min-height:100svh}button,input{font:inherit}.experience{--strength:0;--page-bg:#d9ddd7;--ink:#20221f;--muted:#6f756d;--accent:#798b8b;--gold:#a78b55;isolation:isolate;min-height:100svh;color:var(--ink);background:radial-gradient(circle at 50% 42%, #ffffff6b, transparent 54%), var(--page-bg);padding:clamp(16px,3vh,28px) clamp(18px,2.5vw,36px) 20px;transition:background .42s,color .36s;position:relative;overflow:hidden}.experience:before{z-index:0;content:"";opacity:calc(var(--strength) * .24);background:radial-gradient(circle at 50% 45%,#342822,#111 72%);transition:opacity .18s linear;position:fixed;inset:0}.experience>:not(.tech-overlay){z-index:2;position:relative}.tech-overlay{z-index:1;pointer-events:none;color:var(--ink);opacity:calc(.36 + var(--strength) * .12);position:absolute;inset:0;overflow:hidden}.tech-grid{background-image:linear-gradient(to right, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px), linear-gradient(to right, color-mix(in srgb, var(--accent) 13%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--accent) 13%, transparent) 1px, transparent 1px);opacity:.24;background-size:32px 32px,32px 32px,160px 160px,160px 160px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000 0%,#000 14% 86%,#0000 100%);mask-image:linear-gradient(#0000 0%,#000 14% 86%,#0000 100%)}.tech-scanlines{background:repeating-linear-gradient(to bottom, transparent 0 7px, color-mix(in srgb, var(--ink) 7%, transparent) 7px 8px);opacity:.07;position:absolute;inset:0}.tech-frame{border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);opacity:.44;width:min(860px,100% - 64px);height:min(570px,100% - 220px);position:absolute;top:clamp(118px,15vh,160px);left:50%;transform:translate(-50%)}.tech-frame:before,.tech-frame:after{content:"";background:color-mix(in srgb, var(--accent) 28%, transparent);position:absolute}.tech-frame:before{height:1px;top:50%;left:-22px;right:-22px;transform:translateY(-50%)}.tech-frame:after{width:1px;top:-22px;bottom:-22px;left:50%;transform:translate(-50%)}.tech-axis{border-left:1px dashed color-mix(in srgb, var(--ink) 18%, transparent);opacity:.35;width:1px;position:absolute;top:18%;bottom:14%}.tech-axis:before,.tech-axis:after{border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);content:"";width:7px;height:7px;position:absolute;left:-4px}.tech-axis:before{top:0}.tech-axis:after{bottom:0}.tech-axis--left{left:clamp(24px,9vw,140px)}.tech-axis--right{right:clamp(24px,9vw,140px)}.masthead{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:16px;width:100%;margin:0;display:grid}.masthead-title{grid-column:1;min-width:0}.eyebrow,#stage-label,.stage-intensity-label,.drag-hint,.submit-status{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin:0;font:10px/1.4 ui-monospace,SFMono-Regular,monospace}h1{letter-spacing:.01em;margin:4px 0 0;font:800 clamp(40px,5vw,72px)/.9 Georgia,serif}.daily-suffix{color:var(--muted);letter-spacing:.1em;opacity:.72;vertical-align:.2em;white-space:nowrap;margin-left:.28em;font:600 22px/1 ui-monospace,SFMono-Regular,monospace;display:inline-block}.portrait-zone{flex-direction:column;justify-content:center;align-items:center;min-height:0;padding-top:clamp(10px,2vh,20px);display:flex}.portrait-shell{aspect-ratio:9/16;width:min(360px,27svh,48vw);filter:drop-shadow(0 calc(14px + var(--strength) * 22px) calc(22px + var(--strength) * 26px) #00000038);position:relative}.portrait-canvas,.poster{object-fit:cover;border-radius:8px;width:100%;height:100%;display:block;position:absolute;inset:0}.poster{z-index:1}.portrait-canvas{z-index:2}.evolution-video{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.halo{z-index:0;border:1px solid color-mix(in srgb, var(--gold) 62%, transparent);background:radial-gradient(circle, transparent 54%, color-mix(in srgb, var(--gold) 23%, transparent) 55%, transparent 57%);opacity:calc(var(--strength) * .85);transform:rotate(calc(var(--strength) * 22deg)) scale(calc(.92 + var(--strength) * .08));border-radius:50%;transition:opacity .45s,transform .6s;position:absolute;inset:-8%}.stage-readout{grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);grid-template-areas:"state-label state-name intensity";align-items:end;column-gap:12px;width:min(680px,100%);margin-top:14px;display:grid}#stage-label{grid-area:state-label;justify-self:start}.stage-name{text-align:center;white-space:nowrap;min-width:0;text-shadow:0 0 calc(var(--strength) * 20px) color-mix(in srgb, var(--gold) 50%, transparent);grid-area:state-name;margin:0;font:800 clamp(30px,3.2vw,42px)/.92 Georgia,serif;overflow:visible}.experience[data-stage="3"] .stage-name{font-size:clamp(24px,2.5vw,34px)}.experience[data-stage="4"] .stage-name{font-size:clamp(22px,2.1vw,28px)}.stage-intensity{text-align:right;white-space:nowrap;grid-area:intensity;justify-self:end;align-items:baseline;gap:8px;min-width:max-content;display:inline-flex}.stage-intensity-divider{color:var(--muted);font:10px/1 ui-monospace,SFMono-Regular,monospace}.intensity-score{color:var(--ink);font-variant-numeric:tabular-nums;font:700 20px/1 ui-monospace,SFMono-Regular,monospace;display:block}.control-panel{width:min(760px,100% - 36px);margin:8px auto 0}.control-caption{justify-content:space-between;align-items:center;width:min(680px,100%);margin:0 auto 4px;display:flex}.drag-hint,.range-precision{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin:0;font:10px/1.4 ui-monospace,SFMono-Regular,monospace}.range-precision{letter-spacing:.1em;opacity:.72}.range-wrap{width:min(680px,100%);height:58px;margin:0 auto;position:relative}.strength-slider{z-index:2;cursor:ew-resize;appearance:none;background:0 0;width:100%;height:48px;margin:0;position:relative}.strength-slider::-webkit-slider-runnable-track{background:color-mix(in srgb, currentColor 28%, transparent);height:2px}.strength-slider::-webkit-slider-thumb{appearance:none;background:radial-gradient(circle, var(--accent) 0 4px, transparent 4.5px), var(--page-bg);border:2px solid;border-radius:50%;width:28px;height:28px;margin-top:-13px;box-shadow:0 4px 18px #00000038}.strength-slider::-moz-range-track{background:color-mix(in srgb, currentColor 28%, transparent);height:2px}.strength-slider::-moz-range-thumb{background:var(--accent);border:2px solid;border-radius:50%;width:24px;height:24px}.strength-slider:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.range-ticks{z-index:1;pointer-events:none;justify-content:space-between;align-items:flex-start;height:17px;display:flex;position:absolute;top:22px;left:14px;right:14px}.range-ticks span{opacity:.34;background:currentColor;width:1px;height:7px;display:block}.range-ticks span.major{opacity:.62;height:16px}.range-scale{color:var(--muted);letter-spacing:.08em;justify-content:space-between;font:9px/1 ui-monospace,SFMono-Regular,monospace;display:flex;position:absolute;bottom:0;left:10px;right:10px}.stage-markers{justify-content:space-between;width:min(680px,100%);margin:0 auto;padding:0;list-style:none;display:flex}.stage-markers button{width:70px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;gap:4px;margin:0;padding:5px 0;font:700 14px/1 ui-monospace,monospace;display:grid}.stage-markers span{letter-spacing:.08em;white-space:nowrap;font-size:8px;font-weight:500}.stage-markers button:hover,.stage-markers button:focus-visible{color:var(--ink)}.stage-markers button[aria-pressed=true]{border-color:color-mix(in srgb, var(--gold) 65%, transparent);color:var(--ink);background:color-mix(in srgb, var(--gold) 10%, transparent)}.submit-button{border:1px solid color-mix(in srgb, currentColor 40%, transparent);min-width:168px;color:var(--ink);cursor:pointer;letter-spacing:.12em;background:0 0;margin:16px auto 0;padding:11px 18px;font:700 11px/1 ui-monospace,monospace;display:block}.submit-button:hover,.submit-button:focus-visible{border-color:var(--accent);color:var(--accent)}.submit-button:disabled{cursor:wait;opacity:.55}.submit-status{text-align:center;min-height:18px;margin-top:9px}.submit-status:empty{min-height:0;margin-top:0}@media (width<=640px){.experience{padding:18px 12px 20px}.masthead{grid-template-columns:minmax(0,1fr);align-items:flex-start;gap:8px}h1{font-size:clamp(30px,8vw,50px)}.daily-suffix{letter-spacing:.08em;font-size:20px}.portrait-shell{width:min(300px,78vw,31svh)}.tech-frame{width:calc(100% - 36px);height:min(492px,100% - 190px);top:106px}.tech-axis--left{left:18px}.tech-axis--right{right:18px}.control-panel,.control-caption,.range-wrap,.stage-markers{width:100%}.range-scale{font-size:8px;left:7px;right:7px}.stage-readout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"state-name state-name""state-label intensity";gap:4px 8px;width:100%}#stage-label{justify-self:start}.stage-intensity{gap:6px}.stage-intensity-label{letter-spacing:.08em;font-size:8px}.stage-intensity-divider{font-size:8px}.intensity-score{font-size:17px}.stage-name{justify-self:center;font-size:clamp(28px,8.6vw,38px)}.experience[data-stage="3"] .stage-name{font-size:clamp(24px,6.6vw,28px)}.experience[data-stage="4"] .stage-name{font-size:clamp(22px,6.2vw,24px)}.stage-markers button{width:54px;font-size:13px}.stage-markers span{font-size:7px}.submit-button{min-width:154px;margin-top:10px}}@media (width<=360px){h1{white-space:nowrap;font-size:28px}.portrait-shell{width:min(300px,78vw,29svh)}.stage-readout{column-gap:4px}#stage-label{letter-spacing:.11em;font-size:8px}.stage-intensity{gap:4px}.stage-intensity-label{letter-spacing:.05em;font-size:7px}.stage-intensity-divider{font-size:7px}.intensity-score{font-size:16px}.daily-suffix{letter-spacing:.05em}}