:root { --ink:#17201d; --paper:#efede5; --panel:#f8f6ef; --line:#c9c6ba; --acid:#d9ff43; --orange:#ff5b35; --blue:#516cff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"Arial Narrow","Yu Gothic",sans-serif; }
button,input { font:inherit; } button { color:inherit; }
.app-shell { max-width:1700px; margin:auto; padding:24px; }
.topbar { display:flex; align-items:end; justify-content:space-between; border-bottom:2px solid var(--ink); padding-bottom:17px; }
.eyebrow,small { font-size:10px; font-weight:800; letter-spacing:.16em; }
.eyebrow { margin:0 0 4px; } h1 { margin:0; font-size:clamp(38px,5vw,72px); line-height:.85; letter-spacing:-.07em; } h1 span { color:var(--orange); }
.header-actions { display:flex; align-items:flex-start; gap:8px; }.button { border:1px solid var(--ink); padding:12px 16px; background:var(--panel); font-size:11px; font-weight:800; letter-spacing:.08em; cursor:pointer; box-shadow:3px 3px 0 var(--ink); }.button.primary { background:var(--acid); }.button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.share-menu { position:relative; }
.share-options { position:absolute; right:0; top:calc(100% + 8px); z-index:5; display:grid; min-width:150px; border:1px solid var(--ink); background:var(--panel); box-shadow:4px 4px 0 var(--ink); }
.share-options[hidden] { display:none; }
.share-menu:hover .share-options,.share-menu:focus-within .share-options { display:grid; }
.share-options a,.share-options button { display:block; width:100%; border:0; border-bottom:1px solid var(--line); padding:11px 12px; color:var(--ink); background:transparent; text-align:left; text-decoration:none; font-size:11px; font-weight:800; letter-spacing:.08em; cursor:pointer; }
.share-options a:last-child,.share-options button:last-child { border-bottom:0; }
.share-options a:hover,.share-options button:hover { background:var(--acid); }
.workspace { display:grid; grid-template-columns:280px minmax(420px,1fr) 300px; min-height:730px; border-bottom:2px solid var(--ink); }
.panel { background:var(--panel); padding:22px 18px; min-width:0; }.library-panel { border-right:1px solid var(--ink); }.controls-panel { border-left:1px solid var(--ink); }
.section-heading { display:flex; gap:10px; align-items:center; margin-bottom:17px; }.section-heading>span { display:grid; place-items:center; width:29px; height:29px; flex:0 0 auto; border-radius:50%; color:white; background:var(--ink); font-size:11px; font-weight:bold; }.section-heading small { color:#777; } h2 { margin:2px 0 0; font-size:18px; }
.category-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.category-tab { border:1px solid var(--ink); padding:9px 7px; background:transparent; cursor:pointer; font-size:11px; font-weight:bold; text-align:left; }.category-tab.active { background:var(--ink); color:white; }.category-tab small { display:block; margin-top:3px; color:inherit; opacity:.65; letter-spacing:.04em; }
.model-count { margin:18px 0 8px; border-bottom:1px solid var(--line); padding-bottom:7px; }.model-count span { font-size:22px; font-weight:900; }.model-list { display:grid; gap:6px; max-height:520px; overflow:auto; padding:2px 5px 5px 2px; }.model-button { border:1px solid var(--line); background:white; padding:10px; text-align:left; cursor:pointer; }.model-button:hover,.model-button.active { border-color:var(--ink); box-shadow:3px 3px 0 var(--ink); transform:translate(-1px,-1px); }.model-button strong,.model-button small { display:block; }.model-button small { color:#777; margin-top:3px; letter-spacing:.05em; }
.canvas-panel { min-width:0; display:flex; flex-direction:column; background:#18201e; color:white; }.canvas-meta,.canvas-footer { display:flex; align-items:center; justify-content:space-between; padding:15px 19px; }.canvas-meta { border-bottom:1px solid #495451; }.canvas-meta div:first-child { display:flex; flex-direction:column; gap:4px; }.canvas-meta strong { font-size:19px; }.status { font:10px monospace; letter-spacing:.1em; }.status i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 9px var(--acid); }.canvas-wrap { position:relative; flex:1; min-height:600px; overflow:hidden; } canvas { width:100%; height:100%; display:block; cursor:grab; } canvas:active { cursor:grabbing; }.axis-label { position:absolute; color:#7d8985; font:italic 14px Georgia; pointer-events:none; }.axis-label.x { right:12px; top:50%; }.axis-label.y { left:51%; top:10px; }.canvas-footer { border-top:1px solid #495451; color:#a1aaa7; font:10px monospace; }.canvas-footer button { border:0; background:none; color:white; text-decoration:underline; cursor:pointer; }
.formula-card { padding:14px; background:#e5e2d8; border-left:4px solid var(--orange); }.formula-card p { margin:8px 0 0; font:italic 14px/1.55 Georgia; overflow-wrap:anywhere; }.parameter-controls { margin-top:22px; }.parameter-control { display:block; margin-bottom:16px; }.control-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:12px; font-weight:bold; }.control-label output { min-width:47px; padding:3px 6px; text-align:center; color:white; background:var(--ink); font-family:monospace; } input[type="range"] { width:100%; accent-color:var(--orange); cursor:pointer; }
.toggle-row { position:relative; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:15px; cursor:pointer; }.toggle-row span { display:flex; flex-direction:column; font-size:12px; }.toggle-row span small { margin-top:3px; color:#888; letter-spacing:0; }.toggle-row input { display:none; }.toggle-row i { position:relative; width:40px; height:22px; border-radius:20px; background:#aaa; }.toggle-row i:after { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:white; transition:.2s; }.toggle-row input:checked+i { background:var(--blue); }.toggle-row input:checked+i:after { transform:translateX(18px); }
.speed-control { margin-top:20px; padding:14px 0 16px; border-top:1px solid var(--line); }
.math-note { margin-top:24px; padding:15px; background:var(--acid); border:1px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }.math-note h3 { margin:8px 0; font:700 17px Georgia; }.math-note p { margin:0; font-size:12px; line-height:1.65; }
@media(max-width:1100px){.workspace{grid-template-columns:250px 1fr}.controls-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--ink)}.parameter-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}}
@media(max-width:720px){.app-shell{padding:12px}.topbar{align-items:flex-start;gap:15px}.header-actions{flex-direction:column}.share-options{right:auto;left:0}.workspace{display:flex;flex-direction:column}.canvas-panel{order:-1}.canvas-wrap{min-height:430px}.library-panel{border-right:0}.model-list{max-height:none;grid-template-columns:1fr 1fr}.parameter-controls{display:block}.canvas-footer span:nth-child(2){display:none}}