layout-main{}layout-main main{display:flex;flex-direction:column;align-items:center;padding:2rem}layout-main section.gauges{display:flex;justify-content:center;gap:8px;margin-bottom:1rem}layout-main #layer-activations{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:1rem}layout-main #layer-activations canvas{display:block;border:1px solid var(--draw-color-surface)}layout-main .gauge{display:flex;flex-direction:column;align-items:center;width:24px}layout-main .gauge-fill{width:100%;height:100px;background:var(--draw-color-surface);border:1px solid var(--draw-color-surface);border-radius:4px;position:relative;overflow:hidden}layout-main .gauge-fill::after{content:'';position:absolute;bottom:0;left:0;right:0;height:0%;background:var(--draw-color-primary);transition:height 150ms ease-out}layout-main .gauge[data-probability] .gauge-fill::after{height:calc(var(--probability,0) * 100%)}layout-main .gauge[data-confidence=high] .gauge-fill::after{background:#27ae60}layout-main .gauge[data-confidence=medium] .gauge-fill::after{background:#f39c12}layout-main .gauge[data-confidence=low] .gauge-fill::after{background:#e74c3c}layout-main .gauge span{margin-top:.5rem;font-size:.875rem;font-weight:600;color:var(--text-color-surface)}layout-main section.canvas-container{display:flex;justify-content:center}layout-main .canvas{display:grid;grid-template-columns:repeat(20,20px);grid-template-rows:repeat(20,20px);gap:1px;cursor:crosshair;touch-action:none;user-select:none}layout-main .cell{width:20px;height:20px;background:var(--background-color-surface);border:1px solid var(--draw-color-surface);box-sizing:border-box;transition:background-color 50ms ease}layout-main .cell[data-fill]{background:color-mix(in srgb,var(--text-color-surface) calc(var(--fill) * 100%),var(--background-color-surface))}layout-main section.controls{display:flex;justify-content:center;align-items:center;gap:1.5rem;margin-top:1.5rem}layout-main label.checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:var(--text-color-surface)}layout-main label.checkbox input[type=checkbox]{width:1rem;height:1rem;cursor:pointer}layout-main #reset-btn,layout-main #sample-btn{padding:.5rem 1.5rem;font-size:.875rem;font-weight:600;color:var(--background-color-surface);background:var(--draw-color-primary);border:none;border-radius:4px;cursor:pointer;transition:background-color 150ms ease}layout-main #reset-btn:hover,layout-main #sample-btn:hover{background:var(--text-color-primary)}layout-main #reset-btn:active,layout-main #sample-btn:active{transform:scale(.98)}#drawing-options{display:flex;flex-direction:column;gap:.75rem}#drawing-options .control-group{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;color:var(--text-color-surface)}#drawing-options .control-group input[type=range]{width:80px;cursor:pointer}#drawing-options .control-toggle{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-color-surface);cursor:pointer}#drawing-options .control-toggle input[type=checkbox]{width:1rem;height:1rem;cursor:pointer}#model-list{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch;gap:.25rem}#model-list a.item{display:block;padding:.5rem .75rem;text-decoration:none;color:var(--text-color-surface);border-radius:4px;transition:background-color 150ms ease}#model-list a.item:hover{background:var(--draw-color-surface)}#model-list a.item.active{background:var(--draw-color-primary);color:var(--background-color-surface)}