@scope (html) to (:scope :is(x-base,x-board-card,x-footer,x-nav,x-pager,x-paint-tool)>*){main{max-width:var(--page);margin:0 auto;padding:0 var(--gutter) var(--space-xl)}}
x-board-card{display:contents}@scope (x-board-card) to (:scope :is(x-base,x-board-card,x-footer,x-nav,x-pager,x-paint-tool)>*){.board-card{display:flex;flex-direction:column;gap:var(--space-s);padding:10px 10px var(--space-s);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;text-align:center;transition:transform var(--duration),box-shadow var(--duration)}.board-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}img{display:block;width:100%;aspect-ratio:2 / 1;object-fit:cover;border-radius:6px;background:#fff;border:1px solid var(--rule)}span{font-family:var(--font-display);font-size:var(--text-m);font-weight:500}}
x-nav{display:contents}@scope (x-nav) to (:scope :is(x-base,x-board-card,x-footer,x-nav,x-pager,x-paint-tool)>*){.site-header{max-width:var(--page);margin:0 auto;padding:var(--space-m) var(--gutter);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-l)}.brand img{display:block;width:225px;height:auto}nav{display:flex;justify-content:center;gap:var(--space-l)}nav a{color:var(--ink);text-decoration:none;font-family:var(--font-display);font-weight:500;font-size:var(--text-m);white-space:nowrap}nav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--accent-soft)}.search{position:relative}.search svg{position:absolute;left:16px;top:50%;translate:0 -50%;color:var(--ink)}.search input{width:300px;padding-left:44px}@media (max-width:1100px){.site-header{grid-template-columns:auto 1fr;gap:var(--space-s) var(--space-m)}nav{grid-column:1 / -1;grid-row:2;justify-content:flex-start;overflow-x:auto;gap:var(--space-m);padding-bottom:var(--space-xs);scrollbar-width:none}.search{justify-self:end}.search input{width:min(300px,46vw)}}@media (max-width:560px){.brand img{width:140px}.search input{width:44px;padding-right:0}.search input:focus{width:60vw}}}
x-footer{display:contents}@scope (x-footer) to (:scope :is(x-base,x-board-card,x-footer,x-nav,x-pager,x-paint-tool)>*){.site-footer{border-top:1px dashed var(--rule);margin-top:var(--space-xl)}.inner{max-width:var(--page);margin:0 auto;padding:var(--space-l) var(--gutter);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-m) var(--space-l)}.brand img{display:block;width:130px;height:auto}p{margin:0;color:var(--muted);flex:1 1 260px}nav{display:flex;gap:var(--space-m)}nav a{color:var(--ink)}}
x-paint-tool{display:contents}@scope (x-paint-tool) to (:scope :is(x-base,x-board-card,x-footer,x-nav,x-pager,x-paint-tool)>*){.tool{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-l);align-items:start}.sheet{position:relative;background:var(--paper);padding:12px;border-radius:var(--radius);box-shadow:var(--shadow-lift)}.cb-stage{position:relative;overflow:hidden;border-radius:6px;background:#fff;touch-action:none;border:1px solid var(--rule);cursor:crosshair}.cb-pan{transform-origin:0 0}canvas{display:block;width:100%;height:auto}.zoom{position:absolute;right:22px;bottom:22px;display:flex;gap:6px}button.icon{min-height:40px;width:40px;padding:0;justify-content:center;background:var(--paper);color:var(--ink);border-color:var(--rule);font-size:var(--text-m)}.panel{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-m) var(--space-m) var(--space-s)}.label{font-size:var(--text-m);margin:var(--space-m) 0 var(--space-s)}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.swatches button{min-height:0;aspect-ratio:1;padding:0;border-radius:50%;background:var(--swatch);border:2px solid rgb(0 0 0 / .12);box-shadow:none}.swatches button[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:2px}.styles{display:flex;flex-wrap:wrap;gap:6px}.chip{min-height:36px;padding:0 .9em;font-size:var(--text-s);background:var(--paper);color:var(--ink);border-color:var(--rule);box-shadow:none}.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-accent);border-color:var(--ink)}.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-m)}.actions .small,.actions a.button.small{font-size:var(--text-s);min-height:38px;padding:0 .9em}.progress{display:grid;gap:6px;font-family:var(--font-display);color:var(--ink)}.bar{height:8px;border-radius:4px;background:var(--rule);overflow:hidden}.bar div{height:100%;width:calc(var(--progress,0) * 100%);background:linear-gradient(90deg,#e94b3c,#f2a531,#f6d046,#63b65a,#3c8fd6,#7b55c7)}.done{margin-top:var(--space-m);padding:var(--space-m);border-radius:var(--radius);background:#fff6e2}.done p{font-family:var(--font-display);color:var(--ink)}.hint{color:var(--muted);font-size:var(--text-s);margin:var(--space-m) 0 0}@media (max-width:900px){.tool{grid-template-columns:1fr}.sheet{padding:6px}.zoom{right:14px;bottom:14px}.swatches{grid-template-columns:repeat(8,1fr)}}}
x-pager{display:contents}@scope (x-pager) to (:scope :is(x-base,x-board-card,x-footer,x-nav,x-pager,x-paint-tool)>*){.pager{display:flex;flex-wrap:wrap;gap:var(--pager-gap,0.5rem);align-items:center}.pager-link,.pager-current{padding:var(--pager-padding,0.25rem 0.6rem);border-radius:var(--pager-radius,0.25rem)}.pager-current{background:var(--pager-current-bg,currentColor);color:var(--pager-current-color,Canvas)}}