:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html,body,#root{max-width:100%;min-height:100%;overflow-x:hidden}body{margin:0}button{font:inherit}.brand-mark{background:#e9653b;border-radius:9px;grid-template-columns:repeat(2,1fr);gap:3px;width:30px;height:30px;padding:5px;display:grid;transform:rotate(-5deg)}.brand-mark i{background:#fff7ea;border-radius:50%}.workspace{grid-template-columns:282px minmax(560px,1fr) 304px;min-height:calc(100vh - 64px);display:grid}.side-panel{z-index:1;padding:20px 18px;position:relative}.left-panel{border-right:1px solid #e6ded3}.right-panel{border-left:1px solid #e6ded3}.upload-box{text-align:center;cursor:pointer;background:#fcfaf5;border:1.5px dashed #c9bdae;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:126px;margin-top:7px;transition:all .18s;display:flex}.upload-box:hover{background:#fff7f1;border-color:#e9653b}.main-stage{min-width:0;padding:24px 28px 32px;container:preview-stage/inline-size}.canvas-area{place-items:center;min-height:650px;padding:52px;display:grid;position:relative;overflow:auto;background:#eae5dc!important}.floating-tools{z-index:3;gap:6px;position:absolute;top:16px;left:16px}.floating-tools button{background:#fffdf9;border:1px solid #e6ded3;box-shadow:0 2px 8px #3628190f}.zoom-control{z-index:3;align-items:center;gap:7px;padding:3px 7px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.annotated-grid{--cell-size:clamp(8px, 1.4vw, 17px);transform:scale(var(--zoom));transform-origin:50%;grid-template-rows:24px auto;grid-template-columns:30px auto;transition:transform .18s;display:grid}.annotated-grid .axis-top{grid-area:1/2;grid-template-columns:repeat(var(--cols), var(--cell-size));color:#756e65;text-align:center;font:600 10px/24px ui-sans-serif,system-ui,sans-serif;display:grid}.annotated-grid .axis-left{grid-area:2/1;grid-template-rows:repeat(var(--rows), var(--cell-size));color:#756e65;font:600 10px/var(--cell-size) ui-sans-serif, system-ui, sans-serif;text-align:right;padding-right:7px;display:grid}.annotated-grid .bead-grid{grid-area:2/2;transform:none}.bead-grid{--cell-size:clamp(8px, 1.4vw, 17px);grid-template-columns:repeat(var(--cols), var(--cell-size));grid-template-rows:repeat(var(--rows), var(--cell-size));transform:scale(var(--zoom));transform-origin:50%;background:#fffdf8;border:1px solid #afa69b;transition:transform .18s;display:grid;box-shadow:0 16px 40px #3e2c1b24}.grid-cell{width:var(--cell-size);height:var(--cell-size);cursor:crosshair;color:inherit;font:700 max(8px, calc(var(--cell-size) * .38))/1 ui-sans-serif, system-ui, sans-serif;text-align:center;background:0 0;border:1px solid #54483c21;border-top:0;border-left:0;margin:0;padding:0;position:relative}.grid-cell:after{content:"";z-index:0;background:var(--bead-color);border-radius:50%;position:absolute;inset:12%;box-shadow:inset 1px 1px #ffffff52,inset -1px -1px #0000001f}.grid-cell-label{z-index:1;width:100%;height:100%;font-size:max(8px, calc(var(--cell-size) * .38));place-items:center;font-weight:800;line-height:1;display:grid;position:relative}.grid-cell.empty:after{box-shadow:none}.square-grid .grid-cell:after{box-shadow:none;border-radius:0;inset:0}.grid-cell:hover{outline-offset:-1px;z-index:1;outline:2px solid #e9653b}.major-grid-lines .grid-cell.major-right{border-right:2px solid #d6534a}.major-grid-lines .grid-cell.major-bottom{border-bottom:2px solid #d6534a}.palette-grid{grid-template-columns:repeat(6,1fr);gap:7px;margin-top:8px;display:grid}.color-swatch{aspect-ratio:1;cursor:pointer;border:1px solid #302a242e;border-radius:7px;position:relative}.color-swatch.selected{outline-offset:2px;outline:3px solid #e9653b}.color-swatch.selected:after{content:"✓";color:#fff;text-shadow:0 1px 3px #000;place-items:center;font-weight:900;display:grid;position:absolute;inset:0}.print-meta{display:none}.export-switch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;margin:5px 0 14px;display:grid}.export-switch-grid .MuiFormControlLabel-root{min-width:0;margin:0}.export-switch-grid .MuiFormControlLabel-label{white-space:nowrap;font-size:.875rem}@media (width<=1180px){.workspace{min-height:calc(100vh - 57px);display:block;position:relative}.main-stage{min-height:calc(100vh - 57px);padding:20px 20px 28px}.left-panel,.right-panel{display:none}.mobile-toolbar{z-index:5;background:#fffdf9f0;border:1px solid #e6ded3;border-radius:12px;gap:6px;padding:5px;display:flex;position:fixed;top:78px;left:8px;box-shadow:0 8px 24px #3e2c1b24}}@media (width>=1181px){.mobile-toolbar{display:none}}html.preview-compact .canvas-area{scroll-behavior:auto;overflow-anchor:none;justify-items:start;min-height:560px;padding:52px 24px;display:block;overflow:auto}html.preview-compact .annotated-grid{width:max-content;min-width:max-content;margin:0;transform:none;--cell-size:var(--touch-preview-cell-size,22px)!important}html.preview-compact .annotated-grid .bead-grid{transform:none;--cell-size:var(--touch-preview-cell-size,22px)!important}html.preview-compact .annotated-grid .axis-top{z-index:2;background:#eae5dc;position:sticky;top:0}html.preview-compact .annotated-grid .axis-left{z-index:2;background:#eae5dc;position:sticky;left:0}html.preview-compact .floating-tools{width:max-content;height:0;position:sticky;top:8px;left:8px}@media (width<=820px){.MuiToolbar-root{gap:8px;min-height:56px;padding-inline:10px}.MuiToolbar-root>.MuiIconButton-root{display:none}.MuiToolbar-root .MuiButton-root,.MuiToggleButton-root{white-space:nowrap}.main-stage{padding:14px 8px 22px}.left-panel,.right-panel{padding:16px 12px}}html.preview-compact-xs .stage-header{margin-bottom:12px!important}html.preview-compact-xs .stage-header>.MuiBox-root{min-width:max-content}html.preview-compact-xs .stage-header .MuiTypography-root{white-space:nowrap}html.preview-compact-xs .stage-header .MuiTabs-root{min-height:42px}html.preview-compact-xs .canvas-area{overscroll-behavior:contain;touch-action:pan-x pan-y;border-radius:10px;min-height:500px;padding:48px 12px 64px}html.preview-compact-xs .grid-cell{touch-action:manipulation;-webkit-tap-highlight-color:transparent}html.preview-compact-xs .grid-cell-label{white-space:nowrap;font-size:10px}html.preview-compact-xs .floating-tools{top:8px;left:8px}html.preview-compact-xs .zoom-control{bottom:8px}@media (hover:none) and (pointer:coarse){.side-panel .MuiSlider-root{touch-action:pan-y}.grid-cell:hover{outline:none}}@media print{@page{margin:12mm}.MuiAppBar-root,.side-panel,.stage-header,.floating-tools,.zoom-control{display:none!important}.workspace{min-height:0;display:block}.main-stage{padding:0}.print-meta{margin-bottom:6mm;display:block}.canvas-area{min-height:0;padding:0;display:block;overflow:visible;background:0 0!important;border:0!important}.annotated-grid{--cell-size:6mm;margin:0 auto;transform:none!important}.annotated-grid .bead-grid{box-shadow:none}.grid-cell:after{display:none}}