:root{--bg:#f6f1ea;--text:#1d1b19;--ink:#402b2b;--accent:#c2492a;--glow:#ffc46e61;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-scene=dawn]{--bg:#f3dfe2;--text:#2b2130;--accent:#a8466f;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-scene=dusk]{--bg:#3a2846;--text:#f4e7ee;--accent:#ffa25c;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-scene=night]{--bg:#11151f;--text:#dde3ee;--accent:#f2b84b;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);grid-template-rows:1fr auto;place-items:center;font:1rem/1.5 system-ui,sans-serif;display:grid}.page{text-align:center;justify-items:center;gap:1rem;padding:1.5rem 1rem;display:grid}h1{margin:.5rem 0 0;font-size:clamp(1.6rem,5vw,2.4rem)}p{margin:0}@media (prefers-reduced-motion:no-preference){[data-scene-ready] body{transition:background-color .8s,color .8s}}.scene{--avatar-w:min(70vw, 45vh, 360px);--u:calc(var(--avatar-w) / 100);--lamp-x:calc(var(--u) * 31);isolation:isolate;justify-items:center;gap:.75rem;display:grid;position:relative}.scene:before{content:"";--r:calc(var(--u) * 120);left:calc(50% + var(--lamp-x) + var(--u) * 7 - var(--r));top:calc(var(--u) * 21 - var(--r));width:calc(var(--r) * 2);height:calc(var(--r) * 2);z-index:-1;background:radial-gradient(closest-side, var(--glow), transparent);opacity:0;pointer-events:none;position:absolute}[data-scene=night][data-light=on] .scene:before{opacity:1}@media (prefers-reduced-motion:no-preference){[data-scene-ready] .scene:before{transition:opacity .5s}}.avatar{width:var(--avatar-w);aspect-ratio:3/4;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0;position:relative}.avatar img{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.avatar:focus-visible{outline:3px solid var(--accent);outline-offset:8px;border-radius:1rem}[data-scene=dawn] :is(.avatar img,.eye){filter:brightness(.9)sepia(.15)}[data-scene=dusk] :is(.avatar img,.eye){filter:brightness(.75)sepia(.3)saturate(1.1)}[data-scene=night] :is(.avatar img,.eye){filter:brightness(.4)saturate(.6)}[data-scene=night][data-light=on] :is(.avatar img,.eye){filter:none}.avatar__head{transform-origin:50% 70.46%;will-change:transform;position:absolute;inset:0}.eye{aspect-ratio:180/151;background:#fcfcfc;place-items:center;width:10.1%;display:grid;position:absolute;translate:-50% -50%}.eye--left{top:44.75%;left:39.37%}.eye--right{top:44.75%;left:60.66%}.pupil{aspect-ratio:1;background:radial-gradient(circle at 66% 32%, #fff 0 13%, transparent 14%), var(--ink);border-radius:50%;width:54%}.avatar :is(.bored,.lids,.happy,.yawn){opacity:0}.is-bored .bored,.is-blinking .lids,.is-happy .happy,.is-yawning .yawn{opacity:1}.body{transform-origin:50% 100%}@media (prefers-reduced-motion:no-preference){.body{animation:4s ease-in-out infinite breathe}.avatar.is-happy{animation:.5s ease-out hop}.is-yawning .avatar__head{animation:2.4s ease-in-out yawn-stretch}[data-scene-ready] :is(.avatar img,.eye){transition:filter .5s}}@keyframes breathe{50%{transform:scale(1.01)}}@keyframes hop{30%{transform:translateY(-6%)}}@keyframes yawn-stretch{25%,70%{scale:1 1.04}}.lamp{--metal:#8d8478;--cord:#2f2a26;--glass:#ece9e0bf;--filament:#7a6a58;z-index:2;top:calc(var(--u) * 4);left:calc(50% + var(--lamp-x));width:calc(var(--u) * 14);transform-origin:50% -100vh;pointer-events:none;justify-items:center;display:grid;position:absolute}.lamp:before{content:"";width:max(2px, calc(var(--u) * .6));background:var(--cord);height:100vh;position:absolute;bottom:100%;left:50%;translate:-50%}.lamp__socket{width:calc(var(--u) * 6);height:calc(var(--u) * 7);border-radius:calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * .6) calc(var(--u) * .6);background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--u) * 1.1), #00000047 calc(var(--u) * 1.1) calc(var(--u) * 1.6)), linear-gradient(to right, #5f584f, var(--metal) 40%, #c9c1b4 55%, #6c645a);position:relative}.lamp__socket:after{content:"";width:calc(var(--u) * 6.5);height:max(2px, calc(var(--u) * 1));background:linear-gradient(to bottom, #c9c1b4, var(--metal));border-radius:0 999px 999px 0;position:absolute;top:55%;left:90%}.lamp__bulb{width:calc(var(--u) * 14);aspect-ratio:1;margin-top:calc(var(--u) * 3.5);background:radial-gradient(circle at 34% 30%, #ffffffd9 0 9%, transparent 22%), var(--glass);box-shadow:inset calc(var(--u) * -1) calc(var(--u) * -1.2) calc(var(--u) * 2.5) #0000002e;border-radius:50%;position:relative}.lamp__bulb:before{content:"";background:var(--glass);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);width:52%;height:40%;position:absolute;bottom:78%;left:50%;translate:-50%}.lamp__filament{border:max(1px, calc(var(--u) * .45)) solid var(--filament);border-top:0;border-radius:0 0 50% 50%;width:34%;height:30%;position:absolute;top:22%;left:50%;translate:-50%}.lamp__chain{top:calc(var(--u) * 4.4);left:calc(50% + var(--u) * 9);width:44px;height:calc(var(--u) * 34 + 12px);cursor:pointer;pointer-events:auto;transform-origin:50% 0;touch-action:manipulation;background:0 0;border:0;min-height:44px;padding:0;position:absolute;translate:-50%}.lamp__chain:before{content:"";width:max(3px, calc(var(--u) * .9));background:radial-gradient(circle, #b5aa98 0 45%, transparent 50%) 0 0 / 100% max(4px, calc(var(--u) * 1.3)) repeat-y;position:absolute;top:0;bottom:12px;left:50%;translate:-50%}.lamp__chain:after{content:"";width:max(8px, calc(var(--u) * 2.4));height:max(12px, calc(var(--u) * 3.6));background:linear-gradient(90deg,#6f6557,#c4b9a6 45%,#7c7163);border-radius:40% 40% 50% 50%;position:absolute;bottom:0;left:50%;translate:-50%}.lamp__chain:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:999px}.lamp__socket,.lamp__bulb{pointer-events:auto;cursor:pointer}[aria-disabled=true]{cursor:default}.lamp:has([aria-disabled=true]) :is(.lamp__socket,.lamp__bulb){cursor:default}[data-scene=night] .lamp{--glass:#969caa73;--filament:#4d4a48}[data-light=on] .lamp{--glass:#ffe9a8;--filament:#fff6d0}[data-light=on] .lamp__bulb{background:radial-gradient(circle at 50% 40%, #fffbe8 0 18%, transparent 60%), var(--glass);box-shadow:0 0 calc(var(--u) * 6) calc(var(--u) * 2) #ffd682d9, 0 0 calc(var(--u) * 22) calc(var(--u) * 8) #ffc46e59}[data-light=on] .lamp__filament{box-shadow:0 0 calc(var(--u) * 1.5) #fff3c4}@media (prefers-reduced-motion:no-preference){[data-scene-ready] :is(.lamp__bulb,.lamp__filament){transition:background-color .25s,box-shadow .25s,border-color .25s}.lamp.is-pulled{animation:1.4s ease-out lamp-sway}.lamp.is-pulled .lamp__chain{animation:.35s ease-out chain-pull}}@keyframes chain-pull{40%{transform:translateY(calc(var(--u) * 4))}}@keyframes lamp-sway{20%{rotate:.6deg}45%{rotate:-.4deg}70%{rotate:.2deg}}.scene-choices{border:1px solid color-mix(in srgb, var(--text) 25%, transparent);border-radius:999px;gap:.25rem;padding:.25rem;font-size:.8rem;display:inline-flex}.scene-choices[hidden]{display:none}.scene-choices button{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.25rem .75rem}.scene-choices button[aria-pressed=true]{background:var(--text);color:var(--bg)}.scene-choices button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.footer{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 1.5rem;padding:1rem;font-size:.9rem;display:flex}.socials{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.socials a{color:inherit;text-underline-offset:3px}.socials a:hover,.socials a:focus-visible{color:var(--accent)}
