*{box-sizing:border-box} :root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#182b37;background:#f4f5f5;font-synthesis:none}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.45}header{height:80px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce2e3;background:#fff}.brand{font-size:19px;font-weight:750;letter-spacing:3px;color:#163744;text-decoration:none;display:flex;gap:20px;align-items:center}.brand span{font-size:9px;letter-spacing:2px;font-weight:600;padding-left:20px;border-left:1px solid #cdd5d8}.edition{font-size:11px;letter-spacing:2px;color:#718089}.download{font-size:12px;text-decoration:none;color:#365260}main{display:grid;grid-template-columns:minmax(0,1fr) 336px;min-height:calc(100vh - 80px)}.stage{position:relative;min-height:720px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#fff 0%,#edf1f1 65%,#e1e8e9 100%)}canvas{width:100%;height:100%;position:absolute;inset:0;display:block;outline:none;touch-action:none}.title{position:absolute;top:38px;left:40px;z-index:1;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:650;color:#79878b}.title h1{font-size:clamp(32px,3.4vw,48px);letter-spacing:-1.8px;line-height:1.1;margin:13px 0 9px;font-weight:500}.title p{font-size:15px;color:#6f8189;margin:0}.stage-bottom{position:absolute;bottom:37px;left:0;right:0;text-align:center;pointer-events:none}.stage-bottom p{font-size:11px;color:#6d7e86;margin:0 0 18px}nav{display:inline-flex;gap:4px;background:#ffffffdb;border:1px solid #d9e1e4;padding:5px;border-radius:30px;pointer-events:auto;box-shadow:0 8px 24px #233a4409}nav button{border:0;background:transparent;padding:10px 19px;color:#667880;border-radius:24px;font-size:11px}nav button.active{background:#1c3c4a;color:#fff}.model-stats{position:absolute;left:24px;bottom:12px;color:#8b999f;font-size:10px}aside{background:#fff;padding:29px 26px;display:flex;flex-direction:column;border-left:1px solid #dce2e3}.panel-heading{display:flex;align-items:center;justify-content:space-between}#reset{border:0;background:none;font-size:11px;color:#6c8089;padding:8px 0 8px 8px}h2{font-size:25px;font-weight:500;letter-spacing:-.7px;margin:17px 0 8px}.intro{font-size:12px;color:#849197;line-height:1.5;margin:0 0 22px}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:19px}.presets button{border:1px solid #e0e6e7;background:#fff;border-radius:8px;padding:10px 3px;font-size:10px;color:#677c86}.presets button:hover,.presets button.active{border-color:#698691;background:#f5f8f8}.presets i{display:block;height:23px;width:34px;margin:0 auto 7px;border-radius:5px;background:linear-gradient(115deg,var(--a) 0 52%,var(--b) 52% 68%,var(--c) 68%)}.color-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 8px;margin:0 -8px;border-bottom:1px solid #eef1f1;border-radius:6px}.color-row.selected{background:#edf5f5;box-shadow:inset 3px 0 #3b747a}.color-copy{display:flex;flex-direction:column;gap:3px}.color-copy label{font-size:12px;font-weight:550;cursor:pointer}.color-copy small{font-size:10px;color:#829098}.color-inputs{display:flex;align-items:center;gap:7px}.hex{font-family:Consolas,monospace;font-size:10px;text-transform:uppercase;color:#92a0a5}input[type=color]{width:31px;height:31px;padding:2px;border:1px solid #dce3e5;border-radius:50%;background:white;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:1px}input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}.options{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#617680;margin:22px 0}.options label{display:flex;gap:6px;align-items:center;cursor:pointer}input[type=checkbox]{accent-color:#23505d}.save{width:100%;border:0;border-radius:7px;padding:13px;background:#193e4d;color:#fff;font-size:12px;letter-spacing:.2px}.save:hover{background:#285b6c}.note{font-size:10px;line-height:1.7;color:#89969b;margin:13px 0 20px}aside footer{margin-top:auto;border-top:1px solid #edf0f1;padding-top:17px;font-size:10px;color:#7b8d94;display:flex;gap:7px;align-items:center}.dot{width:5px;height:5px;border-radius:50%;background:#679b93}#loading{position:absolute;inset:0;background:#f0f4f5ed;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:12px;color:#6c828c}#loading strong{font-size:16px;color:#284956;font-weight:500}#loading.hidden{display:none}.spinner{height:30px;width:30px;border:2px solid #c9d8dc;border-top-color:#2d6575;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #448e92;outline-offset:3px}@media(max-width:1000px){header{padding:0 22px}.edition{display:none}.brand span{display:none}main{grid-template-columns:minmax(0,1fr) 300px}aside{padding:25px 21px}.title{left:25px}.title .eyebrow{font-size:8px}}@media(max-width:720px){header{height:64px;padding:0 18px}.brand{font-size:15px}.download{font-size:10px}main{grid-template-columns:1fr}.stage{height:65vh;min-height:480px}.title{top:24px}.title h1{font-size:32px}.title p{font-size:12px}aside{border-left:0;border-top:1px solid #dce2e3;padding:25px}.stage-bottom{bottom:28px}.model-stats{font-size:9px;left:16px;bottom:7px}.color-row{padding:12px 8px}.presets{gap:12px}nav button{padding:9px 14px}}
@media(min-width:721px){main{height:calc(100vh - 80px);min-height:560px}.stage{min-height:0}aside{min-height:0;overflow-y:auto}.title{top:30px}.presets{margin-bottom:12px}.color-row{padding-top:9px;padding-bottom:9px}.stage-bottom{bottom:32px}}