:root{font-family:Segoe UI,Noto Sans JP,Hiragino Kaku Gothic ProN,sans-serif;color:#2b2622}*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#f8f3ea,#efe8dc);overflow-x:hidden}.appRoot{width:100%;max-width:1100px;margin:0 auto;padding:1rem .9rem 1.8rem;display:grid;gap:.95rem}.appFooter{width:100%;max-width:880px;margin:0 auto;padding:.2rem .2rem 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;font-size:.78rem;color:#3c322ab8}.appFooterDownload{width:100%;margin-top:.25rem}.appFooterVersion{font-weight:700;letter-spacing:.02em}.appFooterBuild{font-variant-numeric:tabular-nums}.canvasWrap{display:flex;justify-content:center}.canvasCard{width:100%;max-width:880px;display:flex;flex-direction:column;align-items:center}.canvasTitle{margin:0 0 .6rem;text-align:center;font-size:1.2rem;font-weight:600;color:#3a312b;font-family:Futura,Trebuchet MS,Century Gothic,Segoe UI,sans-serif}.printCanvas{width:min(95vw,860px);height:min(95vw,860px);display:block;margin-left:auto;margin-right:auto;border-radius:14px;border:1px solid rgba(87,75,62,.25);box-shadow:0 16px 30px #55493c29;background:#faf9f7}.layerSuggestion{margin:.65rem 0 0;text-align:center;color:#5f554c;font-size:.92rem;line-height:1.38}.sidePanel{width:100%;max-width:880px;margin:0 auto;background:#fffcf7db;border:1px solid rgba(140,121,93,.14);border-radius:14px;padding:.9rem;display:grid;gap:.9rem}.subtitle{margin:0;text-align:center;color:#6f6258;font-size:.92rem}.panelSection{background:#ffffff80;border:1px solid rgba(140,121,93,.12);border-radius:12px;padding:.8rem}.panelSection h2{margin:0 0 .55rem;font-size:.95rem;font-weight:600}.panelSectionArtwork{text-align:center;padding:1rem .9rem 1.15rem;background:#fffcf8f2;border:1px solid rgba(105,90,72,.22);box-shadow:0 2px 10px #4b3e300f}.artworkSectionTitle{font-family:Futura,Trebuchet MS,Century Gothic,Segoe UI,sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:.04em;color:#2a221c;margin:0 0 .65rem}.artworkPicker{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.artworkPickerLabel{display:block;width:100%;font-size:.98rem;font-weight:700;letter-spacing:.02em;color:#352c25}.artworkSelect{width:100%;max-width:28rem;margin:0 auto;padding:.55rem .75rem;font-size:.93rem;font-family:inherit;color:#3a312b;background:#fffefb;border:1.5px solid rgba(110,92,70,.35);border-radius:10px;cursor:pointer;text-align:center;text-align-last:center}.artworkSelect:focus-visible{outline:none;box-shadow:0 0 0 3px #6f5f5238}.artworkSelect:disabled{opacity:.65;cursor:not-allowed}.layerPicker{display:grid;grid-template-columns:repeat(7,minmax(58px,1fr));gap:.42rem;overflow-x:auto;padding-bottom:.15rem}.layerSquare{position:relative;min-height:58px;border-radius:12px;border:1px solid rgba(120,100,79,.24);background:#fdfaf5;color:#4a3f35;font-size:.78rem;font-weight:600;line-height:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.08rem;cursor:pointer}.layerSquareNumber{font-size:.88rem;font-weight:700}.layerSquareSwatch{position:absolute;left:9px;right:9px;bottom:7px;height:6px;border-radius:999px;border:1px solid rgba(55,45,36,.18)}.layerSquare.selected{background:#6f5f52;border-color:#6f5f52;color:#fff6ec}.swatchRow{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;font-size:.88rem}.swatch{width:58px;height:34px;border-radius:8px;border:1px solid rgba(80,70,58,.22)}.layerThumbPreview{width:66px;height:66px;border-radius:8px;border:1px solid rgba(80,70,58,.22);background:#faf9f7}.pigmentRow{display:grid;grid-template-columns:auto 110px 1fr;align-items:center;gap:.5rem;margin-bottom:.65rem}.pigmentDot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.22)}.pigment-red{background:#d65859}.pigment-blue{background:#5279bf}.pigment-yellow{background:#ddc04d}.pigment-black{background:#3b312b}.pigment-white{background:#fffdf9}.pigment-magenta-extra{background:#c8357a}.pigment-emerald-green{background:#1e8f62}.pigment-prussian-blue{background:#0f3a5c}.extraColoursHeading{margin:1rem 0 .55rem;font-size:.95rem;font-weight:600;padding-top:.65rem;border-top:1px solid rgba(140,121,93,.18)}.pigmentLabel{font-size:.84rem;color:#3f352d}.mixerPanel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.printStepsButton{width:100%;min-height:46px;border:none;border-radius:12px;background:#6f5f52;color:#fff6ec;font-size:.94rem;font-weight:600;cursor:pointer}.canvasPrintStepsButton{margin-top:.55rem}.printStepsButton:disabled{opacity:.66;cursor:default}.exportPdfButton{margin-top:.5rem;background:#5d5248}.printStepsButton.topDownloadButton{display:block;width:min(100%,860px);margin-left:auto;margin-right:auto;text-align:center}.resetButton{margin-top:.5rem;background:#8a7868}.bravoText{margin:.45rem 0 0;text-align:center;font-size:1.05rem;font-weight:700;color:#5a4a3f}.workshopInvite{margin:.6rem 0 0;text-align:center;color:#5f554c;font-size:.92rem;line-height:1.4;overflow-wrap:anywhere}.workshopInviteLink{color:#6f5f52;text-decoration:underline;font-weight:650;word-break:break-word}.workshopLoveButton{display:block;width:fit-content;max-width:100%;margin:.5rem auto 0;padding:.95rem 1.5rem;min-height:auto;line-height:1.35;text-decoration:none;text-align:center;box-sizing:border-box;color:#fff6ec;background:#ff2fa3}.sidePanelWorkshopLove{margin:0 auto}.workshopLoveButton:visited{color:#fff6ec}.workshopLoveButton:hover{background:#ff4ab0}.workshopLoveButton:active{background:#f21696}.thumbSliderTrack{position:relative;width:100%;box-sizing:content-box;height:12px;padding:14px 0;margin:-14px 0;border-radius:999px;background:transparent;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none}.thumbSliderTrack:before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:12px;border-radius:999px;background:#85715f42;pointer-events:none;z-index:0}.thumbSliderTrack.dragging{cursor:grabbing}.thumbSliderTrack:focus-visible{box-shadow:0 0 0 3px #6f5f5233}.thumbSliderPreview{position:absolute;left:0;top:50%;width:0;height:12px;transform:translateY(-50%);z-index:1;box-shadow:inset 0 0 0 1px #3c322a1f;pointer-events:none}.thumbSliderFill{position:absolute;left:0;top:50%;width:0;height:12px;transform:translateY(-50%);z-index:2;background:#6f5f526b;pointer-events:none}.thumbSliderThumb{position:absolute;top:50%;z-index:3;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(95,82,71,.45);background:#f8f2ea;box-shadow:0 2px 6px #493d3233;touch-action:pan-y;pointer-events:auto;cursor:grab;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.thumbSliderTrack.dragging .thumbSliderThumb{transform:translate(-50%,-50%) scale(1.05);border-color:#5f5247b3;box-shadow:0 3px 12px #493d324d;transition:none}@media (max-width: 760px){.appRoot{padding:.7rem .6rem 1.2rem}.canvasTitle{font-size:1.05rem}.printCanvas{width:min(96vw,760px);height:min(96vw,760px)}.layerPicker{grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:visible;gap:.35rem}.layerSquare{min-height:54px}.pigmentRow{grid-template-columns:auto 1fr;gap:.42rem;margin-bottom:.72rem}.pigmentRow .thumbSliderTrack{grid-column:1 / -1}.thumbSliderTrack{height:14px;padding:16px 0;margin:-16px 0}.thumbSliderTrack:before{height:14px}.thumbSliderPreview,.thumbSliderFill{height:14px}.thumbSliderThumb{width:30px;height:30px}}