/* Cozy worktable: functional paper surfaces over original artwork. */
:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;--ink:#443b32;--muted:#746655;--blue:#516948;--line:#d7cbb7;--paper:#fffaef;--paper-soft:#f5eddc;--paper-deep:#ece1cd;--sage:#e5e9d8;--peach:#f4d7c1;--primary:#596f4c;--primary-ink:#fffbed;--focus:#9b512f;--shadow:0 5px 0 #7b573414,0 12px 30px #63462713;--scene-tint:#ffefcd45;background:#dbc197;color:var(--ink);color-scheme:light}
:root[data-light="evening"]{--ink:#f3e7d2;--muted:#cbbb9f;--blue:#b9caa6;--line:#625747;--paper:#36322d;--paper-soft:#403a32;--paper-deep:#4b4236;--sage:#454d3c;--peach:#644c3e;--primary:#b9cba4;--primary-ink:#293424;--focus:#f0c28e;--shadow:0 5px 0 #100d0926,0 12px 34px #100d0938;--scene-tint:#221e2caa;background:#292724;color-scheme:dark}
body{min-height:100vh;isolation:isolate}
body::before,body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:linear-gradient(var(--scene-tint),var(--scene-tint)),url('/assets/cozy-worktable.webp') center top/cover;transition:filter .8s}
body::after{background:radial-gradient(ellipse at 12% 5%,#fff5ce70,transparent 62%);animation:desk-light 28s ease-in-out infinite alternate;opacity:.6}
[data-light="evening"] body::before{filter:brightness(.75) saturate(.65)}
[data-light="evening"] body::after{background:radial-gradient(ellipse at 86% 8%,#f8c6833d,transparent 58%)}
@keyframes desk-light{from{opacity:.35;transform:translate3d(-1%,0,0)}to{opacity:.75;transform:translate3d(1%,1%,0)}}
[data-motion="off"] body::after{animation:none;opacity:.45}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:200;padding:14px;background:var(--paper);color:var(--ink);border-radius:10px}.skip-link:focus{top:12px}
button,.button,input,select,dialog{color:var(--ink)}
button,.button{background:var(--paper);border-color:var(--line);border-radius:12px;transition:background .2s,border-color .2s,box-shadow .2s}
button:hover,.button:hover{background:var(--sage);border-color:var(--blue)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button.primary,.button.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);box-shadow:0 3px 0 #16291520}
button.primary:hover,.button.primary:hover{background:var(--primary);filter:brightness(1.09)}
.selected{background:var(--sage)!important;border-color:var(--blue)!important;color:var(--blue)}
input,select,.search input{background:var(--paper);border-color:var(--line)}input[type="checkbox"],input[type="range"]{accent-color:var(--primary)}
header{padding:17px max(28px,calc((100vw - 1450px)/2));background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 3px 16px #4d36250d;gap:20px}
.brand{color:var(--ink);font-size:25px;letter-spacing:-.8px;gap:11px}.brandmark{background:#d1a76c;border-color:#d1a76c;color:#fff7e7;box-shadow:inset 0 0 0 2px #ad7e48}
.beta{font-size:12px;letter-spacing:1.4px;color:var(--muted)}header nav{width:auto;gap:7px}
.nav{font-size:15px;border:1px solid transparent;padding:11px 16px}.nav.active{background:var(--sage);color:var(--blue);border-color:var(--line)}
.adult{font-size:14px;color:var(--muted)}.language{background:var(--paper-soft);color:var(--ink);min-width:98px;font-size:14px}
.ambience-bar{max-width:1376px;margin:20px auto 0;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.scene-panel{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:17px;padding:9px 13px 9px 9px;box-shadow:var(--shadow)}
.rain-window{position:relative;isolation:isolate;width:138px;height:90px;overflow:hidden;border-radius:9px;background:#748d7d;border:1px solid #aa8556;flex-shrink:0}
.rain-window img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .8s}
[data-light="evening"] .rain-window img{filter:brightness(.52) saturate(.65) hue-rotate(8deg)}
.rain-drops{position:absolute;inset:5% 5%;background:url('/assets/rain-overlay.webp') center top/155px 155px;opacity:.55;filter:grayscale(1);mix-blend-mode:screen;animation:falling-rain 10s linear infinite;pointer-events:none;border-radius:6px}
@keyframes falling-rain{from{background-position:0 0}to{background-position:0 155px}}
[data-motion="off"] .rain-drops{animation:none;opacity:.35}
.scene-settings{display:flex;flex-direction:column;gap:8px;min-width:0}
.light-switch{display:flex;padding:3px;gap:3px;background:var(--paper-soft);border:1px solid var(--line);border-radius:12px}
.light-switch button{display:flex;gap:7px;align-items:center;min-height:38px;border:1px solid transparent;border-radius:8px;font-size:14px;padding:7px 11px;background:transparent}
.light-switch button[aria-pressed="true"]{background:var(--peach);border-color:var(--line)}.light-switch .icon{width:18px;height:18px}
.rain-controls{display:flex;align-items:center;gap:8px}
#rainToggle{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:14px;min-height:38px;background:var(--paper-soft)}
#rainToggle[aria-pressed="true"]{background:var(--sage);border-color:var(--blue)}#rainToggle .icon{width:19px;height:19px}
.rain-volume{margin:0;flex:1;min-width:30px}.rain-volume input{width:100%;max-width:80px;padding:0;min-height:34px;border:0;background:transparent}
.motion-toggle{display:grid;place-items:center;padding:0;width:36px;min-height:36px;border:0;background:transparent;color:var(--muted)}.motion-toggle .icon{width:18px;height:18px}
.music-player{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);max-width:480px}
.music-toggle{flex:0 0 46px;width:46px;height:46px;padding:0;display:grid;place-items:center;background:var(--sage);border-color:var(--line);border-radius:50%}
.music-toggle .icon{width:20px;height:20px;display:block}.track-info{min-width:0}
.track-heading{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}.track-heading strong{font-size:15px}#musicState{color:var(--muted);font-size:12px}
.music-credit,.rain-credit{display:block;font-size:12px;color:var(--muted);line-height:1.5}.music-credit a{color:inherit;text-underline-offset:3px}.rain-credit{margin-top:2px}
.volume-control{display:flex;align-items:center;gap:6px;margin:0 0 0 8px;color:var(--muted)}.volume-control .icon{width:18px;height:18px}
.volume-control input{width:66px;min-width:0;min-height:36px;padding:0;border:0;background:transparent;cursor:pointer}
.audio-error{flex-basis:100%;margin:0;font-size:14px;color:var(--ink);line-height:1.5;max-width:390px}
main{max-width:1376px;padding:26px 24px 50px}h1,h2,h3{color:var(--ink)}h1{letter-spacing:-1px}
.muted,.hint,.status,.footerhint,.category-note,.breadcrumb,.board-tip,.board-stats{color:var(--muted)}
.library-top{margin-bottom:22px;padding:22px 26px;background:var(--paper);border:1px solid var(--line);border-radius:9px 20px 20px 9px;border-left:6px solid #a8b78a;box-shadow:var(--shadow)}
.eyebrow{font-size:12px;letter-spacing:1.7px;color:var(--blue);margin-bottom:7px}.library-top h1{font-size:clamp(27px,3vw,34px);margin-bottom:7px}
.library-top .muted{font-size:16px}.library-top .actions{flex-shrink:0}.library-top .actions>button:first-child{background:var(--peach)}
.library-layout{display:flex;flex-direction:column;gap:20px}
.category-panel{position:static;width:100%;padding:13px 14px;background:var(--paper-soft);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}
.category-panel h2{display:none}.category-list{display:flex;flex-direction:row;gap:7px;overflow-x:auto;padding:2px;scrollbar-width:thin;scroll-snap-type:x proximity}
.category-link{flex:1 0 auto;display:flex;flex-direction:row;justify-content:center;gap:9px;text-align:left;min-width:106px;padding:8px 11px;min-height:56px;font-size:14px;background:var(--paper);border:1px solid var(--line);scroll-snap-align:start}
.category-link small{display:none}.category-mini{width:30px;height:30px;border-radius:7px}.category-mini canvas{width:28px;height:28px}.all-mini{color:var(--blue);background:var(--sage)}.category-note{display:none}
.library-content{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:19px;padding:22px;box-shadow:var(--shadow)}
.library-heading{flex-direction:row;align-items:center;margin-bottom:17px}.library-heading h2{font-size:24px}.breadcrumb{font-size:12px;margin-bottom:5px}
.library-heading .search{width:280px;max-width:46%}.search>span{color:var(--muted)}.search>input{background:var(--paper-soft);font-size:14px}
.topicbar button{background:var(--paper-soft);border:1px solid var(--line);border-radius:9px;min-height:42px;font-size:14px}.topicbar button small{font-size:12px;color:var(--muted)}
.gallery-summary{color:var(--muted);font-size:14px;margin:12px 0 18px}.gallery-summary .hint{font-size:12px}
.library-content .patterns{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pattern{background:var(--paper-soft);border:1px solid var(--line);border-radius:8px 8px 13px 13px;box-shadow:0 3px 0 #6d50340c,0 6px 13px #6d503408}
.pattern:hover{box-shadow:0 7px 20px #6d50342b;border-color:var(--blue);background:var(--sage)}
.pattern .thumb{background:#fffefa;border-bottom-color:var(--line);aspect-ratio:1.12;padding:14px 14px 26px}.pattern canvas{max-width:208px;background:#fff}
.pattern .typebadge{background:#f3ecdc;color:#70624e;font-size:12px;font-weight:600;right:9px}
.pattern .caption{padding:14px 16px;min-height:74px}.pattern .caption strong{font-size:16px;line-height:1.35}.pattern .caption small{font-size:12px;color:var(--muted)}.pattern .caption small span{color:var(--blue)}
.gallery-page .footerhint{font-size:13px;background:var(--paper);border-radius:12px;padding:13px 18px;width:fit-content;max-width:100%;margin:24px auto 0;border:1px solid var(--line)}
.designer-page{max-width:1432px;padding-top:24px}.designer-top{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 22px;box-shadow:var(--shadow);margin-bottom:20px}
.designer-title .back{color:var(--blue);font-size:14px}.designer-title .status{color:var(--muted);font-size:13px}.designer-title h1{font-size:27px}
.edit-workspace{grid-template-columns:92px minmax(0,1fr) 260px;gap:18px}.bead-workspace{grid-template-columns:minmax(0,1fr) 260px;gap:18px}
.toolrail{background:var(--paper-soft);border-color:var(--line);box-shadow:var(--shadow);border-radius:15px;padding:8px;gap:8px}.toolrail button{background:var(--paper);min-height:76px;border-color:var(--line)}.toolrail button span{font-size:12px}
.boardbox{background:var(--paper-soft);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.board-toolbar{padding-bottom:16px}
.board-stats{font-size:14px}.board-stats strong{background:var(--paper);color:var(--ink);font-size:14px;border:1px solid var(--line)}
.board-options>button{font-size:14px;min-height:42px}.zoom-control{background:var(--paper);border-color:var(--line)}.zoom-control button{min-height:42px}.zoom-control output{font-size:12px;color:var(--muted)}
.canvaswrap{background-color:var(--paper-deep);background-image:linear-gradient(#9c89641a 1px,transparent 1px),linear-gradient(90deg,#9c89641a 1px,transparent 1px);background-size:20px 20px;border:1px solid var(--line);border-radius:10px;padding:16px}
.canvaswrap canvas{box-shadow:0 5px 22px #4d352226;border-radius:5px}.board-tip{font-size:13px;color:var(--muted)}
.side{background:var(--paper);border-color:var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);border-top:5px solid #a8b78a}.side h2{font-size:19px}.side h3{font-size:14px;color:var(--muted)}
.chosen-color{background:var(--paper-soft);border:1px solid var(--line);border-radius:12px}.chosen-color small{font-size:12px;color:var(--muted)}.chosen-color strong{font-size:14px}.chosen-color .colorinput{background:var(--paper)}
.side .swatch{box-shadow:inset 0 0 0 1px #0002,0 3px 0 #35231715}.swatch.selected{outline-color:var(--blue)}.side .replace-button{background:var(--peach);font-size:14px}.empty-palette{font-size:14px;color:var(--muted)}
.run,.panel,.empty,.folder,.button,.review-toolbar,.review-card{background:var(--paper);border-color:var(--line)}.run{font-size:14px}.back{color:var(--blue)}.panel,.folder,.empty{box-shadow:var(--shadow)}.folder{background:var(--paper);border-top:5px solid #d9b694}
main:not(.gallery-page):not(.designer-page)>.topline{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.pill,.done{color:var(--blue);background:var(--sage)}.danger{color:#b24336}[data-light="evening"] .danger{color:#ffad96}
dialog{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 100px #201b1a70}dialog::backdrop{background:#2e231aa3;backdrop-filter:blur(5px)}
.dialogPreview{background:#fffefa;border:1px solid var(--line)}.close{background:var(--paper-soft)}.notice{background:var(--peach);color:var(--ink);border-color:#ba8053}
.review-toolbar{box-shadow:0 4px 12px #30231418}.review-card.is-selected,.manage-item:has(input:checked){background:var(--sage)}.review-copy,.review-copy .hint{color:var(--muted)}.review-copy strong{color:var(--ink)}.review-copy a,.review-copy summary{color:var(--blue)}.review-thumb,.manage-thumb{background:#fffefa}.review-status{background:var(--peach);color:var(--ink)}#toast{background:var(--ink);color:var(--paper)}
@media(min-width:1550px){body::before{background-size:100% auto;background-position:center}}
@media(max-width:1150px){.beta{display:none}.library-content .patterns{grid-template-columns:repeat(3,minmax(0,1fr))}.edit-workspace{grid-template-columns:84px minmax(0,1fr) 232px;gap:12px}.side{padding:14px}.music-player{gap:9px;padding:12px}.volume-control{margin-left:2px}.volume-control input{width:46px}.scene-panel{gap:10px}.rain-window{width:105px}.light-switch button{padding:7px 9px}}
@media(max-width:950px){header{padding:14px 24px;flex-wrap:wrap}.ambience-bar{flex-wrap:wrap;gap:12px}.music-player{max-width:none}.library-top{flex-wrap:wrap;gap:18px}.library-top .actions{flex-shrink:1}.edit-workspace{grid-template-columns:minmax(0,1fr) 232px}.toolrail{grid-column:1/-1;flex-direction:row;padding:7px}.toolrail button{min-height:62px;min-width:80px;padding:8px}.bead-workspace{grid-template-columns:minmax(0,1fr) 232px}}
@media(max-width:700px){
 header{padding:14px 16px;gap:14px}.brand{font-size:24px}header nav{width:100%;gap:3px;justify-content:space-between}.nav{font-size:14px;padding:9px 10px}.language{min-width:88px;font-size:14px;padding:8px 6px}.adult{padding:8px;min-width:42px}.adult span{display:none}
 .ambience-bar{margin-top:14px;padding:0 14px;gap:10px}.scene-panel{width:100%;gap:12px;padding:8px}.scene-settings{flex:1}.rain-window{width:92px;height:88px}.light-switch{width:100%}.light-switch button{flex:1;justify-content:center;padding:7px 5px;font-size:14px;gap:5px}.light-switch .icon{width:16px;height:16px}.rain-volume input{max-width:none}.rain-controls{gap:5px}#rainToggle{padding:6px 8px;font-size:14px}.motion-toggle{width:32px}
 .music-player{width:100%;padding:10px;gap:10px}.track-info{flex:1}.track-heading{gap:8px}.volume-control{margin:0}.volume-control input{width:52px}
 main{padding:18px 14px 34px}.library-top{padding:17px;border-left-width:4px;margin-bottom:17px;border-radius:9px 16px 16px 9px}.library-top h1{font-size:28px}.library-top .muted{font-size:16px}.library-top .actions{margin-top:16px;gap:8px}.library-top .actions button{font-size:14px;padding:11px 13px}.eyebrow{display:none}
 .library-layout{gap:17px}.category-panel{padding:9px 8px;margin:0;border-radius:14px}.category-list{padding:2px 0 6px}.category-link{min-width:100px;flex-direction:row;font-size:14px;min-height:51px;padding:7px 10px}.category-mini{width:26px;height:26px}.category-mini canvas{width:24px;height:24px}
 .library-content{padding:17px 12px 14px;border-radius:15px}.library-heading{gap:13px;align-items:flex-start;flex-direction:column}.library-heading h2{font-size:23px}.library-heading .search{width:100%;max-width:none}.topicbar{margin-bottom:6px}.topicbar button{font-size:14px;padding:8px 10px}.gallery-summary{margin:7px 0 14px}.gallery-summary .hint{display:none}
 .library-content .patterns{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pattern .thumb{padding:9px 9px 25px;aspect-ratio:1}.pattern .caption{padding:12px 10px;min-height:78px}.pattern .caption strong{font-size:15px}.pattern .caption small{font-size:12px;line-height:1.4}
 .designer-top{padding:17px}.designer-title h1{font-size:24px}.designer-top .actions{margin-top:15px}.edit-workspace,.bead-workspace{grid-template-columns:minmax(0,1fr)}.toolrail{gap:5px}.toolrail button{min-width:0;padding:7px 2px;flex:1;min-height:62px}.toolrail button span{font-size:12px}.boardbox{padding:10px}.board-toolbar{gap:9px;flex-wrap:wrap}.board-options{margin-left:auto}.board-options>button{font-size:14px}.board-stats{font-size:13px}.canvaswrap{padding:8px}.board-tip{font-size:13px}.side{padding:16px}.side .palette{gap:12px}.side .swatch{flex-basis:44px}.side .empty-palette{font-size:14px}.chosen-color{max-width:290px}.side h3{font-size:14px}.review-card{border-radius:12px}.gallery-page .footerhint{font-size:12px;line-height:1.6}
}
@media(max-width:380px){.music-player{gap:8px}.music-toggle{flex-basis:40px;width:40px;height:40px}.volume-control .icon{display:none}.volume-control input{width:40px}.nav{padding:8px}.language{min-width:78px}.library-top .actions button{padding:10px}.rain-window{width:68px}.scene-panel{gap:8px}.light-switch button{font-size:14px}.light-switch .icon{display:none}}
@media(prefers-reduced-motion:reduce){body::after,.rain-drops{animation:none}*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
@media print{:root{color-scheme:light;background:white}body{background:white!important}body::before,body::after,.ambience-bar,.skip-link,audio{display:none!important}#printArea,#printArea h2{color:black!important;background:white!important}}

/* Generous previews: three across on desktop and one on small phones. */
.patterns,.library-content .patterns{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.patterns .pattern .thumb{height:clamp(250px,28vw,360px);aspect-ratio:auto;padding:20px 20px 30px;min-height:0;overflow:hidden}
.patterns .pattern .thumb canvas{width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;background:transparent}
.patterns .pattern .caption{padding:17px 18px;min-height:82px}.patterns .pattern .caption strong{font-size:18px}.patterns .pattern .caption small{font-size:14px}
/* Focus keeps the live editor, current row and audio elements in place. */
:root[data-workspace="focus"]{background:var(--paper-soft)}
[data-workspace="focus"] body::before,[data-workspace="focus"] body::after,[data-workspace="focus"] body>header,[data-workspace="focus"] .ambience-bar{display:none}
[data-workspace="focus"] .designer-page{max-width:1700px;padding:14px 22px 28px}
[data-workspace="focus"] .designer-top{position:sticky;top:0;z-index:4;padding:12px 18px;margin-bottom:14px;box-shadow:0 4px 12px #3023140c}
[data-workspace="focus"] .designer-title h1{font-size:23px}
[data-workspace="focus"] .canvaswrap{max-height:calc(100vh - 215px);max-height:calc(100dvh - 215px);min-height:360px}
#focusToggle[aria-pressed="true"]{background:var(--sage);border-color:var(--blue);color:var(--blue)}
@media(max-width:1050px){.patterns,.library-content .patterns{grid-template-columns:repeat(2,minmax(0,1fr))}.patterns .pattern .thumb{height:clamp(270px,38vw,370px)}}
@media(max-width:700px){[data-workspace="focus"] .designer-page{padding:10px 12px 24px}[data-workspace="focus"] .designer-top{padding:10px 12px}[data-workspace="focus"] .designer-top .actions{margin-top:10px;gap:7px}[data-workspace="focus"] .canvaswrap{min-height:280px;max-height:60vh;max-height:60dvh}.patterns .pattern .thumb{height:260px;padding:14px 14px 28px}.patterns .pattern .caption strong{font-size:17px}}
@media(max-width:580px){.patterns,.library-content .patterns{grid-template-columns:minmax(0,1fr);gap:20px}.patterns .pattern .thumb{height:clamp(265px,78vw,380px);padding:18px 18px 30px}.patterns .pattern .caption{padding:15px 17px}.patterns .pattern .caption strong{font-size:18px}}