: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)}.experience>.rating-rules{z-index:3;width:min(220px,100vw - 48px);color:var(--muted);letter-spacing:.11em;text-align:right;gap:5px;font:9px/1.35 ui-monospace,SFMono-Regular,monospace;display:grid;position:absolute;top:clamp(24px,3vh,36px);right:clamp(24px,2.5vw,36px)}.rating-rules-title{color:var(--ink);letter-spacing:.16em;font-weight:700}.rating-rules p{opacity:.72;margin:0}.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}.global-stats{grid-template-columns:minmax(0,1fr);gap:12px;width:min(170px,100vw - 48px);margin:0;display:grid;position:absolute;top:clamp(92px,13vh,142px);left:clamp(24px,2.5vw,36px)}.global-stat{border-top:1px solid color-mix(in srgb, var(--ink) 28%, transparent);gap:7px;padding-top:9px;display:grid}.global-stat-label{color:var(--muted);letter-spacing:.13em;font:10px/1.3 ui-monospace,SFMono-Regular,monospace}.global-stat-value{color:var(--ink);font-variant-numeric:tabular-nums;font:700 clamp(28px,3vw,40px)/1 Georgia,serif}.global-stat--count{border-top-color:color-mix(in srgb, var(--ink) 16%, transparent);gap:4px}.global-stat--count .global-stat-label{opacity:.72}.global-stat--count .global-stat-value{color:var(--muted);opacity:.72;font:600 22px/1 ui-monospace,SFMono-Regular,monospace}.global-stats-updated{color:var(--muted);letter-spacing:.1em;grid-column:1/-1;font:9px/1.3 ui-monospace,SFMono-Regular,monospace}.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 var(--ink);min-width:208px;min-height:48px;color:var(--page-bg);background:var(--ink);box-shadow:0 3px 0 color-mix(in srgb, var(--gold) 76%, transparent);cursor:pointer;touch-action:manipulation;letter-spacing:.16em;margin:16px auto 0;padding:15px 24px;font:800 11px/1 ui-monospace,monospace;transition:color .18s,background .18s,border-color .18s,box-shadow .18s,transform .12s;display:block}.submit-button:hover,.submit-button:focus-visible{border-color:var(--gold);color:var(--ink);background:var(--page-bg);box-shadow:0 3px 0 var(--gold)}.submit-button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.submit-button:active{box-shadow:0 1px 0 var(--gold);transform:translateY(2px)}.submit-button:disabled{border-color:color-mix(in srgb, var(--ink) 48%, transparent);color:var(--page-bg);background:color-mix(in srgb, var(--ink) 48%, transparent);box-shadow:none;cursor:wait;opacity:.72}.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}.experience>.rating-rules{display:none}.masthead{grid-template-columns:minmax(0,1fr);align-items:flex-start;gap:8px}h1{padding-right:0;font-size:clamp(30px,8vw,50px)}.daily-suffix{letter-spacing:.08em;font-size:20px}.global-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(330px,100%);margin-top:24px;position:static}.global-stat{gap:5px;padding-top:7px}.global-stat-value{font-size:30px}.global-stat--count .global-stat-value{font-size:19px}.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 (prefers-reduced-motion:reduce){.submit-button{transition:none}}@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}}
