:root{--bg:#faf9f6;--fg:#191815;--muted:#625c56;--panel:#e9e7e6;--border:#d5d1ce;--card:#e3dacc;--soft:#f0eee7;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"PingFang SC",sans-serif;--serif:"Iowan Old Style",Georgia,"PingFang SC",serif;--radius:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.55 var(--sans)}.topbar{height:72px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1400px)/2));gap:20px}.brand{font:600 20px/1 var(--sans);letter-spacing:-.04em;color:var(--fg);text-decoration:none}.brand .logo-mid{letter-spacing:-.05em}.topbar p{font-size:14px;margin:0;color:var(--muted)}main{max-width:1400px;margin:auto}.hero{min-height:calc(100vh - 72px);display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:80px 64px}.eyebrow{font:12px/1.3 var(--mono);letter-spacing:-.4px;color:var(--muted);margin:0 0 18px}.hero h1{font:500 clamp(40px,5vw,72px)/1.08 var(--serif);letter-spacing:-.05em;margin:0;max-width:650px}.intro{max-width:510px;margin:25px 0 30px;color:var(--muted);font-size:17px}.upload-button,.primary{appearance:none;border:0;background:var(--fg);color:var(--bg);cursor:pointer;display:inline-flex;align-items:center;gap:36px;padding:13px 16px;font:500 14px var(--sans);border-radius:4px;transition:opacity .16s}.upload-button:hover,.primary:hover{opacity:.75}.upload-button span,.primary span{font-size:18px}.hint,.field-hint{font-size:12px;color:var(--muted)}.hero-art{height:440px;background:var(--card);border-radius:var(--radius);position:relative;overflow:hidden;cursor:pointer}.hero-art.dragging{outline:2px solid var(--fg);outline-offset:5px}.checker-art{position:absolute;inset:13%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);border:1px solid #c9c1b5}.checker-art span{background:#efe9df}.checker-art span:nth-child(1){grid-area:1/1/3/3}.checker-art span:nth-child(2){grid-area:2/4/5/6;background:#d8cfc2}.checker-art span:nth-child(3){grid-area:4/2/6/4;background:#d8cfc2}.checker-art span:nth-child(4){grid-area:5/5/7/7}.checker-art span:nth-child(5){grid-area:1/6/2/7;background:#d8cfc2}.bead{position:absolute;width:78px;height:78px;border-radius:50%;background:var(--fg);box-shadow:inset 8px 8px 13px #ffffff45,inset -7px -9px 14px #0003}.bead:after{content:"";position:absolute;inset:28px;border-radius:50%;background:var(--card);box-shadow:inset 2px 2px 3px #0003}.bead-coral{left:16%;top:16%}.bead-yellow{right:17%;top:24%;width:58px;height:58px}.bead-yellow:after{inset:21px}.bead-blue{right:22%;bottom:14%;width:104px;height:104px}.bead-green{left:22%;bottom:15%;width:50px;height:50px}.bead-green:after{inset:18px}.hero-art p{position:absolute;right:20px;bottom:16px;margin:0;font:12px var(--mono);color:var(--muted)}.hidden{display:none!important}.workspace{min-height:calc(100vh - 72px);display:grid;grid-template-columns:315px minmax(420px,1fr) 300px;border-left:1px solid var(--border);border-right:1px solid var(--border)}.controls,.materials{padding:36px 28px;border-right:1px solid var(--border)}.materials{border-right:0;border-left:1px solid var(--border)}.panel-title,.pattern-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.panel-title h2,.pattern-header h2{font:500 25px/1.2 var(--serif);letter-spacing:-.04em;margin:0}.text-button{font:13px var(--sans);color:var(--fg);padding:0;border:0;border-bottom:1px solid var(--fg);background:transparent;cursor:pointer}.source-preview{display:flex;align-items:center;gap:12px;margin:27px 0;padding-bottom:25px;border-bottom:1px solid var(--border)}.source-preview img{width:48px;height:48px;object-fit:cover;border-radius:4px}.source-preview strong{display:block;font-size:12px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-preview button{margin-top:5px;color:var(--muted);border-color:var(--muted)}fieldset{border:0;border-bottom:1px solid var(--border);padding:21px 0;margin:0}legend{font:600 13px var(--sans);padding:0;width:100%}legend span{float:right;color:var(--muted);font:11px var(--mono)}.size-choice{display:grid;grid-template-columns:repeat(3,1fr);margin:13px 0}.size-option{min-height:56px;border:1px solid var(--border);border-right:0;background:transparent;color:var(--fg);cursor:pointer;font:12px var(--sans)}.size-option:last-child{border-right:1px solid var(--border)}.size-option b,.size-option span{display:block}.size-option b{font-weight:600}.size-option span{font:10px var(--mono);color:var(--muted);margin-top:4px}.size-option.selected{background:var(--fg);color:var(--bg);border-color:var(--fg)}.size-option.selected span{color:#d8d4ce}.dimension-row{display:grid;grid-template-columns:1fr 14px 1fr 25px;gap:7px;align-items:end}.dimension-row label{font-size:11px;color:var(--muted)}.dimension-row input{display:block;width:100%;margin-top:5px;border:1px solid var(--border);border-radius:4px;background:var(--bg);padding:7px;font:13px var(--mono);color:var(--fg)}.lock{height:34px;background:transparent;border:0;cursor:pointer;color:var(--muted);font-size:20px}.lock.active{color:var(--fg)}.range{width:100%;accent-color:var(--fg);margin:15px 0 2px}.range-labels{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--muted)}.toggle-row{display:flex;justify-content:space-between;margin-top:13px;font-size:13px}.toggle-row input{accent-color:var(--fg)}.controls>.primary{margin-top:25px;width:100%;justify-content:space-between}.pattern-area{min-width:0;background:var(--soft);padding:36px clamp(28px,4.5vw,68px)}.zoom-controls{display:flex;align-items:center;gap:8px;font:11px var(--mono)}.zoom-controls button{height:30px;width:30px;border:1px solid var(--border);background:var(--bg);border-radius:4px;cursor:pointer;font-size:19px}.canvas-wrap{height:calc(100vh - 190px);min-height:470px;margin-top:28px;display:grid;place-items:center;overflow:auto;padding:28px;border-radius:var(--radius);background:var(--panel)}.canvas-wrap canvas{max-width:100%;max-height:100%;background:#fff;box-shadow:0 1px 1px #0000000c;image-rendering:pixelated}.bead-total{background:var(--card);padding:5px 7px;font:11px var(--mono)}.materials-intro{font-size:12px;color:var(--muted);line-height:1.7}.board-estimate{margin-top:16px;padding:12px;background:var(--card);display:grid;grid-template-columns:1fr auto;gap:2px;font-size:11px}.board-estimate strong{font:600 15px var(--mono)}.board-estimate small{grid-column:1/-1;color:var(--muted);font-size:10px}.palette-list{padding:0;margin:17px 0;list-style:none;max-height:calc(100vh - 370px);overflow:auto}.palette-list li{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}.swatch{width:24px;height:24px;border-radius:50%;border:1px solid #0002}.color-name{display:block;color:var(--muted);font:10px var(--mono)}.count{font:11px var(--mono)}.action-stack{display:grid;gap:8px}.action-stack button{width:100%;justify-content:space-between}.secondary{border:1px solid var(--fg);border-radius:4px;background:transparent;color:var(--fg);padding:12px;cursor:pointer;font:13px var(--sans)}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,150px);background:var(--fg);color:var(--bg);padding:10px 15px;border-radius:4px;font-size:13px;transition:transform .2s}.toast.show{transform:translate(-50%,0)}footer{max-width:1400px;margin:auto;border-top:1px solid var(--border);display:flex;gap:20px;justify-content:space-between;padding:24px 64px;color:var(--muted);font-size:12px}footer span:first-child{font-family:var(--mono);color:var(--fg)}footer a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}@media(max-width:1000px){.workspace{grid-template-columns:280px 1fr}.materials{grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}.palette-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px;max-height:none}.action-stack{grid-template-columns:1fr 1fr}}@media(max-width:700px){.topbar{height:62px;padding:0 22px}.topbar p{display:none}.hero{grid-template-columns:1fr;padding:52px 24px;gap:35px}.hero-art{height:300px}.workspace{display:block;border:0}.controls,.materials{border:0;border-bottom:1px solid var(--border);padding:30px 24px}.pattern-area{padding:30px 24px}.canvas-wrap{height:60vh;min-height:360px;padding:14px}.palette-list{grid-template-columns:repeat(2,1fr)}footer{padding:22px 24px;flex-wrap:wrap}}@media print{.topbar,.controls,.materials,.pattern-header .zoom-controls,footer{display:none}.workspace{display:block;border:0}.pattern-area{padding:0;background:white}.canvas-wrap{height:auto;background:none;padding:0}.canvas-wrap canvas{max-width:100%;max-height:none;box-shadow:none}}