@font-face{font-family:Inter;src:url('./fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;font-family:Inter,Arial,sans-serif;background:#050507;color:#dcdce0;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #b9abff;outline-offset:6px}::selection{background:#367bdf80;color:#fff}button{border:0}p,h1,h2{margin:0}[hidden]{display:none!important}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#landing{position:fixed;inset:8.5vh 5.5vw;--s:calc(89vw / 1730);--font:clamp(60px,6.94vw,145px)}
#nav{height:10.8%;position:relative;display:flex;align-items:center;padding:0 4.3%;border:1px solid #444449;border-radius:15px;background:linear-gradient(140deg,#28282e,#17171b 65%);font-size:clamp(12px,1.05vw,20px)}
.brand{display:flex;align-items:center;gap:11px;font-weight:500;font-size:1.42em;letter-spacing:-.04em}.brand-mark{width:18px;height:18px;border:1px solid;display:inline-block;position:relative}.brand-mark:before,.brand-mark:after{content:'';position:absolute;left:-3px;top:7px;width:22px;height:1px;background:currentColor;transform:rotate(45deg)}.brand-mark:after{transform:rotate(-45deg)}
.nav-links{display:flex;position:absolute;left:50%;transform:translateX(-50%);gap:30px;color:#ffffff99}.nav-links a:hover,.sign-in:hover{color:#fff}.sign-in{margin-left:auto;color:#ffffff99}.sign-in span{margin-left:11px}
#panel{position:absolute;left:0;top:calc(10.8% + 14px);right:0;bottom:0;border:1px solid #444449;border-radius:15px;background:linear-gradient(120deg,#25252b,#151519 65%);padding:7.3% 5.8%}
.eyebrow{position:absolute;top:13.5%;font-size:max(8px,calc(11 * var(--s)));letter-spacing:.2em;color:#ffffff61}
h1{position:absolute;top:19.5%;font-weight:500;font-size:var(--font);line-height:.97;letter-spacing:-.045em;color:#d1d1d7}
.intro{position:absolute;top:53.5%;font-size:clamp(11px,1.06vw,20px);line-height:1.65;color:#ffffff8c;max-width:70%}
.actions{position:absolute;top:67.5%;display:flex;gap:28px;align-items:center;font-size:clamp(11px,1.04vw,17px)}
.studio-button{width:calc(116 * var(--s));min-width:100px;height:calc(40 * var(--s));min-height:36px;border-radius:6px;color:#1d1d22;background:#e1e1e4;font-size:inherit;transition:background .2s}.studio-button:hover{background:#36d67e}.paper-link{padding:12px 0;white-space:nowrap}.paper-link span{margin-left:9px}.paper-link:hover{text-decoration:underline;text-underline-offset:5px}
footer{position:absolute;bottom:6%;left:5.8%;right:5.8%;display:flex;justify-content:space-between;font-size:max(8px,calc(11 * var(--s)));color:#ffffff57;letter-spacing:.01em}
/* The canvas is the print. The matching DOM remains selectable and accessible. */
.webgl #landing{inset:0;pointer-events:none}
.webgl #nav,.webgl #panel{position:fixed;left:0;top:0;right:auto;bottom:auto;transform-origin:0 0;border:0;border-radius:0;background:transparent;padding:0;display:block;color:transparent}
.webgl #nav>*{position:absolute}.webgl #nav .brand{display:block}.webgl .brand-mark{display:none}
.webgl #nav a,.webgl #panel p,.webgl #panel h1,.webgl #panel footer,.webgl #panel a,.webgl #panel button{color:transparent;pointer-events:auto;background:transparent;-webkit-text-fill-color:transparent}
.webgl #nav a:hover{color:transparent}.webgl #nav .nav-links{transform:none;gap:0;position:static}.webgl #nav .nav-links a{position:absolute}.webgl .sign-in{margin:0}.webgl #nav .sign-in span{display:none}
.webgl #panel .intro{max-width:none}.webgl .actions{position:static;display:block}.webgl .actions>*{position:absolute;padding:0;min-width:0;min-height:0}.webgl footer{bottom:auto;left:0;right:auto;width:100%}.webgl footer span{position:absolute;white-space:nowrap}.webgl .paper-link:hover{text-decoration:none}.webgl .paper-link span{margin:0}.webgl ::selection{-webkit-text-fill-color:#f2f5ff;color:#f2f5ff;background:#367bdf80}
#paper{position:fixed;inset:0;opacity:0;transition:opacity .4s;overflow:auto;pointer-events:none}#paper.visible{opacity:1;pointer-events:auto}.definitions{position:absolute;left:32.4%;top:calc(35.9% - 1.36vw);width:33.9%;padding-bottom:50px}.definitions h2{font-size:1.36vw;letter-spacing:-.022em;font-weight:650;line-height:1.2;color:#fff;margin-bottom:1.65vw}.definitions p{font-size:.73vw;line-height:1.72;color:#ffffff99;margin-top:1.05vw}.definitions strong{font-weight:550;color:#efeff2}
#back{position:fixed;left:17.6%;top:21.7%;width:8.6%;height:3.8%;color:#fff;font-size:.66vw;font-weight:500;letter-spacing:-.01em;background:transparent;transform-origin:center;opacity:0;transition:opacity .3s}#paper.visible #back{opacity:1}#back:hover{color:#b9abff}
body:not(.webgl) #back{background:linear-gradient(145deg,#36363e,#16161b);border:1px solid #5b5b68;border-radius:5px;min-height:40px;min-width:90px}
dialog{position:fixed;inset:auto 6vw 10vh auto;margin:0;width:min(370px,88vw);padding:34px;border:1px solid #ffffff26;border-radius:15px;color:#dcdce0;background:#17171ced;box-shadow:0 20px 90px #0008;backdrop-filter:blur(25px)}dialog::backdrop{background:#05050750}dialog .close{position:absolute;top:12px;right:16px;background:none;color:#a4a4ae;font-size:26px;line-height:1}.dialog-eyebrow{font-size:9px;letter-spacing:.18em;color:#91919d;margin:8px 0 24px}dialog h2{font-size:28px;font-weight:500;letter-spacing:-.04em;margin-bottom:14px}#dialog-description{font-size:12px;line-height:1.7;color:#aaaab3}#material-controls{margin-top:26px}#material-controls label{display:block;font-size:11px;margin-top:20px}output{float:right;color:#b9abff;font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;accent-color:#b9abff;margin:13px 0;height:15px}#reset-material{background:none;color:#b4b4bd;padding:10px 0;font-size:11px}#reset-material span{margin-left:8px}#dialog-note{margin-top:23px;font-size:9px;color:#777782;line-height:1.6}
@media(max-width:650px){#landing{inset:16px;--s:1;--font:clamp(45px,13vw,80px)}#nav{height:64px;padding:0 22px;font-size:11px}.brand{font-size:20px}.brand-mark{width:15px;height:15px}.brand-mark:before,.brand-mark:after{width:18px;left:-2px;top:6px}.nav-links{gap:15px;left:51%}.nav-links a:last-child{display:none}.sign-in span{display:none}#panel{top:78px;padding:24px}.eyebrow{top:11%;font-size:8px}h1{top:17%}.intro{top:46%;font-size:11px;max-width:90%;padding-right:12px}.wide-break{display:none}.actions{top:62%;gap:22px;font-size:12px}.studio-button{width:110px;height:40px}footer{font-size:8px;bottom:5%;left:24px;right:24px;gap:16px}footer span:last-child{font-size:7px}.definitions{left:9%;top:29%;width:82%;padding-bottom:40px}.definitions h2{font-size:23px;line-height:1.25;margin-bottom:26px}.definitions p{font-size:12px;margin-top:19px;line-height:1.72}#back{left:11%;top:15%;width:28%;height:45px;font-size:12px}dialog{inset:auto 6vw 8vh auto}.webgl .wide-break{display:block}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
@media(min-width:651px) and (max-width:1100px){.definitions{width:55%;left:32.4%;top:32%}.definitions h2{font-size:22px;margin-bottom:25px}.definitions p{font-size:12px;line-height:1.72;margin-top:18px}#back{font-size:11px;min-width:85px;min-height:30px}}
dialog{z-index:20;inset:8.5vh 5.5vw auto auto;width:min(370px,88vw);max-height:83vh;padding:30px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#66616f #17171c}
dialog h2{overflow-wrap:anywhere}dialog .dialog-eyebrow{font-size:9px;margin-bottom:19px}dialog #dialog-description{font-size:12px;color:#b6b6c0}dialog .close{width:30px;height:30px}
.editor-tabs{display:flex;gap:22px;border-bottom:1px solid #ffffff1f;margin:22px 0}.editor-tabs button{position:relative;border:0;background:none;color:#a5a5b0;padding:0 0 12px;font-size:12px}.editor-tabs button[aria-pressed=true]{color:#f0eef7}.editor-tabs button[aria-pressed=true]:after{content:'';position:absolute;height:2px;background:#b9abff;bottom:-1px;left:0;right:0}
.name-label{display:block;font-size:11px;color:#c3c3cd;margin-bottom:9px}#material-name{width:100%;height:37px;padding:8px 11px;background:#ffffff06;color:#ededf2;border:1px solid #ffffff29;border-radius:5px;font:400 13px Inter;caret-color:#b9abff}input:focus-visible,summary:focus-visible{outline:2px solid #b9abff;outline-offset:3px}
.color-row{display:flex;align-items:center;gap:12px;margin-top:19px;font-size:11px}.color-row output{margin-left:auto;color:#c2bdce;font-size:11px}input[type=color]{width:30px;height:25px;padding:1px;border:1px solid #ffffff3d;border-radius:4px;background:transparent;cursor:pointer}
#material-controls{margin-top:15px}#material-controls label{margin-top:17px}#material-controls input[type=range]{margin:9px 0;height:20px;cursor:pointer}#material-controls summary{cursor:pointer;padding:12px 0;font-size:11px;color:#b6b0ca}#material-controls details{border-top:1px solid #ffffff15;margin-top:15px}
.field-note,.empty-library{font-size:11px;line-height:1.7;color:#a8a4b2}.field-note{margin-top:17px}.editor-actions{display:flex;align-items:center;gap:22px;margin-top:22px}.primary-action{font-size:12px;color:#141317;background:#dcd7ed;border-radius:5px;padding:11px 16px}.primary-action:hover{background:#b9abff}#reset-material{color:#b7b3c1;font-size:12px}
#library-view h3{font-size:11px;font-weight:500;color:#b5afc3}.material-list{margin:10px 0 21px}.material-row{display:flex;align-items:center;border-bottom:1px solid #ffffff10;gap:8px}.material-choice{display:flex;align-items:center;gap:13px;flex:1;min-width:0;text-align:left;padding:11px 0;background:none;color:#e0dce9;font-size:12px;line-height:1.4}.material-choice>span:last-child{overflow-wrap:anywhere}.material-choice:hover{color:#b9abff}.material-swatch{width:31px;height:31px;flex-shrink:0;border:1px solid #ffffff2d;border-radius:7px;background:linear-gradient(140deg,#ffffff70,transparent 60%),var(--swatch);box-shadow:inset 0 1px 1px #ffffff30}.remove-material{background:none;color:#b3a7bf;padding:8px 0;font-size:10px}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.library-heading button{color:#c9baff;background:none;font-size:11px;padding:9px 0}
.export-option{display:block;text-align:left;width:100%;padding:17px 0;background:none;border-bottom:1px solid #ffffff1d;color:#ddd8e8}.export-option strong{font-size:13px;font-weight:500;display:block}.export-option strong span{float:right;color:#b9abff}.export-option small{font-size:11px;color:#aaa5b5;display:block;line-height:1.65;margin-top:8px}.export-option:hover strong{color:#b9abff}.export-option:disabled{opacity:.4;cursor:not-allowed}
#studio-status{min-height:18px;font-size:11px;line-height:1.7;color:#cfc3ff;margin-top:19px}#dialog-note{font-size:9px;line-height:1.8;color:#aaa5b6;margin-top:16px}#dialog-note a{text-decoration:underline;text-underline-offset:3px}.project-credit{position:fixed;right:5.5vw;bottom:2.2vh;z-index:3;color:#8c8797;font-size:10px;letter-spacing:.015em}.project-credit:hover{color:#dcd5ec}
body:not(.webgl) #panel{background:linear-gradient(120deg,color-mix(in srgb,var(--material-tint,#17171b),#52525c 24%),var(--material-tint,#17171b))}
@media(max-width:650px){dialog{inset:auto 16px 46px auto;width:calc(100vw - 32px);max-height:76svh;padding:26px}.project-credit{right:18px;bottom:13px;font-size:9px}.sign-in{font-size:9px}#nav .nav-links{left:50%;gap:12px}}
@media(max-height:600px) and (min-width:651px){dialog{inset:20px 30px auto auto;max-height:calc(100svh - 40px)}}
#dialog-note,.project-credit,.remove-material{font-size:11px}
@media(max-width:650px){.sign-in,.project-credit{font-size:11px}}