:root{color-scheme:light;--ink: #101014;--muted: #5a6169;--paper: #f4f0e8;--sunset: #eec9a8;--sage: #b7c2a3;--ocean: #7aa7c7;--accent: #b45b3d;--panel: rgba(255, 255, 255, .78);--panel-border: rgba(16, 16, 20, .08);--shadow: 0 18px 40px rgba(16, 16, 20, .14);--radius-lg: 24px;--radius-md: 16px}*{box-sizing:border-box}body{margin:0;font-family:Work Sans,Gill Sans,Trebuchet MS,sans-serif;color:var(--ink);background:radial-gradient(circle at top,#fff5ea,#f2ede6 35%,#e5e1d8),linear-gradient(130deg,#7aa7c72e,#b7c2a333);min-height:100vh}.shell{display:flex;flex-direction:column;gap:24px;padding:32px 32px 40px;animation:fadeIn .6s ease-out}.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}.brand{max-width:560px}.eyebrow{text-transform:uppercase;letter-spacing:.26em;font-size:.72rem;margin:0 0 12px;color:var(--accent)}.brand h1{font-family:Fraunces,Iowan Old Style,Palatino,serif;font-size:clamp(2rem,3.4vw,3.2rem);margin:0 0 12px}.subhead{margin:0;color:var(--muted);line-height:1.6}.top-actions{display:flex;gap:12px;flex-wrap:wrap}button,select,input{font:inherit}button{border:none;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 8px 16px #1010142e}button:hover{transform:translateY(-1px);box-shadow:0 12px 24px #1010142e}button.ghost{background:transparent;border:1px solid rgba(16,16,20,.2);color:var(--ink);box-shadow:none}.toggle-group{display:inline-flex;background:#10101414;border-radius:999px;padding:4px}.toggle{border-radius:999px;background:transparent;color:var(--muted);box-shadow:none}.toggle.active{background:var(--ink);color:#fff}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}.canvas-panel{background:var(--panel);border-radius:var(--radius-lg);padding:20px;border:1px solid var(--panel-border);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.canvas-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.file-input{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--accent);color:#fff;border-radius:999px;cursor:pointer;box-shadow:0 8px 16px #b45b3d4d}.file-input input{position:absolute;inset:0;opacity:0;cursor:pointer}.canvas-wrap{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid rgba(16,16,20,.14);background:linear-gradient(135deg,#fff6,#ffffffe6);min-height:420px}canvas{width:100%;height:100%;display:block}.empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:1rem;pointer-events:none}.canvas-hint{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}.control-panel{background:var(--panel);border-radius:var(--radius-lg);padding:20px;border:1px solid var(--panel-border);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:visible}.panel-block{display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px dashed rgba(16,16,20,.12);animation:slideUp .6s ease forwards;opacity:0}.panel-block:nth-child(1){animation-delay:.12s}.panel-block:nth-child(2){animation-delay:.2s}.panel-block:nth-child(3){animation-delay:.28s}.panel-block:last-child{border-bottom:none}.panel-block h2{margin:0;font-family:Fraunces,Iowan Old Style,Palatino,serif;font-size:1.2rem}.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,120px);gap:10px}input,select{border-radius:12px;border:1px solid rgba(16,16,20,.2);padding:10px 12px;background:#fff;width:100%}select{min-width:0}.readout{background:#1010140f;padding:10px 12px;border-radius:12px;font-size:.92rem;color:var(--muted)}.button-row{display:flex;gap:10px;flex-wrap:wrap}.checkbox{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted)}.checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.detect-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}button.icon-button{width:40px;height:40px;border-radius:12px;padding:0;background:#fff;border:1px solid rgba(16,16,20,.18);color:var(--ink);box-shadow:none;display:grid;place-items:center;font-size:1rem}button.icon-button:hover{transform:translateY(-1px);box-shadow:0 8px 18px #1010141f}button.icon-button .icon{width:20px;height:20px}button.icon-button.tooltip{position:relative}button.icon-button.tooltip:after,button.icon-button.tooltip:before{opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;transform:translateY(6px)}button.icon-button.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px);background:#101014eb;color:#fff;padding:6px 10px;border-radius:8px;font-size:.78rem;white-space:nowrap;box-shadow:0 10px 30px #10101433;z-index:2}button.icon-button.tooltip:before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%,6px);border-width:6px;border-style:solid;border-color:rgba(16,16,20,.92) transparent transparent transparent;z-index:1}button.icon-button.tooltip:hover:after,button.icon-button.tooltip:hover:before,button.icon-button.tooltip:focus-visible:after,button.icon-button.tooltip:focus-visible:before{opacity:1;transform:translate(-50%)}button.small{padding:6px 12px;font-size:.82rem}.swatch{min-width:88px;padding:8px 12px;border-radius:999px;background:#10101414;border:1px solid rgba(16,16,20,.14);text-align:center;font-size:.82rem;color:var(--muted)}.slider{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}.slider span{min-width:140px}.slider input[type=range]{accent-color:var(--accent)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.92rem}th,td{text-align:left;padding:8px 6px;border-bottom:1px solid rgba(16,16,20,.1)}th{color:var(--muted);font-weight:600}tfoot th{padding-top:12px}.muted{color:var(--muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:960px){.workspace{grid-template-columns:1fr}.control-panel{order:-1}.canvas-wrap{min-height:320px}}