:root{color-scheme:dark;font:15px/1.65 system-ui,-apple-system,Segoe UI,sans-serif;--bg:#0a1420;--panel:#122337;--edge:#36516a;--text:#eef7ff;--sub:#b2c6d3;--mint:#96f2da}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#354c5a55,transparent 48%),var(--bg);color:var(--text)}a{color:var(--mint)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--mint);outline-offset:3px}.skip{position:absolute;top:-100px;left:12px;background:#adffe5;color:#081e25;padding:8px;z-index:10}.skip:focus{top:7px}header{min-height:75px;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;border-bottom:1px solid #33475b;max-width:1300px;margin:auto;padding:15px 28px}header a{text-decoration:none;font-size:13px;font-weight:750}.lab-badge{border:1px solid #436f67;padding:7px 12px;border-radius:99px;color:var(--mint);letter-spacing:1.5px;font-size:10px;font-weight:850}main{max-width:1210px;margin:auto;padding:0 28px}.intro{padding:53px 0 38px}.overline{font-size:11px;letter-spacing:2px;color:var(--mint);font-weight:800}.intro h1{font-size:clamp(58px,7vw,94px);letter-spacing:-.08em;line-height:1.05;margin:16px 0 12px}.intro h1 em{color:var(--mint);font-style:normal}.intro p{font-size:17px;max-width:780px;color:var(--sub);line-height:1.8}.work{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px}.tools,.canvas-wrap,.panel{border:1px solid var(--edge);border-radius:22px;background:#132439;padding:22px}.tool-top h2{margin:0;font-size:23px;letter-spacing:-.7px}.tool-top p,.privacy,#tips,.hint{color:#b1c4d3;font-size:12px;line-height:1.65}.tool-group{padding-top:18px;margin-top:16px;border-top:1px solid #30455c}.tool-group h3{font-size:13px;color:#c9dbe4}.colors{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}.colors button{aspect-ratio:1;border:2px solid #7292a3;border-radius:10px}.colors button.active{outline:3px solid #fff;outline-offset:1px}.actions{display:flex;flex-wrap:wrap;gap:9px}.actions button,.sample button,.btn{border:1px solid #47677a;border-radius:9px;background:#1a374b;padding:10px 13px;font-size:13px;font-weight:750}.actions button:hover,.sample button:hover{background:#285268}.actions button.on,.btn.primary{background:var(--mint);color:#06221e}.privacy{padding:13px;background:#19373b;border:1px solid #426965;border-radius:11px;margin-top:23px}.canvas-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;color:#b3d3db;font-size:11px;letter-spacing:1px;font-weight:750;margin-bottom:14px}#status{color:#a8f5de}canvas{max-width:100%;display:block;margin:auto;border:1px solid #607b91;border-radius:8px;touch-action:none;image-rendering:pixelated}#art{width:min(100%,570px);height:auto;aspect-ratio:1}.sample{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:12px;font-size:12px;color:#c3d9df}.next{padding:65px 0 90px;max-width:800px}.next h2{font-size:clamp(30px,4vw,44px);letter-spacing:-.05em;margin-bottom:12px}.next p{color:var(--sub)}.link{font-weight:800}footer{border-top:1px solid #34495e;padding:25px;text-align:center;color:#90a8bd;font-size:12px}footer a{margin-left:14px}.pad-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:22px}.pad-grid button{aspect-ratio:1;border:1px solid #63708a;background:#27354a;border-radius:12px;color:#fff;display:grid;place-items:center;font-size:14px}.pad-grid button[aria-pressed=true]{background:#c4b2ff;color:#182038;border-color:#d3c5ff}.pad-grid button.beat{box-shadow:0 0 0 3px #9dffe4;border-color:#aaffee}.pad-grid button:focus-visible{outline-offset:1px}.track-label{padding-top:20px;font-size:13px;font-weight:850;color:#dcecf8}.controls-panel{display:flex;gap:15px;flex-wrap:wrap;align-items:center}.controls-panel label{display:flex;gap:8px;align-items:center}.controls-panel input[type=range]{max-width:145px;accent-color:var(--mint)}.controls-panel .btn{padding:13px 23px}.output{border:1px solid #4a686f;background:#1a3540;padding:18px;border-radius:13px;min-height:110px;font-size:17px;color:#e9f8f6;white-space:pre-wrap}.select-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.select-grid label{display:block;color:#bbd3dc;font-size:13px;font-weight:750}.select-grid select{display:block;width:100%;padding:13px;margin-top:7px;background:#101e30;border:1px solid #547084;border-radius:11px}.idea-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.idea-actions button{border-radius:11px;border:1px solid #517568;padding:12px 18px;background:var(--mint);color:#082721;font-weight:800}.idea-actions button.secondary{background:#223b51;color:#e6f6fa;border-color:#4d6179}.output-key{font-size:11px;color:var(--mint);letter-spacing:1.8px;margin:16px 0 8px;font-weight:800}.lab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.lab-cards>div{background:#1a3042;padding:18px;border:1px solid #496177;border-radius:12px}.lab-cards strong{font-size:18px;display:block}.lab-cards p{font-size:12px;color:#a5bbce}.big-space{padding:35px}.note{font-size:11px;color:#91a5b8}@media(max-width:820px){.work{grid-template-columns:1fr}.tools{order:2}.canvas-wrap{order:1}.lab-cards{grid-template-columns:1fr}.intro{padding-top:35px}}@media(max-width:540px){header{padding-inline:16px}main{padding-inline:15px}.intro h1{font-size:60px}.tools,.canvas-wrap,.panel{padding:16px}.pad-grid{gap:5px}.pad-grid button{border-radius:7px}.select-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}