.screen--draw.active{ display:flex; flex-direction:column; background: var(--paper); } .draw-topbar{ display:flex; align-items:center; justify-content:space-between; padding: 16px 24px; border-bottom: 1.5px solid var(--line); flex-shrink:0; } .draw-hello{ margin:0; font-size:0.95rem; color: var(--ink-soft); } .draw-hello strong{ color: var(--ink); } .draw-body{ flex:1; display:flex; gap:22px; padding: 22px; min-height:0; } .canvas-frame{ flex:1; display:flex; align-items:center; justify-content:center; min-width:0; } .canvas-square{ position:relative; width:min(70vh, 70vw, 640px); height:min(70vh, 70vw, 640px); background: var(--paper-deep); box-shadow: 0 24px 50px -20px rgba(51,41,58,0.35); touch-action: none; border-radius: 2px; overflow: hidden; } .canvas-square.panning{ cursor: grabbing; } .canvas-square.panning .canvas-transform-wrap canvas{ cursor: grabbing; } .canvas-transform-wrap{ position:absolute; inset:0; background: #fff; box-shadow: 0 0 0 1px rgba(51,41,58,0.12); transform-origin: 0 0; touch-action: none; will-change: transform; } .canvas-transform-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:none; } #layer-color{ z-index:1; } #layer-lineart{ z-index:2; } .brush-cursor{ position:absolute; border-radius:50%; border: 1.5px solid var(--ink); background: rgba(51,41,58,0.06); transform: translate(-50%,-50%); pointer-events:none; z-index:5; opacity:0; transition: opacity .1s ease; } .brush-cursor.visible{ opacity:1; } .brush-cursor.is-eraser{ border-style: dashed; border-color: #a8442b; background: rgba(168,68,43,0.08); } .toolbar{ width: 220px; flex-shrink:0; display:flex; flex-direction:column; gap:22px; padding: 4px 4px 4px 0; overflow-y:auto; } .tool-group{ display:flex; flex-direction:column; gap:8px; } .tool-label{ font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); } .segmented{ display:flex; border:1.5px solid var(--line); border-radius:3px; overflow:hidden; } .seg-btn{ flex:1; background: var(--card-bg); border:none; cursor:pointer; padding:10px 6px; font-size:0.85rem; color: var(--ink-soft); font-weight:700; border-right: 1.5px solid var(--line); } .seg-btn:last-child{ border-right:none; } .seg-btn.active{ background: var(--ink); color: var(--paper); } input[type=range]{ width:100%; accent-color: var(--ochre); } .colorwheel-wrap{ position:relative; width:100%; max-width:190px; aspect-ratio: 1 / 1; margin: 0 auto; touch-action:none; } .cw-canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:pointer; } .colorwheel-hex-row{ display:flex; align-items:center; gap:8px; margin-top:12px; } .cw-swatch{ width:32px; height:32px; flex-shrink:0; border-radius:6px; border: 1.5px solid var(--line); box-shadow: inset 0 0 0 2px var(--card-bg); } .cw-hex-input{ flex:1; min-width:0; border: 1.5px solid var(--line); background: var(--paper); border-radius:3px; padding: 8px 10px; font-family: var(--font-mono); font-size:0.85rem; color: var(--ink); text-transform: lowercase; } .cw-hex-input:focus{ outline: 2px solid var(--ochre); outline-offset: 1px; } .tool-hint{ font-size:0.78rem; color: var(--ink-soft); line-height:1.5; margin-top:auto; }