/* The real classroom becomes the backdrop; the work stays on a soft paper surface. */
:root{--paper:#f4e9dc;--paper-soft:#efe1d8;--paper-deep:#e5d5c7;--muted:#746067;background:#30282b;scroll-behavior:smooth}
body{min-height:100dvh;background:transparent;isolation:isolate}body::before,body::after{display:none!important}
.room-stage,.desk-stage{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;transition:transform 1.6s cubic-bezier(.2,.6,.2,1),opacity 1.6s,filter 1.6s}
.room-picture{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);filter:saturate(.83) sepia(.06);transition:filter 22s,transform 22s}
.room-picture>img:first-child{width:100%;height:100%;display:block}
.room-rain{position:absolute;left:51%;top:5%;width:34%;height:48%;background:url('/assets/rain-overlay.webp') 0 0/180px;clip-path:polygon(0 8%,100% 0,99% 100%,0 96%);mix-blend-mode:screen;filter:grayscale(1);opacity:.52;animation:room-rain 3.8s linear infinite;transition:opacity 2s}
@keyframes room-rain{to{background-position:18px 180px}}
.room-warmth{position:absolute;inset:0;background:linear-gradient(115deg,#f3c3b920,#eea77f20 55%,#dd959817);mix-blend-mode:soft-light;transition:opacity 22s;opacity:1}


.coffee-steam{position:absolute;left:47.1%;top:61%;width:4%;height:9%;transition:opacity 22s}
.coffee-steam i{position:absolute;bottom:0;left:40%;width:19%;height:65%;border-radius:60%;filter:blur(3px);background:linear-gradient(transparent,#fff9e6a6,transparent);animation:steam-drift 6s ease-in-out infinite}
.coffee-steam i:nth-child(2){animation-delay:-2s;left:20%}.coffee-steam i:nth-child(3){animation-delay:-4s;left:65%}
@keyframes steam-drift{0%{transform:translate(0,20%) scale(.6);opacity:0}35%{opacity:.9}100%{transform:translate(20%,-65%) scale(1.3);opacity:0}}

.wandering-cat{position:absolute;left:28%;top:52%;width:13%;height:auto;animation:cat-wander 55s ease-in-out infinite;transform-origin:50% 90%;filter:drop-shadow(0 7px 3px #6c4f3930)}
@keyframes cat-wander{0%,8%{transform:translate(0,0) scaleX(1)}34%,43%{transform:translate(185%,-55%) scaleX(1)}46%,51%{transform:translate(185%,-55%) scaleX(-1)}78%,93%{transform:translate(0,0) scaleX(-1)}96%,100%{transform:translate(0,0) scaleX(1)}}

[data-rain="off"] .room-rain{opacity:0}
.desk-stage{background:url('/assets/lofi-desk.webp') center/cover;opacity:0;transform:translateY(30%) scale(1.12);z-index:-1}
[data-view="edit"] .room-stage,[data-view="bead"] .room-stage{transform:scale(1.55) translateY(-18%);opacity:0}
[data-view="edit"] .desk-stage,[data-view="bead"] .desk-stage{opacity:1;transform:translateY(0) scale(1)}
[data-view="home"] .room-stage,[data-view="folders"] .room-stage{transform:scale(1.05) translateY(-2%);filter:blur(2px)}
[data-menu="open"] .room-stage{transform:translateX(5%) scale(1.08)}
.room-header{position:relative;z-index:20;display:block;height:178px;background:linear-gradient(#f9e9dcbf,transparent);box-shadow:none;border:0;padding:0}
.room-header .brand{position:absolute;top:7px;left:50%;transform:translateX(-50%);display:block;height:154px;width:350px;filter:drop-shadow(0 5px 6px #503e3b26)}
.room-header .brand img{width:350px;height:154px;object-fit:contain;transform:translateX(8%)}
.menu-toggle{position:absolute;top:102px;left:28px;display:grid;place-items:center;width:54px;height:50px;padding:10px}
.menu-toggle svg{width:25px;height:25px}
.header-right{position:absolute;right:28px;top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;max-width:244px}
.header-right .adult,.header-right .language{min-width:0;background:#f6e8db;min-height:43px;font-size:14px;padding:8px 11px;border-radius:14px}
.header-right #soundMenuToggle{grid-column:1/-1;font-size:15px}
.main-menu{position:fixed;inset:0 auto 0 0;width:33.333vw;min-width:325px;max-width:560px;padding:25px 24px 32px;z-index:70;background:#f3e7dcf7;backdrop-filter:blur(18px);border-right:1px solid #c5a99e;box-shadow:10px 0 60px #4b36362b;transform:translateX(-104%);visibility:hidden;transition:transform .65s cubic-bezier(.2,.75,.2,1),visibility .65s;overflow:auto;overscroll-behavior:contain}
[data-menu="open"] .main-menu{transform:translateX(0);visibility:visible}
.menu-scrim{position:fixed;inset:0;z-index:60;background:#49332d35;backdrop-filter:blur(1px)}
.menu-heading,.sound-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;font-size:19px;font-weight:700}
.menu-heading button,.sound-heading button{min-height:40px;width:40px;padding:0;font-size:25px}
.main-menu .nav{display:block;width:100%;text-align:left;min-height:52px;padding:13px 15px;font-size:17px;background:transparent;box-shadow:none;border:1px solid transparent}
.main-menu .nav:hover{background:#e8d4c8;border-color:#d8baad}.main-menu #homeBtn{background:#e7cdcf}
#patternCategories{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:12px 0 20px}
#patternCategories>button{background:transparent;box-shadow:none;text-align:left;border:0;font-size:15px;padding:8px 16px}
.menu-category{padding:0 8px;border-radius:12px}.menu-category summary{font-size:17px;cursor:pointer;padding:12px 7px;border-radius:10px;list-style:none}.menu-category summary::after{content:'+';float:right;margin-right:6px;color:var(--muted)}.menu-category[open] summary::after{content:'−'}.menu-category[open]{background:#e8d8ce90}
.menu-category>div{display:grid;grid-template-columns:1fr;gap:3px;padding:0 8px 10px 27px}
.menu-category button{border:0;box-shadow:none;background:transparent;text-align:left;min-height:39px;padding:9px 12px;font-size:15px;font-weight:400}.menu-category button:hover{background:#f8ece4}
.menu-separator{height:1px;background:#d9c2b6;margin:14px 0}
.recent-shortcut{margin:4px 0 8px 18px;max-width:calc(100% - 18px);padding:10px 12px;text-align:left;background:#dde1d0;box-shadow:none}.recent-shortcut span{display:block;font-size:14px;font-weight:400;margin-bottom:4px}.recent-shortcut strong{display:block;overflow-wrap:anywhere}
.sound-panel{position:absolute;right:28px;top:128px;z-index:55;width:370px;max-width:calc(100vw - 28px);padding:22px;background:#f3e7dcf7;backdrop-filter:blur(18px);box-shadow:0 15px 60px #4936333b;border:1px solid #ceb2a5;border-radius:22px;max-height:calc(100dvh - 144px);overflow:auto}
.sound-panel .track-heading{display:flex;gap:12px;align-items:center}.sound-panel .track-heading>div{flex:1;min-width:0}.sound-panel .track-heading strong,.sound-panel #trackArtist,.sound-panel #musicState{display:block;line-height:1.4}.sound-panel #trackTitle{font-size:16px;overflow-wrap:anywhere}.sound-panel #trackArtist{font-size:14px}.sound-panel #musicState{font-size:13px;margin-top:4px}
.sound-panel .track-heading>button{width:43px;min-width:43px;padding:8px}.sound-panel label{font-size:14px;margin:15px 0 5px}
.audio-slider{display:flex;gap:9px;align-items:center}.audio-slider button{padding:3px;width:34px;min-width:34px;min-height:34px}.audio-slider input{width:100%;min-width:0;min-height:36px;padding:0;border:0;background:transparent}.audio-slider output{min-width:38px;font-size:13px;text-align:right}
.sound-panel .music-credit{font-size:12px;margin-top:14px}.sound-panel .one-track{font-size:13px;line-height:1.4;margin:7px 0 0}.sound-panel .rain-title{display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.rain-title button{font-size:15px;min-height:41px}.sound-panel #motionToggle{width:100%;margin-top:19px;font-size:14px}
.room-controls{position:fixed;z-index:5;left:28px;bottom:35px;display:flex;align-items:center;gap:18px}.room-controls .light-switch{padding:5px;background:#f4e7dfed;box-shadow:0 6px 25px #59413520}.room-controls .light-switch button{min-height:43px;font-size:16px}.room-controls #roomPatterns{padding:15px 24px;min-height:58px;font-size:19px}
.audio-unlock{position:fixed;z-index:40;right:25px;bottom:19px;max-width:300px;margin:0;padding:10px 16px;border-radius:13px;background:#f7e8d5e8;color:#69535a;font-size:14px;box-shadow:0 4px 16px #372b2417;pointer-events:none}
body>main{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:5px 28px 50px}
[data-view="room"] main{height:0;padding:0;overflow:hidden}[data-view="room"] .room-stage{filter:none}
:root:not([data-view="room"]) .room-controls{position:relative;bottom:auto;left:auto;justify-content:center;margin:-10px auto 20px}:root:not([data-view="room"]) #roomPatterns{display:none}
.library-content{padding:27px;background:#f2e7deed;border-radius:24px;box-shadow:0 12px 60px #59433a1c;backdrop-filter:blur(14px)}
.library-heading h1{font-size:30px;line-height:1.15}.library-heading .search{width:310px}
.library-tools{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:20px}.library-tools label{margin:0;font-size:14px;display:flex;flex-direction:column;gap:5px}.library-tools select{min-width:135px;font-size:15px;background:#f9eee4}.library-tools>button{margin-right:auto}
.library-content .patterns{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.patterns .pattern{background:#f3dfd7;border-radius:18px;box-shadow:0 4px 0 #9c7f6b15;border:1px solid #cfb8ab}.patterns .pattern .thumb{height:clamp(235px,26vw,340px);background:#e5d6c9;padding:18px 18px 30px;border-radius:16px 16px 0 0}.patterns .pattern .caption{min-height:86px;padding:15px 18px;background:#f1e5d9}.patterns .pattern canvas{background:transparent}.patterns .pattern .caption small{color:#80636d;overflow-wrap:anywhere}.patterns .pattern .typebadge{background:#f5e5d7;color:#665053}
.gallery-pages{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin:28px 0 4px}.gallery-pages span{font-size:15px}.gallery-pages button{font-size:15px}
.recent-files{background:#f2e6dbf2;padding:22px;border:1px solid var(--line);border-radius:20px;margin:20px 0}.recent-files h2{font-size:22px}.recent-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.recent-list button{text-align:left;min-width:0}.recent-list span{display:block;font-size:14px;color:var(--muted);margin-top:5px}.recent-list strong{overflow-wrap:anywhere}
.designer-page{max-width:1450px!important}.designer-top{background:#f1e5dadf;border-radius:22px;backdrop-filter:blur(12px);padding:18px 22px}.designer-title h1{font-size:26px}.designer-title .back{margin-bottom:4px}
.edit-workspace{grid-template-columns:86px minmax(0,1fr) 248px;gap:15px}.bead-workspace{grid-template-columns:minmax(0,1fr) 310px;gap:18px}.side,.boardbox,.toolrail{background:#f1e5dadf;backdrop-filter:blur(12px)}.side{min-width:0}.toolrail{border-radius:20px}.toolrail button{min-height:68px;padding:9px 2px}.toolrail button span{font-size:13px}.board-options{flex-wrap:wrap;justify-content:flex-end}.board-options #look{padding:9px 12px;font-size:15px;min-height:42px}
.board-with-edges{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;grid-template-rows:34px minmax(200px,1fr) 34px;gap:6px;min-width:0}
.board-with-edges .canvaswrap{grid-area:2/2;max-height:66dvh;padding:8px;background:#e1d0bdbf;min-width:0;min-height:240px}.add-board{padding:0;min-width:34px;min-height:34px;width:34px;height:34px;align-self:center;justify-self:center;font-size:22px;box-shadow:0 3px 0 #92695526!important;border-radius:11px}.add-top{grid-area:1/2}.add-left{grid-area:2/1}.add-right{grid-area:2/3}.add-bottom{grid-area:3/2}.canvaswrap canvas{flex:none;max-width:none}
.rowguide{display:flex;flex-direction:column;gap:13px}.rowguide>h2,.rowguide>p,.rowguide>label{margin:0}.rowguide .rowbar{display:flex;flex-direction:column;gap:9px;margin:0;padding:14px 0;background:#e7d4c67a;border-radius:15px}.rowguide .rowbar strong{font-size:22px}.rowguide .rowbar button{width:75px;min-height:40px;padding:5px;font-size:22px}.rowguide .rowread{display:flex;flex-wrap:nowrap;white-space:nowrap;overflow:auto;gap:7px;padding:5px 0 12px;margin:0;max-width:100%;min-height:65px;scrollbar-width:thin}.rowread .run{flex:0 0 auto;white-space:nowrap;min-height:42px;padding:8px;font-size:16px;background:#f7ebe1}.rowread .dot{width:22px;height:22px;flex:none}.rowguide #doneRow{font-size:16px}.rowguide .checklabel{font-size:15px;align-items:flex-start}.rowguide input{flex:none;margin-top:1px}
.desk-companions{height:175px;display:flex;align-items:center;justify-content:space-between;padding:10px 8%;pointer-events:none}.desk-beadjar{width:115px;height:125px;object-fit:contain;mix-blend-mode:multiply;transform:rotate(-8deg)}
.mini-tablet{width:180px;height:155px;transform:rotate(9deg);padding:9px;border:7px solid #65606a;border-radius:17px;background:#efe3d1;box-shadow:4px 7px 7px #523e3533;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:33px 75px 16px;gap:2px;overflow:hidden}.mini-tablet>img{grid-column:1/-1;width:100%;height:34px;object-fit:contain}.mini-tablet>canvas{grid-column:1/-1;width:100%;height:75px;object-fit:contain}.mini-tablet>span{font-size:12px;grid-column:1/-1;text-align:center}
:root[data-workspace="focus"] .room-header,:root[data-workspace="focus"] .room-controls,:root[data-workspace="focus"] .desk-companions,:root[data-workspace="focus"] .room-stage,:root[data-workspace="focus"] .desk-stage{display:none}:root[data-workspace="focus"] body{background:#e8dccf}:root[data-workspace="focus"] .board-with-edges .canvaswrap{max-height:calc(100dvh - 255px)}
[data-motion="off"] .room-rain,[data-motion="off"] .coffee-steam i,[data-motion="off"] .wandering-cat{animation:none}[data-motion="off"] .room-picture,[data-motion="off"] .room-stage,[data-motion="off"] .desk-stage,[data-motion="off"] .room-warmth{transition:none}
@media(min-width:1700px){.room-header .brand{top:12px}.main-menu{max-width:none}}
@media(max-width:1100px){.edit-workspace{grid-template-columns:minmax(0,1fr) 240px}.toolrail{grid-column:1/-1;flex-direction:row;gap:8px}.toolrail button{flex:1;min-width:0}.bead-workspace{grid-template-columns:minmax(0,1fr) 270px}.designer-top .actions{gap:7px}.designer-top .actions button{font-size:14px;padding:10px}.board-toolbar{flex-wrap:wrap}.board-options{margin-left:auto}.library-content .patterns{gap:16px}}
@media(max-width:800px){.room-header{height:170px}.room-header .brand{width:300px;height:136px}.room-header .brand img{width:300px;height:136px}.header-right{right:16px;top:14px;max-width:156px;gap:6px}.header-right #soundMenuToggle{font-size:14px}.header-right .adult span{display:none}.menu-toggle{left:18px}.library-content{padding:20px}.library-tools{gap:9px}.library-tools label{flex:1}.library-tools>button{width:100%}.library-content .patterns{grid-template-columns:repeat(2,minmax(0,1fr))}.patterns .pattern .thumb{height:280px}.library-heading{flex-wrap:wrap}.library-heading .search{width:100%;max-width:none}.edit-workspace,.bead-workspace{grid-template-columns:minmax(0,1fr)}.bead-workspace .side{grid-row:1}.rowguide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px}.rowguide .rowbar{grid-row:1/4;grid-column:2;padding:8px 14px}.rowguide .rowread{grid-column:1/-1;grid-row:4}.rowguide #doneRow{grid-column:1}.rowguide #progress{grid-column:1/-1}.recent-list{grid-template-columns:repeat(2,minmax(0,1fr))}.board-with-edges .canvaswrap{max-height:60dvh}.desk-companions{height:150px}.audio-unlock{font-size:13px;max-width:230px}.main-menu{width:45vw}.room-controls{gap:10px;left:18px;bottom:27px}}
@media(max-width:580px){.room-header{height:170px}.room-header .brand{width:255px;height:115px;top:2px}.room-header .brand img{width:255px;height:115px}.header-right{top:114px;right:14px;display:flex;gap:7px;max-width:calc(100vw - 90px)}.header-right #soundMenuToggle{min-width:44px;padding:10px 12px}.header-right #soundMenuToggle span{display:none}.header-right .adult,.header-right .language{min-height:44px}.menu-toggle{top:114px;left:14px;width:46px;height:44px}.main-menu{width:88vw;min-width:0;padding:22px 18px}.sound-panel{right:14px;top:168px;max-height:calc(100dvh - 182px);padding:18px}.room-controls{left:14px;bottom:28px;right:14px;flex-wrap:wrap;justify-content:center;gap:12px}.room-controls .light-switch button{font-size:15px}.room-controls #roomPatterns{min-height:52px;padding:12px 22px}.audio-unlock{bottom:5px;left:14px;right:14px;max-width:none;padding:5px 10px;font-size:12px;text-align:center;background:#f7e8d5b8}.room-controls{padding-bottom:20px}body>main{padding:0 12px 32px}.library-content{padding:17px 12px;border-radius:20px}.library-heading h1{font-size:27px}.library-tools>button{min-height:40px}.library-tools label{min-width:calc(50% - 9px)}.library-tools select{width:100%;min-width:0}.library-content .patterns{grid-template-columns:minmax(0,1fr);gap:19px}.patterns .pattern .thumb{height:clamp(260px,75vw,380px)}.gallery-pages{gap:10px}.gallery-pages button{font-size:14px;padding:9px}.recent-list{grid-template-columns:1fr}.designer-top{padding:15px}.designer-top .actions{margin-top:13px}.designer-top .actions button{flex:1;padding:9px 7px}.designer-title h1{font-size:25px}.boardbox{padding:9px}.board-with-edges{grid-template-columns:27px minmax(0,1fr) 27px;grid-template-rows:28px minmax(180px,1fr) 28px;gap:3px}.add-board{width:27px;min-width:27px;height:28px;min-height:28px;font-size:19px}.board-with-edges .canvaswrap{min-height:220px;padding:4px}.toolrail{gap:4px;padding:6px}.toolrail button{padding:7px 0;min-height:64px}.toolrail .icon{width:18px}.toolrail button span{font-size:12px}.rowguide{display:flex}.rowguide .rowbar{flex-direction:row;justify-content:space-between;padding:8px}.rowguide .rowbar button{width:46px}.rowguide .rowbar strong{font-size:20px}.rowguide .rowread{min-height:56px}.desk-companions{padding:5px 3%}.desk-beadjar{width:95px}}
@media(prefers-reduced-motion:reduce){.room-rain,.coffee-steam i,.wandering-cat{animation:none}.room-stage,.desk-stage,.room-picture,.room-warmth,.main-menu{transition:none}}
@media print{.room-stage,.desk-stage,.room-controls,.room-header,.main-menu,.menu-scrim,.sound-panel,.audio-unlock,.desk-companions{display:none!important}body>main{display:none!important}}

.desk-stage .wandering-cat{left:27%;top:auto;bottom:1%;width:145px;animation-duration:65s}.desk-stage .wandering-cat{animation-play-state:paused}[data-view="edit"] .desk-stage .wandering-cat,[data-view="bead"] .desk-stage .wandering-cat{animation-play-state:running}

.desk-stage{transition:transform 1.6s cubic-bezier(.2,.6,.2,1),opacity 1.6s,filter 22s}

/* User-supplied main film already contains rain and coffee steam. */
.room-picture>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.room-picture{filter:none}

:root:not([data-view="room"]) .room-controls{display:none}

/* A fixed camera: menus move, the room does not. */
.room-stage,.desk-stage,[data-view="edit"] .room-stage,[data-view="bead"] .room-stage,[data-view="home"] .room-stage,[data-view="folders"] .room-stage,[data-menu="open"] .room-stage,[data-view="edit"] .desk-stage,[data-view="bead"] .desk-stage{transform:none;transition:opacity .5s,filter .5s}
.room-picture{transform:translate(-50%,-50%);transition:none}

@media(max-width:580px){
 /* Show the complete landscape room instead of cropping it to a portrait strip. */
 .room-stage::before{content:'';position:absolute;inset:-25px;background:url('/assets/main-room-poster.webp') center/cover;filter:blur(22px) brightness(.7);opacity:.8}
 .room-stage .room-picture{top:104px;left:0;bottom:24px;width:100%!important;height:auto!important;transform:none}
 .room-picture>img:first-child,.room-picture>video{width:100%;height:100%;object-fit:contain}
 .room-header{height:108px;background:linear-gradient(#f9e9dc70,transparent)}
 .room-header .brand{top:2px;width:178px;height:76px}
 .room-header .brand img{width:178px;height:76px}
 .menu-toggle{top:72px;left:10px;width:44px;height:44px;padding:10px}
 .header-right{top:72px;right:10px;gap:6px;max-width:calc(100vw - 74px)}
 .header-right .adult,.header-right .language,.header-right #soundMenuToggle{min-height:44px;padding:6px 9px;font-size:14px}
 .header-right .adult,.header-right #soundMenuToggle{width:44px;min-width:44px}
 .header-right .language{width:96px}
 .sound-panel{top:126px;max-height:calc(100dvh - 140px);padding:16px}
 .audio-unlock{bottom:8px;left:20px;right:20px;font-size:12px;padding:5px 9px}
 .main-menu{padding:18px 14px}
 .main-menu .nav{font-size:16px;min-height:44px;padding:10px 12px}
}

/* Enter the same classroom's white table; camera stays still once settled. */
.desk-stage{background-image:url('/assets/white-craft-table.webp');background-position:center;transform:translateY(16vh) scale(1.35);opacity:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .9s ease}
.room-stage{transform-origin:50% 72%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .9s ease,filter .7s}
:is([data-view="edit"],[data-view="bead"]) .room-stage{transform:scale(1.5) translateY(-16%);opacity:0}
:is([data-view="edit"],[data-view="bead"]) .desk-stage{transform:translateY(0) scale(1);opacity:1}
:is([data-view="edit"],[data-view="bead"]) .room-header{height:66px;background:transparent}
:is([data-view="edit"],[data-view="bead"]) .room-header .brand{display:none}
:is([data-view="edit"],[data-view="bead"]) .menu-toggle{top:10px;left:14px;width:44px;height:44px}
:is([data-view="edit"],[data-view="bead"]) .header-right{top:10px;right:14px;display:flex;gap:8px;max-width:calc(100vw - 84px)}
:is([data-view="edit"],[data-view="bead"]) .sound-panel{top:64px;max-height:calc(100dvh - 78px)}
.designer-page{padding-top:0;padding-bottom:20px}
.designer-top{padding:12px 16px;margin-bottom:12px;background:#fff5eccc}
.designer-title h1{font-size:23px;margin-bottom:4px}
.designer-top .actions{gap:8px}
.bead-workspace{grid-template-columns:minmax(0,1fr) 252px;gap:10px;align-items:start}
.bead-workspace .side{grid-column:2;grid-row:1;padding:13px;background:#fff7eddf}
.boardbox{background:#fff8edb8;padding:10px}
.rowguide{display:flex;flex-direction:column;gap:8px}
.rowguide>h2{font-size:18px;margin:0}
.rowguide .rowbar{flex-direction:row;align-items:center;justify-content:space-between;padding:6px;margin:0;gap:6px}
.rowguide .rowbar button{width:44px;min-height:44px}
.rowguide .rowbar strong{font-size:17px}
.rowguide .rowread{min-height:48px;padding:4px 0 6px}
.rowguide .rowread .run{min-height:38px;padding:6px;font-size:15px}
.rowguide #progress{font-size:13px;line-height:1.3}
@media(min-width:701px) and (max-width:1180px){
 body>main.designer-page{padding:0 14px 20px}
 .bead-workspace{grid-template-columns:minmax(0,1fr) 240px;gap:10px}
 .bead-workspace .side{grid-column:2;grid-row:1;position:sticky;top:12px}
 .edit-workspace{grid-template-columns:minmax(0,1fr) 220px;gap:10px}
 .edit-workspace .toolrail{grid-column:1/-1}
 .board-with-edges .canvaswrap{min-height:240px;max-height:65dvh}
 .designer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
 .designer-top .actions{margin-top:0;justify-content:flex-end}
 .designer-top .actions button{min-height:44px;font-size:14px;padding:9px 12px}
}
@media(max-width:700px){
 body>main.designer-page{padding:0 8px 16px}
 .designer-top{padding:8px 10px;margin-bottom:8px;border-radius:15px}
 .designer-title h1{font-size:20px}
 .designer-title .back{padding:5px 9px;min-height:36px}
 .designer-top .actions{margin-top:7px;gap:6px}
 .designer-top .actions button{padding:8px 5px;min-height:44px;font-size:14px}
 .bead-workspace,.edit-workspace{grid-template-columns:minmax(0,1fr);gap:5px}
 .bead-workspace>.boardbox{grid-column:1;grid-row:1;margin:0;padding:7px;border-radius:16px 16px 8px 8px}
 .bead-workspace>.side{grid-column:1;grid-row:2;padding:9px 11px;margin:0;border-radius:8px 8px 16px 16px}
 .bead-workspace .board-with-edges .canvaswrap{min-height:160px;max-height:42dvh;padding:4px}
 .bead-workspace .board-toolbar{margin-bottom:6px;gap:5px}
 .rowguide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px}
 .rowguide>h2,.rowguide>p.hint:not(#progress){display:none}
 .rowguide .rowbar{grid-column:1/-1;grid-row:1;padding:2px 5px;background:transparent}
 .rowguide .rowread{grid-column:1/-1;grid-row:2;padding:3px 0 5px;min-height:42px}
 .rowguide .checklabel{grid-column:1;grid-row:3;font-size:14px;align-self:center;margin:0}
 .rowguide #doneRow{grid-column:2;grid-row:3;font-size:14px;padding:8px;min-height:44px}
 .rowguide #progress{grid-column:1/-1;grid-row:4;margin:0}
}
@media(prefers-reduced-motion:reduce){.room-stage,.desk-stage{transition:none!important}}
[data-motion="off"] .room-stage,[data-motion="off"] .desk-stage{transition:none!important}

/* Use the same continuous camera easing in both directions and every view. */
:root .room-stage,:root .desk-stage{transition:transform 3.5s cubic-bezier(.25,.1,.25,1),opacity 3.5s ease-in-out,filter 3.5s ease-in-out;will-change:transform,opacity;backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){:root .room-stage,:root .desk-stage{will-change:auto}}
[data-motion="off"] .room-stage,[data-motion="off"] .desk-stage{will-change:auto}

/* Pull the viewpoint back from the table, then lift it into the room. */
:root[data-camera="rise"] .desk-stage{animation:leave-table 5s both;transform-origin:50% 70%;transition:none}
:root[data-camera="rise"] .room-stage{animation:stand-up 5s both;transform-origin:50% 72%;transition:none}
@keyframes leave-table{
 0%{transform:translateY(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.25,.1,.25,1)}
 20%{transform:translateY(4vh) scale(1.12);opacity:1;animation-timing-function:cubic-bezier(.3,0,.2,1)}
 92%{transform:translateY(14vh) scale(1.32);opacity:0;animation-timing-function:ease-out}
 100%{transform:translateY(16vh) scale(1.35);opacity:0}
}
@keyframes stand-up{
 0%{transform:scale(1.5) translateY(-16%);opacity:0;animation-timing-function:ease-in-out}
 15%{transform:scale(1.42) translateY(-14%);opacity:.08;animation-timing-function:cubic-bezier(.3,0,.2,1)}
 92%{transform:scale(1.025) translateY(-1%);opacity:1;animation-timing-function:ease-out}
 100%{transform:scale(1) translateY(0);opacity:1}
}
@media(prefers-reduced-motion:reduce){:root[data-camera="rise"] .desk-stage,:root[data-camera="rise"] .room-stage{animation:none!important}}
:root[data-motion="off"] .desk-stage,:root[data-motion="off"] .room-stage{animation:none!important}

#patternCategories .category-count{display:inline-flex;align-items:center;justify-content:center;min-width:2em;padding:2px 7px;margin-left:auto;flex-shrink:0;border-radius:999px;background:#e5d0da;color:#692c4d;font-size:12px;line-height:1.5;font-weight:700;white-space:nowrap;vertical-align:middle}

/* Reserve a quiet loading row so incoming pages do not move earlier cards. */
.gallery-load-sentinel{min-height:48px;display:grid;place-items:center;color:var(--muted);font-size:14px;overflow-anchor:none}

#patternCategories button[data-group],#patternCategories .menu-category>summary{display:flex;align-items:center;gap:6px}
#patternCategories .category-count:empty{visibility:hidden}