:root{--ink:#14131a;--ink-soft:#6b6875;--line:#e3e1de;--paper:#faf9f7;--panel:#fff;--focus:#14131a;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", Consolas, monospace;font:15px/1.45 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}*{box-sizing:border-box}body,h1,h2,p,dl,dd,figure,ul{margin:0}ul{padding:0;list-style:none}body,#root{min-height:100dvh}a{color:inherit;text-decoration:none}h1{letter-spacing:.01em;font-size:1rem;font-weight:500}h2{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-size:.75rem;font-weight:500}button,select,input,.button{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:.35rem .7rem}button,.button{cursor:pointer}button:disabled{color:color-mix(in srgb, var(--ink-soft) 45%, transparent);cursor:default}button:not(:disabled):hover,.button:hover{border-color:var(--ink)}button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}button.link{color:var(--ink-soft);text-underline-offset:2px;background:0 0;border:none;padding:0;text-decoration:underline}button.link.danger:hover{color:#a3231f}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.quiet,.hint,.meta{color:var(--ink-soft);font-size:.85rem}.error{color:#a3231f;font-size:.85rem}.screen{max-width:60rem;margin:0 auto;padding:1.25rem}.screen.wide{max-width:90rem}.screen-bar{border-bottom:1px solid var(--line);align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.wordmark{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-size:.75rem;font-weight:500}.screen-bar h1{flex:1}.screen-actions{gap:.5rem;display:flex}.project-grid{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1.5rem;margin-top:1.5rem;display:grid}.project-card img{aspect-ratio:1;object-fit:contain;background:var(--panel);border:1px solid var(--line);width:100%;image-rendering:pixelated;display:block}.project-card h2{text-transform:none;letter-spacing:0;color:var(--ink);margin:.6rem 0 .15rem;font-size:.95rem}.project-card .link{margin-top:.4rem;font-size:.8rem}.create-flow{grid-template-columns:minmax(0,1.4fr) minmax(16rem,1fr);align-items:start;gap:2rem;display:grid}.create-image img{object-fit:contain;background:var(--panel);border:1px solid var(--line);width:100%;max-height:60dvh;display:block}.crop-editor{background:var(--panel);border:1px solid var(--line);place-items:center;height:min(64dvh,44rem);display:grid}.crop-editor canvas{cursor:crosshair;touch-action:none;display:block}.crop-editor canvas.dragging{cursor:grabbing}.adjustments{border:1px solid var(--line);border-radius:2px;gap:.6rem;padding:.75rem;display:grid}.adjustments h2{justify-content:space-between;align-items:baseline;display:flex}.slider{gap:.2rem}.slider>span{justify-content:space-between;display:flex}.slider input[type=range]{accent-color:var(--ink);background:0 0;border:none;width:100%;padding:0}.create-image input[type=file]{background:0 0;border:none;margin-top:.75rem;padding:0}.create-settings{gap:.9rem;display:grid}.create-settings label{color:var(--ink-soft);gap:.25rem;font-size:.85rem;display:grid}.unit-toggle{border:1px solid var(--line);border-radius:2px;align-items:center;gap:1rem;padding:.5rem .7rem;display:flex}.unit-toggle legend{color:var(--ink-soft);font-size:.85rem}.unit-toggle label{flex-direction:row;align-items:center;gap:.35rem;display:flex}.size-inputs{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.overview-stage{height:min(72dvh,60rem);margin-top:1rem}.overview-stage canvas{cursor:pointer;display:block}.board-screen{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 19rem;height:100dvh;display:grid}.board-bar{border-bottom:1px solid var(--line);grid-column:1/-1;align-items:center;gap:1rem;padding:.5rem .9rem;display:flex}.board-position{color:var(--ink-soft);flex:1;font-size:.85rem}.board-nav{gap:.3rem;display:flex}.board-nav button{min-width:2.2rem}.board-stage{background:var(--paper);min-width:0;display:grid;position:relative;overflow:hidden}.stage-warning{background:var(--panel);border:1px solid var(--line);color:var(--ink-soft);border-radius:2px;margin:.75rem;padding:.5rem .7rem;font-size:.8rem;position:absolute;inset:auto 0 0}.board-nav button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.calibration{gap:.6rem;display:grid}.calibration-row{grid-template-columns:auto 1fr auto;align-items:center;gap:.4rem;display:grid}.calibration-row input[type=range]{accent-color:var(--ink);background:0 0;border:none;width:100%;padding:0}.calibration-row button{min-width:2.2rem}.board-canvas-fill{min-width:0;min-height:0}.board-stage canvas{touch-action:manipulation;display:block}.board-panel{border-left:1px solid var(--line);background:var(--panel);grid-template-rows:auto minmax(0,1fr);min-height:0;display:grid}.panel-block{border-bottom:1px solid var(--line);padding:.9rem}.panel-block h2{justify-content:space-between;align-items:baseline;margin-bottom:.6rem;display:flex}.panel-block.colors{border-bottom:none;min-height:0;overflow-y:auto}.bead-info{grid-template-columns:auto 1fr;gap:.2rem .9rem;font-size:.9rem;display:grid}.bead-info dt{color:var(--ink-soft);font-size:.8rem}.color-list{gap:1px;display:grid}.color-row{text-align:left;background:0 0;border:none;border-radius:0;grid-template-columns:1rem 3.2rem 1fr auto;align-items:center;gap:.5rem;width:100%;padding:.3rem .2rem;font-size:.85rem;display:grid}.color-row:hover{background:var(--paper)}.color-row.active{background:var(--ink);color:var(--paper)}.color-row .swatch{border:1px solid #0000001f;border-radius:50%;width:1rem;height:1rem}.color-row .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.color-row .count{color:inherit;opacity:.7}@media (width<=900px){.board-screen{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}.board-panel{border-left:none;border-top:1px solid var(--line);max-height:40dvh;overflow-y:auto}.create-flow{grid-template-columns:minmax(0,1fr)}}@media (width<=640px){.board-bar{flex-wrap:wrap;row-gap:.4rem}.board-position{flex:0 auto}.board-nav{flex-wrap:wrap;flex-basis:100%}.screen-bar{flex-wrap:wrap;row-gap:.5rem}.screen-bar h1{flex-basis:100%;order:1}.crop-editor{height:min(46dvh,26rem)}}@media (height<=560px) and (orientation:landscape){.board-panel{max-height:none}.board-screen{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 16rem}}