:root{--tan-neutral:#ddc9a3;--interface-navy:#1a3b66;--interactive-white:#fff;--fluidity-accent:#00c8ff;--serif:"Instrument Serif", "Times New Roman", serif;--sans:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;--mono:"Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background-color:var(--tan-neutral);color:var(--interface-navy);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}.atelier{background:var(--tan-neutral);min-height:100vh;color:var(--interface-navy);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.bar{justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;padding:20px 40px;display:flex}.logo{text-decoration:none}.logo__word{color:var(--interface-navy);letter-spacing:-.02em;font-size:24px;font-weight:600}.bar__nav a{color:var(--interface-navy);opacity:.7;font-size:14px;font-weight:500;text-decoration:none;transition:opacity .2s}.bar__nav a:hover{opacity:1}.frame{max-width:1400px;margin:0 auto;padding:0 40px 60px}.hero{text-align:center;padding:60px 0 40px}.title{color:var(--interface-navy);letter-spacing:-.03em;margin:0 0 12px;font-size:48px;font-weight:700}.subtitle{color:var(--interface-navy);opacity:.7;margin:0;font-size:18px}.workspace{grid-template-columns:1fr 1fr;gap:48px;margin:40px 0;display:grid}@media (width<=900px){.workspace{grid-template-columns:1fr}}.canvas-section{background:var(--interactive-white);border-radius:20px;flex-direction:column;align-items:center;padding:32px;display:flex;box-shadow:0 2px 20px #1a3b6614}.canvas-container{margin-bottom:24px}.bezier-canvas{background:#fafafa;border:2px solid #1a3b661a;border-radius:12px}.control-point{cursor:grab;filter:drop-shadow(0 2px 4px #00c8ff4d);transition:r .15s,filter .15s}.control-point:hover{r:14;filter:drop-shadow(0 4px 8px #00c8ff80)}.control-point:active{cursor:grabbing}.coordinates{background:#1a3b660d;border-radius:12px;justify-content:center;gap:32px;width:100%;margin-bottom:24px;padding:16px 24px;display:flex}.coord-row{align-items:center;gap:8px;display:flex}.coord-label{letter-spacing:.1em;text-transform:uppercase;color:var(--interface-navy);opacity:.5;font-size:12px;font-weight:700}.coord-value{color:var(--interface-navy);font-family:SF Mono,ui-monospace,Monaco,Menlo,monospace;font-size:14px;font-weight:600}.presets{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.preset-btn{background:var(--interface-navy);color:var(--interactive-white);cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:13px;font-weight:600;transition:all .2s}.preset-btn:hover{background:var(--fluidity-accent);transform:translateY(-2px);box-shadow:0 4px 12px #00c8ff4d}.output-section{flex-direction:column;gap:24px;display:flex}.preview-section{background:var(--interactive-white);border-radius:20px;padding:32px;box-shadow:0 2px 20px #1a3b6614}.preview-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.preview-header h3{color:var(--interface-navy);margin:0;font-size:16px;font-weight:600}.play-btn{background:var(--fluidity-accent);color:var(--interface-navy);cursor:pointer;border:none;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;transition:all .2s}.play-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00c8ff4d}.preview-track{background:#1a3b660d;border-radius:12px;height:60px;position:relative;overflow:hidden}.preview-box{background:var(--fluidity-accent);border-radius:8px;width:40px;height:40px;position:absolute;top:10px;left:10px;box-shadow:0 2px 8px #00c8ff4d}.code-section{background:var(--interactive-white);border-radius:20px;flex:1;padding:32px;box-shadow:0 2px 20px #1a3b6614}.code-section h3{color:var(--interface-navy);margin:0 0 20px;font-size:16px;font-weight:600}.code-row{background:#1a3b6608;border-radius:8px;align-items:center;gap:12px;margin-bottom:12px;padding:16px;display:flex}.code-row:last-child{margin-bottom:0}.code-label{letter-spacing:.05em;text-transform:uppercase;color:var(--interface-navy);opacity:.6;min-width:60px;font-size:12px;font-weight:700}.code-value{color:var(--interface-navy);word-break:break-all;background:0 0;border:none;flex:1;margin:0;padding:0;font-family:SF Mono,ui-monospace,Monaco,Menlo,monospace;font-size:13px}.copy-icon{background:var(--interface-navy);color:var(--interactive-white);cursor:pointer;border:none;border-radius:6px;min-width:60px;padding:8px 16px;font-size:12px;font-weight:600;transition:all .2s}.copy-icon:hover{background:var(--fluidity-accent)}.footer{color:var(--interface-navy);opacity:.6;border-top:1px solid #1a3b661a;justify-content:space-between;align-items:center;margin-top:40px;padding:32px 0;font-size:13px;display:flex}.footer a{color:var(--interface-navy);text-decoration:none;transition:opacity .2s}.footer a:hover{opacity:.8}