@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@500;600;650;700;750;800&display=swap');
:root{--ink:#202437;--muted:#727586;--accent:#df275b;--accent-light:#fff0f5;--line:#e7e8ee;--paper:#fff;--background:#f7f8fb;font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:var(--ink);font-size:16px;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--background)}button,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.33;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #e33671;outline-offset:4px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-family:Manrope,system-ui,sans-serif}h1,h2{font-size:1.4rem;font-weight:800;letter-spacing:-.055rem}h3{font-size:.9375rem;font-weight:750}button{border:0;background:none;color:inherit}a{color:inherit}.site-header{min-height:82px;padding:18px 40px;display:flex;align-items:center;gap:28px;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;font-size:1.6rem;font-weight:800;letter-spacing:-.065rem;text-decoration:none;white-space:nowrap}.brand-dot{color:var(--accent)}.brand-mark{width:31px;height:31px;display:grid;grid-template-columns:repeat(2,12px);grid-template-rows:repeat(2,12px);gap:4px;margin-right:13px;transform:rotate(-6deg)}.brand-mark i{background:var(--accent);border-radius:3px}.brand-mark i:nth-child(2){background:#ffb93c}.brand-mark i:nth-child(3){background:#7658d8}.brand-mark i:nth-child(4){background:#229f99}.header-note{font-size:.875rem;color:var(--muted);margin-left:18px}.series-tag{font-size:.875rem;font-weight:650;margin-left:auto;padding:8px 12px;border:1px solid var(--line);border-radius:7px;white-space:nowrap}.series-tag span{color:var(--muted);font-weight:400;margin-left:8px;padding-left:9px;border-left:1px solid var(--line)}.workspace{display:grid;grid-template-columns:310px minmax(0,1fr);gap:32px;max-width:1420px;margin:0 auto;padding:32px 40px 20px}.palette-panel{background:#fff;border:1px solid var(--line);border-radius:14px;align-self:start;overflow:hidden;box-shadow:0 3px 10px #22273803}.panel-heading{padding:23px 22px 18px;display:flex;align-items:center;justify-content:space-between;gap:8px}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.13em;color:var(--muted);margin-bottom:7px}.color-count{padding:4px 7px;background:#f1f2f6;border-radius:5px;font-size:.75rem;color:var(--muted)}.selected-color{margin:0 20px 19px;padding:13px;display:flex;align-items:center;gap:12px;border-radius:9px;background:var(--accent-light);border:1px solid #f6d6e1}.selected-swatch{width:43px;height:43px;border-radius:7px;box-shadow:inset 0 0 0 1px #00000013;flex:none}.selected-color>div{display:flex;flex-direction:column;min-width:0}.selected-color strong{font-size:.9375rem;font-weight:650;line-height:1.45}.selected-color #selected-code{font-size:.8125rem;color:var(--muted);line-height:1.5}.meta-label{font-size:.75rem;letter-spacing:.085em;font-weight:700;color:var(--accent);margin-bottom:1px}.selected-tick{margin-left:auto;color:var(--accent);font-weight:700;font-size:1.25rem}.palette-scroll{padding:2px 20px 9px;max-height:510px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d9dce5 transparent}.palette-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px 6px}.palette-section-label{grid-column:1/-1;color:var(--muted);font-size:.75rem;font-weight:650;padding-top:11px;padding-bottom:1px}.palette-section-label:first-child{padding-top:0}.swatch-button{padding:3px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;border-radius:7px;border:2px solid transparent;font-size:.875rem;transition:background .13s,transform .13s}.swatch-button:hover{background:#f3f4f8;transform:translateY(-1px)}.swatch-button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-light);color:var(--accent);font-weight:700}.color-chip{width:100%;aspect-ratio:1;border-radius:6px;box-shadow:inset 0 0 0 1px #00000018;position:relative;display:block}.color-chip:after{content:'';position:absolute;inset:36%;border-radius:50%;background:#ffffffc0;box-shadow:inset 0 1px 2px #00000024}.palette-footnote{font-size:.75rem;line-height:1.7;color:var(--muted);border-top:1px solid var(--line);padding:14px 20px}.palette-footnote a{text-underline-offset:3px}.editor{min-width:0}.editor-heading{min-height:64px;display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.size-control{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.875rem}.size-control select{color:var(--ink);font-size:.875rem;font-weight:550;padding:9px 31px 9px 12px;background:#fff;border:1px solid #dde0e9;border-radius:7px;min-height:39px}.toolbar{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:#fff;flex-wrap:wrap}.tool-group,.history-group{display:flex;align-items:center;gap:4px}.tool{display:flex;align-items:center;gap:8px;padding:9px 12px;min-height:39px;border-radius:7px;font-size:.875rem;font-weight:550}.tool:hover,.icon-button:hover,.clear-button:hover{background:#f0f2f7}.tool.active{background:var(--accent-light);color:var(--accent)}kbd{font-family:inherit;font-weight:400;font-size:.75rem;opacity:.65;margin-left:9px}.toolbar-divider{width:1px;height:22px;background:var(--line)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:6px}.clear-button{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.875rem;padding:9px;border-radius:6px}.canvas-stage{background:#edf0f6;border:1px solid #dfe2eb;border-top:1px solid var(--line);border-radius:0 0 12px 12px;padding:22px 18px 0;background-image:radial-gradient(#cdd1dd 1px,transparent 1px);background-size:14px 14px}.board-scroll{height:clamp(340px,56vh,590px);overflow:auto;display:flex;scrollbar-width:thin;scrollbar-color:#c6cad7 transparent;padding:10px 13px 18px}.board-wrap{position:relative;margin:auto;flex-shrink:0;padding-top:19px;padding-left:23px}canvas{display:block;background:#fff;box-shadow:0 5px 22px #25304b0d,0 0 0 1px #c9cedb;cursor:crosshair;touch-action:none;outline-offset:5px!important}.board-ruler{position:absolute;left:23px;right:0;top:0;height:16px;display:grid;font-size:.75rem;color:#9296a7;text-align:center}.row-ruler{position:absolute;left:0;bottom:0;top:19px;width:18px;display:grid;align-items:center;text-align:center;font-size:.75rem;color:#9296a7}.canvas-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;font-size:.75rem;color:#7c8294}.zoom-controls{display:flex;align-items:center;gap:5px}.zoom-controls #zoom-level{width:55px;text-align:center;font-variant-numeric:tabular-nums}.zoom-controls .icon-button{height:31px;width:31px}.zoom-controls svg{width:16px;height:16px}.editor-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 1px;font-size:.8125rem;color:var(--muted);line-height:1.6}.editor-footer p{display:flex;align-items:baseline;gap:7px}.hint-dot{height:6px;width:6px;background:var(--accent);border-radius:2px;flex:none}.editor-footer #bead-total{font-weight:550;color:var(--ink);white-space:nowrap}.used-colors{margin-top:7px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:16px 18px}.used-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.used-heading>span{color:var(--muted);font-size:.75rem}.empty-colors{font-size:.8125rem;color:var(--muted);padding-bottom:3px}#used-list{display:flex;flex-wrap:wrap;gap:7px}.used-item{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:.8125rem}.used-item span{width:16px;height:16px;border-radius:3px;box-shadow:inset 0 0 0 1px #00000020}.used-item b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:2px}.site-footer{padding:4px 40px 24px;text-align:center;color:#9295a3;font-size:.75rem}.site-footer>span{margin:0 8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{padding:30px;border:1px solid var(--line);border-radius:15px;max-width:430px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 20px 80px #1b1e3940}dialog::backdrop{background:#20243766;backdrop-filter:blur(3px)}dialog h2{margin:15px 0 9px}dialog p{font-size:.9375rem;line-height:1.6;color:var(--muted)}.dialog-icon{color:var(--accent);padding:10px;background:var(--accent-light);border-radius:10px;display:inline-flex}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.primary-button,.secondary-button{padding:11px 16px;border-radius:7px;font-size:.875rem;font-weight:600;min-height:42px}.primary-button{background:var(--accent);color:#fff}.secondary-button{background:#f0f2f6}.primary-button:hover{background:#c71b4b}
@media(min-width:1600px){.workspace{gap:42px}.board-scroll{height:610px}.palette-scroll{max-height:570px}}@media(max-width:1050px){.site-header{padding:18px 25px}.workspace{padding:26px 25px 18px;grid-template-columns:265px minmax(0,1fr);gap:22px}.header-note{display:none}.panel-heading{padding:20px 16px 18px}.panel-heading h1{font-size:1.25rem}.selected-color{margin-left:14px;margin-right:14px}.palette-scroll{padding-left:13px;padding-right:13px}.tool{padding:8px}.tool kbd{display:none}.toolbar{gap:7px}.toolbar-divider{display:none}.editor-heading{align-items:flex-start;flex-wrap:wrap}.board-scroll{height:480px;padding-left:0;padding-right:0}.canvas-stage{padding-left:10px;padding-right:10px}}
@media(max-width:760px){.site-header{padding:15px 18px;min-height:70px;gap:13px}.brand{font-size:1.4rem}.brand-mark{margin-right:9px;width:27px;height:27px;grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px)}.series-tag{font-size:.75rem;padding:7px 9px}.series-tag span{display:none}.workspace{display:flex;flex-direction:column;gap:18px;padding:20px 16px 15px}.palette-panel{width:100%;order:1}.editor{order:2}.panel-heading{padding:16px 16px 13px}.panel-heading h1{font-size:1.125rem}.eyebrow{font-size:.75rem;margin-bottom:5px}.selected-color{margin:0 14px 13px;padding:10px}.selected-swatch{width:36px;height:36px}.palette-scroll{max-height:157px;padding:0 14px 9px}.palette-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px 5px}.color-chip{max-width:38px}.swatch-button{gap:2px;padding:2px 2px 3px;font-size:.75rem}.palette-section-label{font-size:.75rem;padding-top:6px}.palette-footnote{font-size:.75rem;padding:9px 14px;line-height:1.5}.palette-footnote br{display:none}.palette-footnote a{margin-left:4px}.editor-heading{min-height:40px;align-items:center;margin-bottom:12px;gap:9px}.editor-heading h2{font-size:1.25rem}.size-control{gap:6px;font-size:.8125rem}.size-control select{padding:8px 24px 8px 9px;font-size:.8125rem}.tool{font-size:.8125rem;padding:8px;gap:6px}.tool svg,.clear-button svg{width:18px;height:18px}.toolbar{padding:8px;gap:5px}.history-group{gap:0}.history-group .icon-button{width:31px}.clear-button{padding:8px;gap:5px;font-size:.8125rem}.canvas-stage{padding:14px 7px 0}.board-scroll{height:390px;padding:6px 0 12px}.editor-footer{font-size:.75rem;align-items:flex-start}.editor-footer p{max-width:240px}.site-footer{padding:8px 16px 22px;font-size:.75rem}.used-colors{padding:14px}.board-wrap{padding-left:17px}.board-ruler{left:17px}.row-ruler{width:14px}h1,h2{letter-spacing:-.035rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}.import-button{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-size:.875rem;font-weight:650;border-radius:7px;padding:10px 13px;min-height:40px}.import-button:hover{background:#c71b4b}.import-button svg{width:18px;height:18px}.import-dialog{max-width:760px;width:calc(100% - 36px);max-height:calc(100dvh - 36px);padding:26px;overflow-y:auto}.import-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.import-title-row h2{margin:0 0 10px}.dialog-close{font-size:1.6rem;font-weight:400;color:var(--muted);line-height:1;width:32px;height:32px;border-radius:6px}.dialog-close:hover{background:#f0f2f6}.import-dialog #import-intro{font-size:.875rem}.import-file-name{margin-top:16px;overflow-wrap:anywhere;font-size:.8125rem!important}.import-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:10px}.import-previews figure{margin:0;min-width:0}.import-previews figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:.875rem;font-weight:600;flex-wrap:wrap}.import-previews figcaption span{color:var(--muted);font-size:.75rem;font-weight:400}.preview-frame{height:230px;padding:14px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;background-color:#fff;background-image:linear-gradient(45deg,#edf0f6 25%,transparent 25%),linear-gradient(-45deg,#edf0f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf0f6 75%),linear-gradient(-45deg,transparent 75%,#edf0f6 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.preview-frame canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;background:transparent;box-shadow:none;cursor:default;touch-action:auto}.import-settings{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin:20px 0 12px}.import-settings label{display:flex;flex-direction:column;gap:7px;font-size:.875rem;font-weight:550}.import-settings select{font-size:.875rem;background:#fff;color:var(--ink);padding:10px 9px;border:1px solid #dce0e9;border-radius:7px;width:100%;min-height:40px}.import-dialog .detection-note,.import-dialog .import-help,.import-dialog .replace-note{font-size:.8125rem;line-height:1.6}.import-dialog .detection-note{color:var(--ink)}.import-dialog .import-help{margin-top:8px}.import-dialog .replace-note{margin-top:12px;color:#aa2752}.import-dialog .import-summary{font-size:.875rem;color:var(--accent);font-weight:650;margin-top:13px}.import-dialog .import-error{font-size:.875rem;line-height:1.6;color:#a52844;padding:12px 14px;border:1px solid #f1c7d3;background:#fff2f5;border-radius:7px;margin-top:16px}.import-loading{padding:35px 0;text-align:center;font-size:.875rem!important}.import-dialog .dialog-actions{flex-wrap:wrap;gap:8px}.choose-another{margin-right:auto}.import-button:disabled:hover{background:var(--accent)}
@media(max-width:1050px){.editor-actions{gap:10px}.editor-heading{align-items:center}.editor-actions .size-control{gap:7px}.editor-actions .size-control>span{display:none}}
@media(max-width:760px){.editor-actions{gap:8px}.editor-heading>div:first-child{flex:1 0 140px}.editor-actions{flex:1 1 280px;justify-content:space-between}.editor-actions .size-control>span{display:inline}.import-button{font-size:.8125rem;padding:9px 11px}.import-dialog{padding:20px;width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.import-previews{gap:10px}.preview-frame{height:165px;padding:9px}.import-previews figcaption{font-size:.8125rem;display:block}.import-previews figcaption span{display:block;font-size:.75rem;line-height:1.7}.import-settings{grid-template-columns:1fr;gap:12px;margin-top:16px}.import-settings label{font-size:.875rem}.import-dialog .dialog-actions .primary-button{flex:1 0 100%;order:-1}.import-dialog .dialog-actions .secondary-button{font-size:.8125rem;padding:10px 12px}}
.import-dialog{max-width:960px}.grid-main-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:17px 0 16px}.grid-main-controls label,.grid-position-controls label,.import-result-info>label{display:flex;flex-direction:column;gap:6px;font-size:.875rem;font-weight:550}.grid-main-controls label{width:120px}.grid-main-controls input,.grid-position-controls input{font:inherit;width:100%;min-height:40px;padding:9px 10px;background:#fff;border:1px solid #dce0e9;border-radius:7px;color:var(--ink)}.grid-main-controls input:focus-visible,.grid-position-controls input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.grid-main-controls .secondary-button{min-height:40px;padding:10px 13px}.overlay-figure,.pattern-figure{margin:0;min-width:0}.overlay-figure>figcaption{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:.875rem;font-weight:600;margin-bottom:9px}.overlay-figure small{font-size:.75rem;color:var(--muted);font-weight:400;margin-left:9px}.overlay-view-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.8125rem;font-weight:400}.overlay-view-controls label{display:flex;align-items:center;gap:6px}.overlay-view-controls input{accent-color:var(--accent);width:16px;height:16px;margin:0}.overlay-view-controls select,.import-result-info select{font:inherit;color:var(--ink);border:1px solid #dce0e9;border-radius:6px;padding:7px 9px;background:#fff}.grid-preview-scroll{height:390px;overflow:auto;display:flex;border:1px solid #dce0e9;border-radius:9px;background-color:#fff;background-image:linear-gradient(45deg,#edf0f6 25%,transparent 25%),linear-gradient(-45deg,#edf0f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf0f6 75%),linear-gradient(-45deg,transparent 75%,#edf0f6 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;scrollbar-width:thin}.grid-preview-scroll canvas{margin:auto;flex:none;max-width:none;max-height:none;box-shadow:none;background:transparent;touch-action:none;image-rendering:pixelated;cursor:move}.grid-preview-scroll canvas:focus-visible{outline-offset:-3px!important}.grid-details{margin-top:14px;border:1px solid var(--line);border-radius:8px;padding:11px 13px}.grid-details summary{font-size:.875rem;cursor:pointer;font-weight:550}.grid-position-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:13px}.grid-position-controls label{font-size:.8125rem}.import-result-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.pattern-figure figcaption{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.875rem;font-weight:600;margin-bottom:8px}.pattern-figure figcaption span{font-size:.75rem;color:var(--muted);font-weight:400}.pattern-figure .preview-frame{height:160px}.import-result-info select{max-width:230px;margin-top:2px;min-height:40px}.import-result-info .detection-note{margin-top:15px}
@media(max-width:760px){.grid-main-controls{gap:9px}.grid-main-controls label{flex:1 1 100px;width:auto}.grid-main-controls .secondary-button{flex:1 1 100px;font-size:.8125rem;padding:9px 10px}.overlay-figure small{display:block;margin:3px 0 0}.overlay-view-controls{gap:10px}.overlay-view-controls select{padding:6px}.grid-preview-scroll{height:310px}.grid-position-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.import-result-row{grid-template-columns:1fr;gap:15px}.pattern-figure .preview-frame{height:170px}.import-result-info .detection-note{margin-top:10px}}
.tool-group{flex-wrap:wrap;max-width:100%;min-width:0}.color-tooltip{position:fixed;z-index:100;display:flex;align-items:center;gap:10px;padding:10px 12px;max-width:calc(100vw - 16px);border:1px solid var(--line);border-radius:9px;background:var(--paper);box-shadow:0 5px 22px #25304b26;pointer-events:none;font-size:.8125rem}.color-tooltip[hidden]{display:none}.color-tooltip>div{display:flex;flex-direction:column;gap:3px}.color-tooltip strong{font-size:.875rem;font-weight:700}.color-tooltip #hover-name{color:var(--muted)}.hover-swatch{width:30px;height:30px;flex:none;border-radius:6px;box-shadow:inset 0 0 0 1px #00000020}.hover-swatch.empty{background-color:#fff;background-image:conic-gradient(#edf0f6 25%,transparent 0 50%,#edf0f6 0 75%,transparent 0);background-size:12px 12px}
.pixel-readout{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 16px;margin-top:10px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}.pixel-readout[hidden]{display:none}.pixel-readout>div{display:flex;flex-direction:column;gap:4px;min-width:0}.pixel-readout #pixel-position{font-size:.875rem;color:var(--muted)}.pixel-readout #pixel-color{font-size:1rem;font-weight:650;line-height:1.4;overflow-wrap:anywhere}.pixel-readout .hover-swatch{width:36px;height:36px}.color-tooltip{font-size:.875rem}.color-tooltip strong{font-size:.9375rem}
.project-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}.project-bar #project-state{font-size:.875rem;color:var(--muted)}.project-bar #project-state[data-saved=false]{color:#aa2752}.project-actions{display:flex;gap:8px;flex-wrap:wrap}.collection-button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #dce0e9;background:#fff;border-radius:7px;min-height:40px;padding:9px 13px;font-size:.875rem;font-weight:600}.collection-button:hover{background:#f0f2f7}.editor-heading{flex-wrap:wrap}.editor-heading>div:first-child{min-width:0;flex:1 1 160px}.editor-heading h2{overflow-wrap:anywhere}.project-dialog{max-width:480px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow-y:auto}.project-dialog .import-title-row h2{margin-bottom:12px}.project-dialog p,.collection-dialog p{font-size:.875rem;line-height:1.6}.project-name-label{display:flex;flex-direction:column;gap:8px;margin-top:18px;font-size:.875rem;font-weight:600}.project-name-label input{font:inherit;color:var(--ink);min-height:44px;padding:10px 12px;border:1px solid #dce0e9;border-radius:7px;width:100%}.project-name-label input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.project-dialog .dialog-actions{gap:8px;flex-wrap:wrap}.project-dialog .dialog-actions button{font-size:.875rem}.project-dialog .project-error,.collection-dialog .project-error{color:#a52844;padding:10px 12px;border:1px solid #f1c7d3;background:#fff2f5;border-radius:7px;margin-top:14px}.collection-dialog{max-width:900px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;padding:26px}.collection-dialog h2{margin-bottom:6px}.collection-controls{display:flex;justify-content:flex-end;margin:12px 0}.collection-controls button,.collection-more{font-size:.875rem;padding:8px 12px}.collection-empty{padding:24px 0;color:var(--muted)}.project-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.project-card{border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0;background:#fff}.project-thumbnail{display:flex;align-items:center;justify-content:center;height:134px;border-radius:7px;background:#f4f5f9;overflow:hidden;margin-bottom:12px}.project-thumbnail canvas{box-shadow:none;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;cursor:default;touch-action:auto}.project-card h3{font-size:1rem;line-height:1.4;overflow-wrap:anywhere}.project-card .project-card-info{font-size:.875rem;color:var(--muted);margin-top:7px}.project-card .project-card-date{font-size:.8125rem;color:var(--muted);margin-top:3px}.project-card-actions{display:flex;gap:8px;margin-top:13px}.project-open,.project-delete{min-height:38px;padding:8px 12px;border-radius:6px;font-size:.875rem;font-weight:600}.project-open{background:var(--accent-light);color:var(--accent);flex:1}.project-open:hover{background:#ffe1ec}.project-delete{color:#a52844;border:1px solid #ead3d9}.project-delete:hover{background:#fff2f5}.collection-more{display:block;margin:18px auto 0}.collection-more[hidden]{display:none}.project-error[hidden]{display:none}
@media(max-width:760px){.project-bar{align-items:flex-start}.project-actions{margin-left:auto}.project-actions .import-button,.collection-button{font-size:.875rem;padding:9px 10px}.project-dialog,.collection-dialog{padding:20px;width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.project-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.project-thumbnail{height:115px}.project-card{padding:10px}.project-card-actions{flex-wrap:wrap}.project-open{flex:1 1 80px}.project-dialog .dialog-actions button{flex:1 1 auto}}
@media(max-width:420px){.project-list{grid-template-columns:1fr}.project-thumbnail{height:145px}}
[hidden]{display:none!important}
.mode-switch{display:flex;width:fit-content;max-width:100%;gap:4px;padding:4px;margin:0 0 14px;border:1px solid #dce0e9;border-radius:9px;background:#eef0f6}.mode-switch button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:6px;font-size:.9375rem;font-weight:650}.mode-switch button:hover{background:#fff}.mode-switch button[aria-pressed=true]{background:#fff;color:var(--accent);box-shadow:0 1px 4px #20243712}.mode-switch svg{width:19px;height:19px}
.workspace.perle-mode{grid-template-columns:minmax(0,1fr);max-width:1180px}.perle-mode .toolbar-divider,.perle-mode .history-group{display:none}.perle-mode .canvas-stage{background-color:#eef0f6}.perle-mode .board-scroll{height:clamp(350px,58vh,680px)}.perle-mode .row-ruler,.perle-mode .board-ruler{color:#596174}.perle-mode .board-ruler span,.perle-mode .row-ruler span{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;font-variant-numeric:tabular-nums}.perle-mode .board-ruler .board-start{border-left:2px solid #334155}.perle-mode .row-ruler .board-start{border-top:2px solid #334155}.perle-mode .current-pin{background:var(--accent);color:#fff;font-weight:700;border-radius:3px}.perle-mode .used-item:disabled{opacity:1;cursor:default}
.recipe-controls{margin-top:12px;padding:18px;border:1px solid #dce0e9;border-radius:11px;background:#fff}.recipe-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.recipe-axis{min-width:0}.recipe-axis>label{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:.9375rem;font-weight:600;cursor:pointer}.recipe-axis input{accent-color:var(--accent);width:18px;height:18px;margin:0}.recipe-stepper{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:4px;background:#f8f9fc}.recipe-stepper button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:6px;background:#fff;border:1px solid #dce0e9}.recipe-stepper button:hover{background:var(--accent-light);color:var(--accent)}.recipe-stepper button:disabled{opacity:.35;cursor:default}.recipe-stepper svg{width:21px;height:21px}.recipe-stepper output{flex:1;min-width:0;text-align:center;font-size:1rem;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.5}.recipe-board-info{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.875rem;color:#596174}.recipe-board-info strong{font-size:.875rem;color:var(--ink);font-weight:650;white-space:nowrap}.board-line-key{display:flex;align-items:center;gap:10px;line-height:1.5}.board-line-key:before{content:'';width:24px;height:3px;flex:none;border-radius:1px;background:#334155;box-shadow:0 0 0 2px #eef0f6}
@media(max-width:650px){.mode-switch{width:100%}.mode-switch button{flex:1;padding:10px 12px}.recipe-controls{padding:14px}.recipe-navigation{grid-template-columns:1fr;gap:16px}.recipe-axis>label{font-size:.875rem}.recipe-stepper output{font-size:.9375rem}.perle-mode .board-scroll{height:clamp(300px,52vh,510px)}.perle-mode .editor-footer p{max-width:none}.perle-mode .editor-footer{flex-wrap:wrap}.recipe-board-info{align-items:flex-start}}
.used-item{min-height:40px;font-size:.875rem}.used-item:hover{background:#f4f5fa;border-color:#c9cedb}.used-item[aria-pressed=true]{background:var(--accent-light);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);font-weight:650}.color-selection{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.color-selection p{flex:1 1 240px;font-size:.875rem;line-height:1.6;color:var(--ink)}.color-selection button{padding:10px 12px;min-height:40px;border:1px solid #dce0e9;border-radius:6px;font-size:.875rem;font-weight:600;background:#f8f9fc;white-space:nowrap}.color-selection button:hover{background:#eef0f6}.palette-selection-note{margin:-5px 20px 16px;padding:11px 12px;border:1px solid #f6d6e1;border-radius:7px;background:var(--accent-light);font-size:.875rem;line-height:1.6;color:#a21c44}
@media(max-width:760px){.palette-selection-note{margin-left:14px;margin-right:14px}.color-selection button{width:100%}}
.board-scroll{display:block;position:relative;padding:0;touch-action:none;overscroll-behavior:contain}.board-plane{position:relative;min-width:100%;min-height:100%}.board-plane .board-wrap{position:absolute;margin:0}#board{touch-action:none;image-rendering:pixelated}.canvas-bottom{flex-wrap:wrap}.navigation-help{padding:0 0 14px;font-size:.875rem;line-height:1.6;color:#596174}.zoom-controls .fit-button{min-height:36px;padding:7px 11px;font-size:.875rem;font-weight:600;border:1px solid #d2d7e2;border-radius:6px;background:#fff;margin-right:5px}.zoom-controls .fit-button:hover{background:var(--accent-light);color:var(--accent)}.zoom-controls .icon-button{width:40px;height:40px}

:root {
  --canvas-paper: #ffffff;
  --canvas-fade-color: rgba(255, 255, 255, .78);
  --canvas-fade-lines: rgba(255, 255, 255, .68);
  --canvas-grid: #e4e7ee;
  --canvas-guides: #aab3c3;
  --canvas-boundary: #334155;
  --canvas-halo: #ffffff;
  --canvas-focus: #df275b;
}
.site-header { flex-wrap: wrap; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.header-actions .series-tag { margin-left: 0; }
.settings-menu { position: relative; flex: none; }
.settings-menu > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); cursor: pointer; list-style: none; }
.settings-menu > summary::-webkit-details-marker { display: none; }
.settings-menu > summary:hover, .settings-menu[open] > summary { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.settings-menu > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.settings-panel { position: absolute; z-index: 110; top: calc(100% + 10px); right: 0; width: min(320px, calc(100vw - 28px)); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px #0b122033; }
.settings-heading { margin-bottom: 10px; color: var(--muted); font-size: .875rem; font-weight: 600; }
.settings-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.menu-actions { display: grid; gap: 4px; }
.menu-action { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 11px 12px; border-radius: 7px; text-align: left; font-size: .9375rem; font-weight: 550; }
.menu-action:hover:not(:disabled) { background: var(--accent-light); color: var(--accent); }
.settings-panel a.menu-action { text-decoration: none; }
.menu-size-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 44px; margin-top: 4px; padding: 4px 12px; font-size: .9375rem; }
.menu-size-control select { flex: 1 1 110px; min-width: 0; max-width: 100%; margin-left: auto; min-height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: .875rem; }
.theme-options { display: grid; gap: 4px; }
.theme-options button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 11px 12px; border-radius: 7px; text-align: left; font-size: .9375rem; font-weight: 550; }
.theme-options button:hover { background: var(--background); }
.theme-options button[aria-pressed=true] { background: var(--accent-light); color: var(--accent); }
.theme-check { margin-left: auto; font-weight: 700; visibility: hidden; }
.theme-options button[aria-pressed=true] .theme-check { visibility: visible; }
.settings-credit { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; line-height: 1.6; }
#board { background: var(--canvas-paper); }

:root[data-theme=dark] {
  color-scheme: dark;
  --ink: #eef2f8;
  --muted: #b0bbcc;
  --accent: #ff6b95;
  --accent-light: #392436;
  --line: #354157;
  --paper: #1b2332;
  --background: #101723;
  --canvas-paper: #1b2332;
  --canvas-fade-color: rgba(27, 35, 50, .78);
  --canvas-fade-lines: rgba(27, 35, 50, .68);
  --canvas-grid: #36445c;
  --canvas-guides: #7a879d;
  --canvas-boundary: #d2dcee;
  --canvas-halo: #1b2332;
  --canvas-focus: #ff6b95;
}
[data-theme=dark] .site-header, [data-theme=dark] .palette-panel, [data-theme=dark] .toolbar,
[data-theme=dark] .used-colors, [data-theme=dark] .recipe-controls, [data-theme=dark] dialog,
[data-theme=dark] .project-card, [data-theme=dark] .collection-button,
[data-theme=dark] .recipe-stepper button, [data-theme=dark] .zoom-controls .fit-button {
  background: var(--paper); border-color: var(--line);
}
[data-theme=dark] input:not([type=checkbox]), [data-theme=dark] select { background: var(--paper); color: var(--ink); border-color: var(--line); }
[data-theme=dark] .color-count, [data-theme=dark] .secondary-button, [data-theme=dark] .mode-switch,
[data-theme=dark] .recipe-stepper, [data-theme=dark] .color-selection button, [data-theme=dark] .project-thumbnail {
  background: #252f40; border-color: var(--line);
}
[data-theme=dark] .tool:hover:not(.active), [data-theme=dark] .icon-button:hover,
[data-theme=dark] .clear-button:hover, [data-theme=dark] .dialog-close:hover,
[data-theme=dark] .collection-button:hover, [data-theme=dark] .secondary-button:hover,
[data-theme=dark] .color-selection button:hover, [data-theme=dark] .swatch-button:hover:not([aria-pressed=true]),
[data-theme=dark] .used-item:hover:not([aria-pressed=true]) { background: #2b3649; border-color: var(--line); }
[data-theme=dark] .mode-switch button:hover, [data-theme=dark] .mode-switch button[aria-pressed=true] { background: var(--paper); }
[data-theme=dark] .recipe-stepper button:hover, [data-theme=dark] .zoom-controls .fit-button:hover,
[data-theme=dark] .project-open:hover { background: var(--accent-light); color: var(--accent); }
[data-theme=dark] .selected-color, [data-theme=dark] .palette-selection-note { border-color: #664052; }
[data-theme=dark] .palette-selection-note, [data-theme=dark] .replace-note,
[data-theme=dark] #project-state[data-saved=false], [data-theme=dark] .project-delete { color: #ffa4b9; }
[data-theme=dark] .primary-button, [data-theme=dark] .import-button, [data-theme=dark] .perle-mode .current-pin { background: #cf2253; color: #fff; }
[data-theme=dark] .primary-button:hover, [data-theme=dark] .import-button:hover:not(:disabled) { background: #b71d49; }
[data-theme=dark] .project-error, [data-theme=dark] .import-error, [data-theme=dark] .project-delete:hover { color: #ffa4b9; background: #3c2230; border-color: #674052; }
[data-theme=dark] .project-delete { border-color: #674052; }
[data-theme=dark] .canvas-stage, [data-theme=dark] .perle-mode .canvas-stage { background-color: #151d2c; background-image: radial-gradient(#303a4e 1px, transparent 1px); border-color: var(--line); }
[data-theme=dark] .board-ruler, [data-theme=dark] .row-ruler,
[data-theme=dark] .canvas-bottom, [data-theme=dark] .navigation-help,
[data-theme=dark] .recipe-board-info, [data-theme=dark] .site-footer { color: var(--muted); }
[data-theme=dark] .perle-mode .board-ruler .board-start, [data-theme=dark] .perle-mode .row-ruler .board-start { border-color: var(--canvas-boundary); }
[data-theme=dark] .board-line-key:before { background: var(--canvas-boundary); box-shadow: 0 0 0 2px var(--canvas-halo); }
[data-theme=dark] .palette-scroll, [data-theme=dark] .board-scroll { scrollbar-color: #526079 transparent; }
[data-theme=dark] .color-chip, [data-theme=dark] .selected-swatch, [data-theme=dark] .hover-swatch, [data-theme=dark] .used-item span { box-shadow: inset 0 0 0 1px #ffffff33; }
[data-theme=dark] .preview-frame, [data-theme=dark] .grid-preview-scroll { background-color: var(--paper); border-color: var(--line); background-image: linear-gradient(45deg, #303a4e 25%, transparent 25%), linear-gradient(-45deg, #303a4e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #303a4e 75%), linear-gradient(-45deg, transparent 75%, #303a4e 75%); }
[data-theme=dark] .hover-swatch.empty { background-color: var(--paper); background-image: conic-gradient(#303a4e 25%, transparent 0 50%, #303a4e 0 75%, transparent 0); }
[data-theme=dark] dialog::backdrop { background: #050a14b3; }
@media(max-width:760px) { .header-actions { gap: 8px; } }
@media(max-width:420px) { .site-header { padding: 14px; gap: 10px; } .brand { font-size: 1.15rem; letter-spacing: -.045rem; } .header-actions { gap: 6px; } .header-actions .series-tag { padding: 7px; } }
.color-picker-dialog { max-width: 460px; width: calc(100% - 24px); max-height: calc(100dvh - 32px); padding: 20px; overflow: hidden; background: var(--paper); }
.color-picker-dialog[open] { display: flex; flex-direction: column; }
.color-picker-dialog .import-title-row { flex: none; align-items: center; }
.color-picker-dialog .import-title-row h2 { margin: 0; font-size: 1.25rem; }
.color-picker-dialog .dialog-close { width: 44px; height: 44px; flex: none; }
.picker-current-color { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; flex: none; }
.picker-current-color span { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 5px; flex: none; }
.picker-current-color strong { font-size: .9375rem; font-weight: 550; color: var(--ink); line-height: 1.5; }
.picker-selection-note { margin: 0 0 14px; flex: none; }
.color-picker-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 4px 6px 4px 4px; }
.color-picker-dialog .palette-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px 6px; }
.color-picker-dialog .swatch-button { min-height: 44px; font-size: .875rem; }
.color-picker-dialog .color-chip { max-width: none; }
.swatch-button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-y pinch-zoom; }
.palette-color-info { z-index: 120; max-width: min(280px, calc(100vw - 40px)); }
.palette-color-info strong { overflow-wrap: anywhere; }
.palette-info-code { color: var(--muted); }
.project-share { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: .875rem; font-weight: 600; background: var(--paper); }
.project-share:hover { background: var(--accent-light); }
.transfer-details, .project-dialog .transfer-help { margin-top: 12px; color: var(--muted); }
.received-project { margin-top: 18px; text-align: center; }
.received-project[hidden] { display: none; }
.received-project > strong { display: block; margin-top: 12px; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.received-preview-frame { min-height: 188px; display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.received-preview-frame canvas { max-width: 100%; max-height: 170px; box-shadow: none; image-rendering: pixelated; cursor: default; touch-action: auto; }
.tool-color-swatch { display: block; width: 20px; height: 20px; flex: none; border: 1px solid var(--ink); border-radius: 5px; }
.recipe-toolbar-navigation { display: flex; align-items: center; gap: 4px; }
.recipe-toolbar-navigation .icon-button { width: 44px; min-height: 44px; height: 44px; flex: none; }
.recipe-toolbar-navigation .icon-button:hover:not(:disabled) { background: var(--accent-light); color: var(--accent); }
.fit-button svg { display: none; }

[data-device-mode=laptop] .toolbar .tool-group { flex-wrap: wrap; }
[data-device-mode=mobile] .workspace { display: block; padding: 16px 12px 18px; }
[data-device-mode=mobile] .palette-panel { display: none !important; }
[data-device-mode=mobile] .editor { min-width: 0; width: 100%; }
[data-device-mode=mobile] .editor-heading { align-items: flex-start; flex-wrap: nowrap; }
[data-device-mode=mobile] .editor-heading > div:first-child { min-width: 0; flex: 1 1 0; }
[data-device-mode=mobile] .editor-heading .project-bar { flex: 0 1 auto; max-width: 45%; margin: 0; justify-content: flex-end; text-align: right; overflow-wrap: anywhere; }
[data-device-mode=mobile] .header-note { display: none; }
[data-device-mode=mobile] .canvas-stage { border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
[data-device-mode=mobile] .toolbar { gap: 4px; padding: 8px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; }
[data-device-mode=mobile] .toolbar .tool-group,
[data-device-mode=mobile] .toolbar .history-group,
[data-device-mode=mobile] .toolbar .recipe-toolbar-navigation { display: contents; }
[data-device-mode=mobile] .perle-mode .toolbar .history-group { display: none; }
[data-device-mode=mobile] .toolbar-divider { display: none; }
[data-device-mode=mobile] .toolbar .tool,
[data-device-mode=mobile] .toolbar .icon-button,
[data-device-mode=mobile] .toolbar .clear-button { flex: 0 0 44px; width: 44px; min-height: 44px; height: 44px; padding: 10px; margin: 0; justify-content: center; }
[data-device-mode=mobile] .toolbar .tool > span:not(.tool-color-swatch),
[data-device-mode=mobile] .toolbar .clear-button > span,
[data-device-mode=mobile] .fit-button > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[data-device-mode=mobile] .toolbar kbd { display: none; }
[data-device-mode=mobile] .tool-color-swatch { width: 22px; height: 22px; }
[data-device-mode=mobile] .canvas-bottom { flex-wrap: wrap; padding: 8px 0; }
[data-device-mode=mobile] .zoom-controls .icon-button,
[data-device-mode=mobile] .zoom-controls .fit-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; height: 44px; padding: 10px; }
[data-device-mode=mobile] .fit-button svg { display: block; width: 20px; height: 20px; }
[data-device-mode=mobile] .mode-switch button { min-height: 44px; }
[data-device-mode=mobile] .mode-switch { width: 100%; margin: 14px 0 0; }
[data-device-mode=mobile] .mode-switch button { flex: 1; }
.shape-picker-dialog { max-width: 400px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px; background: var(--paper); }
.ai-import-dialog { background: var(--paper); }
.ai-service-note { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--accent-light); color: var(--ink); font-size: .875rem; }
.ai-feedback { margin: 12px 0; font-size: .9375rem; line-height: 1.6; }
.ai-import-dialog .ai-mask-control { display: flex; flex-direction: row; align-items: center; align-self: end; gap: 8px; min-height: 44px; width: auto; flex: 1 1 260px; }
.ai-mask-control input { width: 18px; height: 18px; min-height: 18px; padding: 0; flex: none; accent-color: var(--accent); }
.ai-import-dialog .import-result-info > label + label { margin-top: 14px; }
.ai-import-dialog .grid-position-controls select { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; background: var(--paper); color: var(--ink); }
.ai-import-dialog .dialog-actions { flex-wrap: wrap; }
.shape-picker-dialog .import-title-row { align-items: center; }
.shape-picker-dialog .import-title-row h2 { margin: 0; font-size: 1.25rem; }
.shape-picker-dialog .dialog-close { width: 44px; height: 44px; flex: none; }
.shape-options { display: grid; gap: 6px; margin-top: 14px; }
.shape-options button { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; text-align: left; background: var(--paper); font-size: .9375rem; font-weight: 600; }
.shape-options button:hover, .shape-options button[aria-pressed=true] { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.shape-options svg { width: 24px; height: 24px; }
.shape-options span { min-width: 0; flex: 1; line-height: 1.5; }
.shape-options small { display: block; font-size: .8125rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.shape-options b { visibility: hidden; }
.shape-options button[aria-pressed=true] b { visibility: visible; }
@media(max-width:480px) { .color-picker-dialog { padding: 16px; } .color-picker-dialog .palette-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media(max-width:380px) { .color-picker-dialog .palette-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }