:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#080d1c;color:#eef2ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0,#1e1635 0,transparent 42%),radial-gradient(ellipse at 0 45%,#0c2029 0,transparent 45%);min-height:100vh}main{max-width:1160px;margin:auto;padding:48px 32px}header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:42px}.eyebrow{font-size:10px;letter-spacing:.24em;color:#8fa4b5;margin:0 0 16px}h1{font-size:clamp(48px,7vw,76px);font-weight:450;letter-spacing:-.065em;line-height:1;margin:0}h1 span{font-size:.65em;color:#8de8d8;margin-left:14px;vertical-align:top}.intro{font-size:15px;line-height:1.8;color:#9baac2;margin:0}a{color:#a9e9db;text-underline-offset:4px}label[for=words]{font-size:14px;color:#b7c5d9}textarea,button,input,select{font:inherit}textarea{width:100%;resize:vertical;min-height:92px;border:1px solid #35455a;background:#0e1729bb;color:#f0f5ff;padding:18px 20px;border-radius:16px;margin:10px 0 0;line-height:1.6;font-size:16px;transition:border-color .2s}textarea:focus{border-color:#86dace}.source{font-size:12px;line-height:1.6;color:#899bb1;margin:10px 0 24px}.controls{display:flex;gap:12px 18px;align-items:center;flex-wrap:wrap}.controls label{display:flex;gap:8px;align-items:center;font-size:12px;color:#a6b8ca}button{background:#142339;color:#edf5ff;border:1px solid #3b5065;border-radius:30px;padding:12px 21px;cursor:pointer;min-height:44px;font-size:14px}button:hover:not(:disabled){background:#203749}button.primary{background:#b8f6de;color:#092c29;border-color:#b8f6de;box-shadow:0 0 25px #6cd6b819}button.primary:hover{background:#d2ffe9}button:disabled{opacity:.4;cursor:default}select{background:#111f33;color:#d2e0ef;border:1px solid #344b60;border-radius:10px;padding:10px;min-height:44px}input{accent-color:#9ee8d2}input[type=range]{width:100px}input[type=checkbox]{width:18px;height:18px}input:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid #f2c38f;outline-offset:4px}
.stage{position:relative;isolation:isolate;overflow:hidden;margin:26px 0 18px;border:1px solid #34445b;border-radius:26px;background:radial-gradient(ellipse at 16% 86%,#23736980 0,transparent 40%),radial-gradient(ellipse at 84% 42%,#68499266 0,transparent 45%),radial-gradient(ellipse at 54% 110%,#50777177 0,transparent 50%),linear-gradient(160deg,#080f22 15%,#0c192d 58%,#112838);box-shadow:inset 0 0 100px #040c1980,0 30px 80px #0003}.stage:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;background:radial-gradient(1.5px 1.5px at 12% 16%,#c8e9ef 70%,transparent),radial-gradient(1px 1px at 38% 12%,#acb3d6 70%,transparent),radial-gradient(1.5px 1.5px at 71% 19%,#b5d8da 70%,transparent),radial-gradient(1px 1px at 88% 35%,#b5d8da 70%,transparent),radial-gradient(1px 1px at 23% 51%,#8fc3c7 70%,transparent),radial-gradient(1px 1px at 61% 58%,#b5d8da 70%,transparent),radial-gradient(1px 1px at 45% 36%,#b5d8da 70%,transparent),repeating-linear-gradient(105deg,transparent 0 90px,#accddb05 91px,transparent 92px)}.stage:after{content:"";position:absolute;z-index:-1;width:100%;height:200px;border:1px solid #9ddddc17;border-radius:50%;bottom:-155px;left:0;box-shadow:0 -12px 40px #71d6b50b,0 -35px 0 16px #8fc4bd03}.stage-label{display:flex;justify-content:space-between;gap:16px;position:absolute;top:23px;left:25px;right:25px;font-size:9px;letter-spacing:.2em;color:#99b8c0a8;pointer-events:none}canvas{display:block;width:100%;height:580px}.timeline{display:flex;align-items:center;gap:18px;color:#a3b5c8;font-size:12px}.timeline input{flex:1;min-width:0}#status{color:#9bafc3;min-height:24px;font-size:12px;margin-top:8px;font-variant-numeric:tabular-nums}.wall-section{margin-top:76px;padding-top:30px;border-top:1px solid #35445a}.wall-section h2{font-size:32px;letter-spacing:-1px;font-weight:450;margin:0 0 12px}.wall-section p{color:#95a8c0;font-size:14px;line-height:1.7;max-width:640px}#wall{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}#wall li{display:flex;align-items:center;gap:22px;border-bottom:1px solid #26374b;padding:24px 0;}#wall svg{width:55%;flex:none;max-height:110px;overflow:visible;filter:drop-shadow(0 0 5px #9ed7fa18)}#wall path,#wall circle{stroke:currentColor;stroke-width:.065;stroke-linejoin:round;stroke-linecap:round}#wall path{fill:none}#wall span{overflow-wrap:anywhere;min-width:0;font-size:18px;color:#d4e1ed}#wall small{display:block;font-size:12px;color:#899cb0}#more{margin-top:20px}details{margin-top:36px;color:#9bacc0;font-size:14px;line-height:1.8;max-width:760px}summary{cursor:pointer;color:#d4e3ee}footer{font-size:12px;color:#8396ab;margin-top:56px;border-top:1px solid #29394d;padding-top:24px}footer p{line-height:1.7}@media(max-width:600px){main{padding:28px 16px}header{margin-bottom:28px;align-items:end}.intro{font-size:12px}.eyebrow{font-size:8px;letter-spacing:.17em}h1{font-size:48px}h1 span{margin-left:8px}.controls{gap:10px 12px}.stage{border-radius:20px}canvas{height:500px}.stage-label{left:18px;right:18px;font-size:8px;letter-spacing:.12em}.stage-label span:last-child{display:none}#wall{grid-template-columns:1fr}.wall-section{margin-top:56px}textarea{font-size:16px;padding:14px}}
.gallery .lede{max-width:640px;font-size:15px;line-height:1.8;color:#b7c5d9;margin:0 0 40px}.gallery h2{font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8fa4b5;margin:48px 0 20px}.pieces{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 28px}.piece .art{display:block;border-radius:14px;overflow:hidden;border:1px solid #29394d;box-shadow:0 18px 50px #0008}.piece img{display:block;width:100%;height:auto}.piece h3{font-size:18px;font-weight:500;letter-spacing:-.02em;margin:18px 0 8px}.piece blockquote{margin:0;font-size:13px;line-height:1.7;color:#b7c5d9}.piece .credit{font-size:12px;color:#8396ab;margin:10px 0 0}.piece .downloads{font-size:12px;line-height:1.8;margin:8px 0 0}.piece .downloads span{color:#6f8298}.gallery details{margin-top:56px}
@media (max-width:640px){.gallery header{flex-direction:column;align-items:flex-start;gap:12px}}
.picture-section{margin-top:56px}.picture-section h2{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:0 0 8px}.picture-section>p{font-size:14px;line-height:1.7;color:#9baac2;margin:0 0 18px}.picture-frame{max-width:420px;margin:22px 0;border-radius:14px;overflow:hidden;border:1px solid #29394d;box-shadow:0 18px 50px #0008}.picture-frame svg,.piece .art svg{display:block;width:100%;height:auto}.clear{background-color:#161d2b;background-image:linear-gradient(45deg,#222b3c 25%,transparent 25%,transparent 75%,#222b3c 75%),linear-gradient(45deg,#222b3c 25%,transparent 25%,transparent 75%,#222b3c 75%);background-size:24px 24px;background-position:0 0,12px 12px}.clear.light{background-color:#dfe3ea;background-image:linear-gradient(45deg,#b9c0cc 25%,transparent 25%,transparent 75%,#b9c0cc 75%),linear-gradient(45deg,#b9c0cc 25%,transparent 25%,transparent 75%,#b9c0cc 75%)}#picture-status{font-size:13px;color:#a9e9db;min-height:1.4em}.note{font-size:13px;line-height:1.7;color:#b7c5d9;border-left:2px solid #86dace;padding-left:14px;max-width:560px}.looks{display:flex;flex-wrap:wrap;gap:12px 18px;margin:0 0 8px}.looks label{display:flex;gap:8px;align-items:center;font-size:12px;color:#a6b8ca}.gallery footer p a{color:#a9e9db}
