:root{--bg-base: #F0F0EB;--bg-surface: #FDFDFB;--bg-panel: #E6E6E1;--text-primary: #111111;--text-secondary: #4A4A48;--text-tertiary: #888884;--accent-color: #E65100;--border-color: #A3A39F;--border-hard: #1A1A1A;--nav-bg: rgba(240, 240, 235, .96);--grid-opacity: .06;--space-xs: .5rem;--space-sm: 1.25rem;--space-md: 2.5rem;--space-lg: 6rem;--space-xl: 12rem;--max-width: 960px;--header-height: 72px;--font-sans: "Inter", system-ui, sans-serif;--font-pixel: "Silkscreen", monospace;--font-mono: "Menlo", "Consolas", monospace;--leading-base: 1.7;--rgb-shift-x: 0px;--rgb-shift-y: 0px}[data-status=OFFLINE]{--bg-base: #0F0F10;--bg-surface: #18181A;--bg-panel: #222224;--text-primary: #E0E0E0;--text-secondary: #A0A0A0;--text-tertiary: #555555;--accent-color: #00E676;--border-color: #333333;--border-hard: #555555;--nav-bg: rgba(15, 15, 16, .96);--grid-opacity: .1}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-sans);font-size:1rem;line-height:var(--leading-base);color:var(--text-primary);background-color:var(--bg-base);background-image:linear-gradient(rgba(128,128,128,var(--grid-opacity)) 1px,transparent 1px),linear-gradient(90deg,rgba(128,128,128,var(--grid-opacity)) 1px,transparent 1px);background-size:24px 24px;background-position:center top}a{color:var(--accent-color);text-decoration:none}a:hover{text-decoration:underline}.tools-shell{display:flex;flex-direction:column;min-height:100vh}.tools-header{border-bottom:2px solid var(--border-hard);background:var(--nav-bg)}.tools-header-inner{max-width:var(--max-width);margin:0 auto;padding:var(--space-xs) var(--space-sm);display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}.tools-logo{font-family:var(--font-mono);font-size:.85rem;font-weight:500;letter-spacing:.04em;color:var(--text-primary);text-decoration:none}.tools-logo:hover{text-decoration:none;color:var(--accent-color)}.tools-nav{display:flex;gap:var(--space-sm);font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}.tools-nav a{color:var(--text-secondary);text-decoration:none}.tools-nav a:hover{color:var(--accent-color);text-decoration:none}.tools-main{flex:1;max-width:var(--max-width);width:100%;margin:0 auto;padding:var(--space-md) var(--space-sm) var(--space-md)}.tools-footer{border-top:2px solid var(--border-hard);padding:var(--space-sm);font-family:var(--font-mono);font-size:.7rem;color:var(--text-tertiary);text-align:center}.page-title{font-family:var(--font-mono);font-size:clamp(1.25rem,3vw,1.75rem);font-weight:500;margin:0 0 .5rem;letter-spacing:.02em}.page-lead{margin:0 0 var(--space-md);color:var(--text-secondary);max-width:40rem}.tool-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}.tool-list a{display:block;padding:1rem 1.25rem;background:var(--bg-surface);border:2px solid var(--border-hard);color:var(--text-primary);text-decoration:none;font-weight:500;box-shadow:2px 2px 0 var(--border-color)}.tool-list a:hover{border-color:var(--accent-color);text-decoration:none;box-shadow:4px 4px 0 var(--accent-color)}.tool-list-desc{display:block;margin-top:.25rem;font-size:.875rem;font-weight:400;color:var(--text-secondary)}.panel{background:var(--bg-surface);border:2px solid var(--border-hard);padding:1.25rem;margin-bottom:1.25rem;box-shadow:2px 2px 0 var(--border-color)}.panel-title{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 1rem;color:var(--text-tertiary)}.form-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1rem}.form-row:last-child{margin-bottom:0}label{font-size:.875rem;color:var(--text-secondary)}input[type=file]{font-size:.875rem}input[type=range]{flex:1;min-width:8rem;max-width:16rem;accent-color:var(--accent-color)}.btn{font-family:var(--font-mono);font-size:.8rem;padding:.5rem 1rem;border:2px solid var(--border-hard);background:var(--bg-panel);color:var(--text-primary);cursor:pointer;box-shadow:2px 2px 0 var(--border-color)}.btn:hover:not(:disabled){border-color:var(--accent-color);color:var(--accent-color)}.btn-primary{background:var(--accent-color);border-color:var(--border-hard);color:#fff}.btn-primary:hover:not(:disabled){background:#c44100;color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-active{border-color:var(--accent-color);color:var(--accent-color)}.color-swatch{width:2rem;height:2rem;border:2px solid var(--border-hard);flex-shrink:0}.notice{font-size:.875rem;color:var(--text-secondary);padding:.75rem 1rem;background:var(--bg-panel);border-left:3px solid var(--accent-color);margin-bottom:1.25rem}.preview-wrap{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}.preview-box{flex:1;min-width:min(100%,280px)}.preview-label{font-family:var(--font-mono);font-size:.7rem;color:var(--text-tertiary);margin-bottom:.5rem}.preview-canvas-wrap{border:2px solid var(--border-hard);background:linear-gradient(45deg,var(--border-color) 25%,transparent 25%),linear-gradient(-45deg,var(--border-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--border-color) 75%),linear-gradient(-45deg,transparent 75%,var(--border-color) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:var(--bg-surface);display:inline-block;max-width:100%;overflow:auto}.preview-canvas-wrap canvas{display:block;max-width:100%;height:auto;cursor:crosshair}.tolerance-value{font-family:var(--font-mono);font-size:.8rem;min-width:2.5rem}.error-text{color:#b71c1c;font-size:.875rem;margin-top:.5rem}