style.css

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=DM+Sans:wght@400;500;700&display=swap');

:root { --bg:#f4f1eb; --panel:#fffdf8; --border:#d9d2c7; --ink:#172322; --dim:#777b71; --accent:#e15c3a; --accent2:#287f78; --accent3:#4c8c57; --highlight:#f4c95d; --shadow:0 12px 32px rgba(39,42,31,.08); }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:radial-gradient(circle at 75% 18%, rgba(244,201,93,.14), transparent 28%),var(--bg); color:var(--ink); font-family:'DM Sans',sans-serif; min-height:100vh; display:flex; flex-direction:column; }
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(23,35,34,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,34,.035) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; z-index:0; }
header { position:relative; z-index:1; display:flex; align-items:center; gap:16px; padding:18px 32px; background:var(--ink); color:#f0ede8; }
.brand-lockup { display:flex; align-items:baseline; gap:12px; }.logo { font:600 20px 'IBM Plex Mono',monospace; color:var(--highlight); }.brand-note { color:rgba(255,255,255,.48); font-size:11px; }
.header-tags { display:flex; gap:6px; margin-left:auto; }.tag { font:10px 'IBM Plex Mono',monospace; letter-spacing:1px; padding:3px 8px; border:1px solid rgba(255,255,255,.15); border-radius:2px; color:rgba(255,255,255,.5); }
.main { position:relative; z-index:1; display:grid; grid-template-columns:292px 1fr; flex:1; min-height:0; }
.sidebar { background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; }.sb-section { padding:18px 18px 16px; border-bottom:1px solid var(--border); }.sb-label { font:9px 'IBM Plex Mono',monospace; letter-spacing:2px; color:var(--dim); text-transform:uppercase; margin-bottom:10px; }.sb-label>span { color:var(--accent); margin-right:6px; }.sub-label { margin:4px 0 6px; }
.img-source-tabs,.algo-tabs { display:flex; gap:0; margin-bottom:12px; }.isrc-tab,.algo-tab { flex:1; padding:7px 0; font:10px 'IBM Plex Mono',monospace; letter-spacing:1px; background:transparent; border:1px solid var(--border); color:var(--dim); cursor:pointer; transition:all .12s; }.isrc-tab:first-child,.algo-tab:first-child { border-radius:3px 0 0 3px; }.isrc-tab:last-child,.algo-tab:last-child { border-radius:0 3px 3px 0; border-left:0; }.isrc-tab.active,.algo-tab.active { background:var(--ink); color:var(--highlight); border-color:var(--ink); }.algo-tab:not(:last-child) { border-right:0; }.cspace-tabs { display:flex; gap:4px; margin-top:2px; }.cspace-tabs .isrc-tab { padding:5px 0; font-size:9px; border-radius:3px; }
.upload-zone { border:2px dashed var(--border); border-radius:4px; padding:20px; text-align:center; cursor:pointer; transition:all .15s; background:var(--bg); }.upload-zone:hover,.upload-zone.drag { border-color:var(--accent); background:rgba(225,92,58,.04); }.upload-zone p { font-size:12px; color:var(--dim); margin-top:4px; }.upload-zone .icon { font-size:24px; }
.sample-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.sample-btn { padding:0; border:2px solid var(--border); border-radius:4px; overflow:hidden; cursor:pointer; background:none; transition:border-color .12s; }.sample-btn:hover { border-color:var(--accent2); }.sample-btn.active { border-color:var(--accent); }.sample-btn canvas { display:block; width:100%; height:60px; }.sample-btn .slabel { font:9px 'IBM Plex Mono',monospace; letter-spacing:1px; padding:3px 6px; background:var(--ink); color:#ccc; text-align:left; }
.ctrl-panels>div { display:none; }.ctrl-panels>div.show { display:flex; flex-direction:column; gap:10px; }.primitive-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }.ctrl-row { display:flex; align-items:center; justify-content:space-between; gap:6px; }.ctrl-lbl { font:10px 'IBM Plex Mono',monospace; color:var(--dim); white-space:nowrap; }.ctrl-val { font:10px 'IBM Plex Mono',monospace; color:var(--accent); min-width:30px; text-align:right; } input[type=range] { -webkit-appearance:none; width:100%; height:3px; background:var(--border); border-radius:2px; outline:none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--ink); cursor:pointer; border:2px solid var(--accent); }.sample-info { font:9px/1.6 'IBM Plex Mono',monospace; color:var(--dim); }
.prim-btn { padding:7px 4px; font:10px 'IBM Plex Mono',monospace; letter-spacing:1px; background:transparent; border:1px solid var(--border); color:var(--dim); cursor:pointer; border-radius:3px; transition:all .12s; }.prim-btn:hover { border-color:var(--accent2); color:var(--accent2); }.prim-btn.active { background:var(--ink); color:var(--highlight); border-color:var(--ink); }
.has-tip { position:relative; cursor:help; }.has-tip::after { content:attr(data-tip); position:absolute; left:0; top:calc(100% + 6px); background:var(--ink); color:#f0ede8; font:10px/1.5 'IBM Plex Mono',monospace; padding:7px 10px; border-radius:3px; width:200px; z-index:100; pointer-events:none; opacity:0; transition:opacity .15s; }.has-tip:hover::after { opacity:1; }
.run-btn { margin:12px 18px 0; width:calc(100% - 36px); padding:12px; background:var(--accent); color:#fffdf8; border:0; font:12px 'IBM Plex Mono',monospace; letter-spacing:2px; cursor:pointer; border-radius:3px; transition:transform .15s,background .15s; }.run-btn:hover { background:#c9472e; transform:translateY(-1px); }.run-btn:disabled { opacity:.4; cursor:not-allowed; }
.status-bar { padding:10px 18px; font:10px 'IBM Plex Mono',monospace; color:var(--dim); border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }.sv { color:var(--ink); font-weight:600; }
.canvas-area { display:grid; grid-template-rows:auto 1fr auto auto; min-height:0; padding:28px 34px 18px; gap:10px; }.workspace-intro { display:flex; justify-content:space-between; align-items:end; gap:32px; padding:2px 0 6px; }.eyebrow { color:var(--accent); font:600 10px 'IBM Plex Mono',monospace; letter-spacing:2px; margin-bottom:9px; } h1 { font:500 clamp(30px,3vw,48px)/.98 'DM Sans',sans-serif; } h1 em { color:var(--accent2); font-style:normal; }.intro-copy { max-width:300px; color:var(--dim); font-size:13px; line-height:1.55; padding-bottom:3px; }
.canvas-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; min-height:0; }.canvas-panel { background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }.cp-header { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }.cp-title { font:10px 'IBM Plex Mono',monospace; letter-spacing:1.5px; color:var(--dim); }.cp-badge { font:9px 'IBM Plex Mono',monospace; padding:2px 7px; border-radius:2px; background:var(--bg); color:var(--dim); border:1px solid var(--border); }.cp-badge.running { background:#fff3cd; color:#856404; border-color:#ffc107; animation:pulse .8s infinite; }.cp-badge.done { background:#d4edda; color:#155724; border-color:#28a745; } @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} } canvas { display:block; width:100%; height:100%; object-fit:contain; flex:1; min-height:0; }.placeholder { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--dim); font:11px 'IBM Plex Mono',monospace; letter-spacing:1px; }.placeholder .big { font-size:36px; opacity:.2; }
.progress-wrap { height:3px; background:var(--border); overflow:hidden; }.progress-bar { height:100%; background:var(--accent); width:0; transition:width .1s linear; }.log-area { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.log-header { font:9px 'IBM Plex Mono',monospace; letter-spacing:2px; color:var(--dim); margin-bottom:5px; text-transform:uppercase; }.log-panel { background:var(--ink); border-radius:6px; font:10px/1.7 'IBM Plex Mono',monospace; color:#8a9aaa; overflow-y:auto; max-height:130px; padding:8px 10px; border:1px solid #2a3440; }.log-panel .log-line { display:flex; gap:8px; }.log-panel .log-ts { color:#3a5060; flex-shrink:0; }.log-panel .log-ok { color:#39ff14; }.log-panel .log-info { color:#00e5ff; }.log-panel .log-warn { color:#ffb300; }.log-panel .log-iter { color:#7a8a9a; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.stat-cell { background:var(--bg); border-radius:3px; padding:7px 10px; border:1px solid var(--border); }.stat-cell .sk { font:9px 'IBM Plex Mono',monospace; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase; margin-bottom:2px; }.stat-cell .sv2 { font:14px 'IBM Plex Mono',monospace; font-weight:600; color:var(--ink); }.stat-cell .sv2.good { color:var(--accent3); }.stat-cell .sv2.warn { color:var(--accent); }.legend-bar { background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:10px 16px; display:flex; flex-wrap:wrap; gap:10px; box-shadow:var(--shadow); }.li { display:flex; align-items:center; gap:6px; font:10px 'IBM Plex Mono',monospace; color:var(--dim); }.li-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
+@media (max-width:980px) { .main { grid-template-columns:250px 1fr; }.canvas-area { padding:22px 20px 14px; }.workspace-intro { align-items:start; flex-direction:column; gap:12px; }.intro-copy { max-width:540px; }.header-tags .tag:nth-child(n+3) { display:none; } }
+@media (max-width:720px) { header { padding:16px 18px; }.brand-note { display:none; }.header-tags { gap:4px; }.header-tags .tag { font-size:8px; padding:3px 5px; }.main { display:block; }.sidebar { border-right:0; border-bottom:1px solid var(--border); max-height:none; }.canvas-area { padding:26px 14px 14px; }.canvas-grid,.log-area { grid-template-columns:1fr; }.canvas-grid { min-height:560px; }.canvas-panel { min-height:260px; }.status-bar { position:sticky; bottom:0; background:var(--panel); } }