@import"https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap";:root{--ink: #2a2621;--muted: #6a6156;--accent: #2f7b77;--accent-strong: #1e5f5c;--warm: #f4efe3;--panel: #fffdf7;--panel-edge: #e2d8c6;--danger: #a63b32;--shadow: 0 10px 24px rgba(42, 38, 33, .12);--app-topbar-height: 54px;--app-gap: 10px;--app-padding-vertical: 10px}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;font-family:IBM Plex Sans,system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 20%,#f9f5ea,#f1e8d7 45%,#efe3cf);min-height:100vh;padding:0 12px 10px;display:flex;flex-direction:column}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,#ffffff4d,#fff0);pointer-events:none}.auth-locked .layout,.auth-locked .topnav{pointer-events:none;filter:blur(1.5px)}.auth-gate{position:fixed;top:0;right:0;bottom:0;left:0;background:#181612a6;display:grid;place-items:center;z-index:300}.auth-gate[hidden]{display:none}.auth-panel{width:min(420px,90vw);background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:20px;display:grid;gap:12px;box-shadow:var(--shadow);text-align:center}.auth-brand{display:flex;justify-content:center}.auth-brand .brand-logo{height:48px;max-height:none;width:auto}.auth-form{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.auth-form input{padding:9px 10px;border-radius:10px;border:1px solid var(--panel-edge);font-family:inherit}.auth-error{font-size:12px;color:var(--danger);min-height:16px}.project-panel{width:min(520px,92vw);max-height:80vh}.project-list{display:grid;gap:8px;max-height:60vh;overflow:auto}.project-item{text-align:left;background:#fff;border:1px solid var(--panel-edge);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;box-shadow:none}.project-item:hover{background:#f6f1e8}.project-name{font-weight:600;color:var(--ink)}.project-meta{font-size:11px;color:var(--muted)}.project-info{display:grid;gap:4px}.project-actions{display:inline-flex;align-items:center;gap:6px}.project-actions button{padding:6px 8px;font-size:11px}.confirm-panel{width:min(420px,90vw);display:grid;gap:12px}.confirm-message{margin:0;color:var(--muted);font-size:13px;line-height:1.4}.confirm-actions{justify-content:flex-end}.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--muted);margin:0 0 8px}h1{font-family:Fraunces,serif;font-weight:600;font-size:30px;margin:0 0 8px}.subhead{margin:0;color:var(--muted);max-width:520px}.hero-meta{display:grid;gap:10px}.chip{background:var(--panel);border:1px solid var(--panel-edge);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted);box-shadow:var(--shadow)}.layout{display:grid;grid-template-columns:minmax(260px,320px) minmax(360px,1fr) minmax(240px,300px);gap:var(--app-gap);flex:1;min-height:0;align-items:stretch;grid-auto-rows:minmax(0,1fr);height:calc(100vh - var(--app-topbar-height) - var(--app-gap) - var(--app-padding-vertical))}.layout-three{grid-template-columns:minmax(260px,320px) minmax(360px,1fr) minmax(240px,300px)}body[data-mode=export] .layout{grid-template-columns:minmax(240px,320px) minmax(420px,1fr)}body[data-mode=export] #designPanel{display:none}body[data-mode=export] .view-panel{grid-column:2 / -1}body[data-mode=setup] .controls{grid-column:1}body[data-mode=setup] .view-panel{grid-column:2}body[data-mode=setup] #designPanel{grid-column:3}.layout>*{min-height:0}.topnav{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:6px 10px;margin-bottom:6px;box-shadow:var(--shadow)}.topnav.slim{min-height:52px;height:var(--app-topbar-height)}.brand{font-family:Fraunces,serif;font-weight:600;font-size:18px;margin-right:8px;display:inline-flex;align-items:center;gap:10px}.brand-logo{height:34px;max-height:calc(var(--app-topbar-height) - 16px);width:auto;display:block}.nav-inline{display:inline-flex;align-items:center;gap:6px}.nav-inline .label{font-size:10px;letter-spacing:.12em;margin:0}.nav-inline input[type=number]{width:64px}.nav-actions{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap}.nav-center{display:flex;align-items:center;justify-content:center;gap:8px;flex:1}body[data-mode=work] .nav-actions{margin-left:0}.menu{position:relative}.menu-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:9px;border:1px solid var(--panel-edge);background:#fff;color:var(--accent-strong);font-size:12px}.menu-btn::-webkit-details-marker{display:none}.menu[open] .menu-panel{display:grid}.menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:10;display:none;gap:6px;min-width:200px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:12px;padding:10px;box-shadow:var(--shadow)}.menu-panel button{width:100%;justify-content:flex-start}.nav-group{display:grid;gap:4px}.nav-group.nav-inline{display:inline-flex;align-items:center;gap:8px;flex-direction:row}.nav-group input[type=number]{width:78px}.size-controls.is-collapsed{display:none}.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:10px;animation:rise 1s ease-out both;min-height:0}.panel:nth-child(2){animation-delay:.1s}.panel:nth-child(3){animation-delay:.2s}.controls,.view-panel{overflow:auto;min-height:0;overscroll-behavior:contain}.panel-title{font-family:Fraunces,serif;font-weight:600;font-size:17px}details.section{border:1px solid var(--panel-edge);border-radius:12px;padding:6px 8px 8px;background:#fff}details.section>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}details.section>summary::-webkit-details-marker{display:none}details.section>summary:after{content:""}.summary-icon{width:24px;height:24px;border-radius:999px;border:1px solid var(--panel-edge);background:#f7f2e7;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease}.summary-icon .icon{width:12px;height:12px}details.section[open] .summary-icon{transform:rotate(180deg)}.section{display:grid;gap:8px}.section-card{border:1px solid var(--panel-edge);border-radius:12px;padding:6px 8px 8px;background:#fff;display:grid;gap:8px}.mode-group{display:none}.section-card.mode-group{display:none;--mode-display: grid}.palette-card{flex:1;min-height:0}.palette-card.mode-group{--mode-display: flex;flex-direction:column}.controls{display:flex;flex-direction:column}.palette-card .palette-list{max-height:none;flex:1}.palette-card .palette-list,.palette-card .toolbar{min-height:0}.palette-strip-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.palette-strip{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0;min-height:16px}.palette-mini-item{position:relative;width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.12);overflow:hidden}.palette-mini-swatch{width:100%;height:100%;display:block}.palette-mini-remove{position:absolute;top:-5px;right:-5px;width:11px;height:11px;border-radius:999px;background:#b33832;color:#fff;font-size:8px;line-height:1;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 4px #0003}.compact-btn{padding:6px 10px;font-size:11px}.icon-only{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center}.palette-strip .muted{font-size:11px}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#2a262173;display:flex;align-items:center;justify-content:center;z-index:200}.modal[hidden]{display:none}.modal-panel{width:min(520px,92vw);max-height:80vh;overflow:auto;background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:16px;box-shadow:var(--shadow)}.preview-modal{background:#181612b3}.preview-panel{width:100vw;height:100vh;max-height:none;border-radius:0;display:grid;grid-template-rows:auto 1fr;background:#fff}.preview-canvas-wrap{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}#previewCanvas{max-width:100%;max-height:100%;image-rendering:pixelated;background:#fff}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.preview-header{align-items:center}.preview-header .brand-logo{height:84px;max-height:none;width:auto}@media (max-width: 900px){.preview-header{padding-top:calc(40px + env(safe-area-inset-top,0px))}}.preview-meta{display:inline-flex;align-items:center;gap:10px}.palette-modal-list{display:grid;gap:8px}.palette-modal-item{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid var(--panel-edge);background:#fff}.palette-modal-item .swatch{width:18px;height:18px}.palette-remove-btn{background:#b33832;color:#fff;padding:6px 8px;border-radius:8px;font-size:11px;box-shadow:none}.grid-size-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.grid-size-row .nav-group input[type=number]{width:100%}body[data-mode=setup] .mode-group[data-mode~=setup],body[data-mode=work] .mode-group[data-mode~=work],body[data-mode=export] .mode-group[data-mode~=export]{display:var(--mode-display, block)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.inline-label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.panel-switch{margin-bottom:4px}.pane-hidden{display:none}.tab-pane{display:grid;gap:10px}.tab-pane.pane-hidden{display:none}.panel-switch.segmented{width:100%;display:flex;position:sticky;top:0;z-index:2;background:var(--panel);padding:4px;border-radius:12px;border:1px solid var(--panel-edge)}.mode-switch.segmented{padding:4px;border-radius:999px;border:1px solid var(--panel-edge);background:#fff;gap:2px}.panel-switch .segmented-btn{flex:1;text-align:center}.label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}input[type=search],input[type=text]{width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--panel-edge);font-size:13px;font-family:inherit}select{width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--panel-edge);font-size:13px;font-family:inherit;background:#fff}input[type=number]{padding:6px 8px;border-radius:9px;border:1px solid var(--panel-edge);font-size:13px;font-family:inherit;background:#fff}input[type=range]{width:100%;accent-color:var(--accent-strong)}.zoom-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.zoom-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.zoom-btn{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px}.zoom-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.toolbar{display:flex;gap:6px;flex-wrap:wrap}button,.file-btn{border:none;background:var(--accent);color:#fff;padding:7px 10px;border-radius:9px;font-family:inherit;font-size:12px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .2s ease;box-shadow:0 6px 16px #2f7b7733;display:inline-flex;align-items:center;gap:8px}button:hover,.file-btn:hover{transform:translateY(-1px);background:var(--accent-strong)}button.ghost,.file-btn.ghost{background:transparent;color:var(--accent-strong);border:1px solid var(--accent-strong);box-shadow:none}.eraser-btn{background:transparent;color:#7a2e41;border:1px solid #eab6c8;box-shadow:none}.eraser-btn:hover{background:transparent;color:#6a2336}.eraser-btn.active{background:#eea9bf;border-color:#d97998;color:#5a1c2d;box-shadow:0 0 0 2px #b94e6d59}button.ghost.active{background:var(--accent-strong);color:#fff}button.active{box-shadow:0 0 0 2px #2f7b774d}button.danger{background:var(--danger)}.palette-list{border:1px solid var(--panel-edge);border-radius:10px;padding:4px;max-height:200px;overflow:auto;display:grid;gap:4px;background:#fff}.palette-group-title{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);padding:6px 4px 2px}.palette-item{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:8px;transition:background .15s ease}.palette-item:hover{background:#f6f0e4}.swatch{width:16px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.1);display:inline-block}.active-color{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;border:1px solid var(--panel-edge);background:#fff}.active-info{display:grid;gap:2px}.active-line{display:flex;align-items:baseline;gap:8px}.active-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.selected-palette{display:flex;flex-wrap:wrap;gap:6px}body[data-mode=work] .layout{grid-template-columns:minmax(220px,280px) minmax(360px,1fr) minmax(240px,300px)}body[data-mode=work] .selected-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body[data-mode=work] .view-panel{gap:16px;padding:12px}body[data-mode=work] .view-panel .section{padding:10px 12px 12px}body[data-mode=work] .mini-wrap{width:220px;height:220px}body[data-mode=work] .selected-palette .color-chip{width:100%;justify-content:flex-start;align-items:center;text-align:left;padding:8px}body[data-mode=work] .selected-palette .swatch{width:18px;height:18px}body[data-mode=work] .selected-palette .chip-meta{display:grid;gap:2px;line-height:1.1}body[data-mode=work] .selected-palette .chip-code{font-weight:600}body[data-mode=work] .selected-palette .chip-name{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.symbol-list{border:1px solid var(--panel-edge);border-radius:10px;padding:4px;max-height:170px;overflow:auto;display:grid;gap:6px;background:#fff}.symbol-row{display:grid;grid-template-columns:30px 1fr 100px;align-items:center;gap:6px}.symbol-preview{width:28px;height:28px;border-radius:6px;border:1px solid var(--panel-edge);display:grid;place-items:center;background:#f7f2e7;font-weight:600}.color-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;border:1px solid var(--panel-edge);background:#fff;color:var(--ink);box-shadow:none;cursor:pointer;font-size:11px;transition:transform .15s ease,box-shadow .15s ease}.color-chip.active{box-shadow:0 0 0 2px #2f7b7766;transform:translateY(-1px)}.canvas-panel{gap:10px;display:flex;flex-direction:column;min-height:0;position:relative;height:100%}.canvas-wrap{border:1px solid var(--panel-edge);border-radius:12px;background:#fff;padding:4px;overflow:hidden;flex:1;min-height:0;height:100%;display:flex}.canvas-wrap.design-wrap{border:none;padding:0;background:transparent}.design-wrap.is-zoomed{overflow:auto;scrollbar-gutter:stable both-edges;place-items:start;padding-right:14px;padding-bottom:14px}.design-wrap{position:relative;flex:1;min-height:320px;max-height:100%;display:grid;place-items:center;overflow:hidden}.design-wrap .fit-stage{position:relative;width:100%;height:100%;display:grid;place-items:center}body[data-mode=work] .design-wrap,body[data-mode=work] .design-wrap .fit-stage{align-items:start;justify-items:center}.design-wrap.panning{cursor:grab}.design-wrap.panning:active{cursor:grabbing}.design-wrap.is-eraser #designCanvas{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='3.5' fill='none' stroke='%23d66a8d' stroke-width='1.5'/%3E%3Cline x1='9' y1='1' x2='9' y2='5' stroke='%23d66a8d' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='9' y1='13' x2='9' y2='17' stroke='%23d66a8d' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='1' y1='9' x2='5' y2='9' stroke='%23d66a8d' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='13' y1='9' x2='17' y2='9' stroke='%23d66a8d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 9 9,crosshair}canvas{display:block;background:#fff;border:none;image-rendering:pixelated}.output-pair{display:grid;grid-template-columns:1fr;gap:10px}.output-card{border:1px solid var(--panel-edge);border-radius:12px;padding:10px;background:#fff;display:grid;gap:8px}.output-card.is-hidden{display:none}.output-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.segmented{display:inline-flex;border:1px solid var(--panel-edge);border-radius:999px;overflow:hidden;background:#fff}.segmented-btn{border:none;background:transparent;color:var(--accent-strong);padding:6px 12px;font-size:12px;cursor:pointer;box-shadow:none;border-radius:0;transform:none}.segmented-btn.active{background:var(--accent-strong);color:#fff}.segmented-btn:hover{background:#2f7b771f;transform:none}.toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.spec-sheet{display:grid;gap:10px;font-size:11px;color:var(--ink)}.spec-sheet table{width:100%;border-collapse:collapse}.spec-sheet th,.spec-sheet td{padding:6px;border-bottom:1px solid var(--panel-edge);text-align:left}.spec-sheet th{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.spec-sheet .spec-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.spec-sheet .spec-meta{font-size:11px;color:var(--muted)}.output-card .canvas-wrap{display:flex;align-items:center;justify-content:center}.output-card img{width:auto;height:auto;max-width:100%;max-height:60vh;display:block;image-rendering:pixelated}.output-section.hidden{display:none}.output-section{min-height:0}.sub-title{font-size:12px;color:var(--muted);margin-bottom:8px}#designCanvas{touch-action:none;cursor:crosshair}.legend{display:grid;gap:6px;font-size:11px;color:var(--muted)}.legend-item{display:flex;align-items:center;gap:8px}.legend-symbol{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;background:#f1ede4;color:var(--ink);font-weight:600}.hint{font-size:11px;color:var(--muted)}.mini-map{display:grid;gap:6px}.mini-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.mini-wrap{position:relative;width:180px;height:180px;border-radius:0;border:1px solid var(--panel-edge);background:#fff;overflow:hidden;margin-top:4px}#miniCanvas{width:100%;height:100%;display:block;image-rendering:pixelated;border-radius:0}.mini-viewport{position:absolute;border:2px solid var(--accent-strong);background:#2f7b771a;pointer-events:none;box-sizing:border-box}.file-btn{display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.icon{width:14px;height:14px;stroke:currentColor;fill:none}.file-btn input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.muted{color:var(--muted);font-size:11px}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (min-width: 1101px){#designPanel{grid-column:2}}@media (max-width: 1100px) and (orientation: landscape){body{padding:6px 12px 10px;overflow:hidden}.layout{grid-template-columns:minmax(220px,280px) minmax(340px,1fr) minmax(220px,280px);height:calc(100vh - var(--app-topbar-height) - var(--app-gap) - 16px)}#designPanel,.view-panel{grid-column:auto;min-height:0}#designPanel{height:100%}}@media (max-width: 1100px) and (orientation: portrait){body{padding:8px 12px 12px}.layout{grid-template-columns:1fr;height:auto}.view-panel{order:3}}@media (max-width: 900px) and (orientation: portrait){.topnav{flex-direction:column;align-items:stretch}.nav-group,.output-pair{grid-template-columns:1fr}.canvas-wrap{max-height:65vh}.mini-wrap{width:100%;height:auto;aspect-ratio:1 / 1}}@media (max-width: 700px){.toolbar{flex-direction:column;align-items:stretch}button,.file-btn{width:100%;justify-content:center}}@media (min-width: 1101px){body[data-mode=setup] .controls{grid-column:1;grid-row:1}body[data-mode=setup] .view-panel{grid-column:2;grid-row:1}body[data-mode=setup] #designPanel{grid-column:3;grid-row:1}}