:root{--paper: #e9e7e2;--ink: #1a1a18;--ink-soft: #55534e;--ink-faint: #8d8a83;--hairline: #1a1a18;--select: #1a1a18;--focus: #b4502a}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--paper);color:var(--ink);font-family:Inter,Segoe UI,Helvetica Neue,system-ui,sans-serif;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}#toolbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 22px 12px;background:var(--paper);border-bottom:1.5px solid var(--hairline);z-index:10}.brand{display:flex;flex-direction:column;margin-right:14px}#toolbar h1{font-size:17px;margin:0;letter-spacing:.4px;color:var(--ink);font-weight:600;white-space:nowrap}#status-line{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;letter-spacing:.3px;margin-top:2px}.ctrl-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 16px;border-left:1px solid #c8c5be}.ctrl-group label{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-soft);white-space:nowrap;letter-spacing:.2px}button{background:transparent;border:1px solid var(--ink);color:var(--ink);padding:6px 16px;border-radius:999px;cursor:pointer;font-size:12px;font-family:inherit;letter-spacing:.3px;transition:background .15s,color .15s;white-space:nowrap}button:hover{background:var(--ink);color:var(--paper)}button.primary{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}button.primary:hover{background:#3a3935;border-color:#3a3935}.primary-group{gap:8px;padding-left:0;border-left:none}select,input[type=number],input[type=text]{background:transparent;color:var(--ink);border:none;border-bottom:1px solid var(--ink-soft);border-radius:0;padding:4px 2px;font-size:12px;font-family:inherit}select:focus,input:focus{outline:none;border-bottom-color:var(--ink)}select option{background:var(--paper);color:var(--ink)}input[type=number]{width:46px}input[type=text]{width:110px}input[type=range]{width:90px;accent-color:var(--ink)}main{display:flex;flex:1;min-height:0}#grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:10px;padding:12px 14px 14px;min-width:0;z-index:5}.cell{position:relative;background:transparent;border:1px solid #b9b6af;border-radius:10px;cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s;touch-action:none}.cell:hover{border-color:var(--ink-soft)}.cell.selected{border:2px solid var(--select);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--select)}.cell.focused{border-color:var(--focus)}.cell.selected.focused{border-color:var(--select);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--focus)}.cell .tag{position:absolute;left:9px;bottom:7px;font-size:10px;letter-spacing:.4px;color:#71717f;pointer-events:none}#grid-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;pointer-events:none}@media (max-width: 1100px){#grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}}@media (max-width: 820px){html,body{overflow-y:auto;height:auto}#app{height:auto;min-height:100vh}#toolbar{position:sticky;top:0;gap:8px;padding:10px 12px}.ctrl-group{border-left:none;border-top:1px solid #c8c5be;width:100%;padding:8px 0 2px}.primary-group{border-top:none;padding-top:0}.primary-group button{flex:1;padding:9px 12px;font-size:13px}input[type=range]{flex:1;min-width:60px}input[type=text]{flex:1;min-width:80px}#grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:auto}.cell{aspect-ratio:1 / 1}}