@font-face{font-family:Fredoka;src:url('./assets/fonts/fredoka-latin-variable.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Nunito;src:url('./assets/fonts/nunito-sans-latin-variable.woff2') format('woff2');font-weight:200 900;font-display:swap}
:root{--ink:#393443;--muted:#8a8293;--purple:#8059c5;--purple-dark:#6642a7;--lavender:#eee6fa;--paper:#fff;--cream:#faf7f1;--line:#e9e4ed;--green:#659d86;--chosen-color:#9b78eb;--zoom:1;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button,select{touch-action:manipulation}button{border:0;background:none}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bd9de9;outline-offset:3px}input:focus,select:focus{outline:2px solid #c8b1e9;outline-offset:2px}input,select{min-width:0}button svg{flex-shrink:0}button{transition:background .15s,transform .15s,box-shadow .15s}button:active:not(:disabled){transform:translateY(1px)}button[hidden],div[hidden],label[hidden]{display:none!important}a{color:var(--purple)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Fredoka,system-ui,sans-serif;font-weight:500}h1,h2{letter-spacing:-.4px}svg{display:inline-block;vertical-align:middle}::selection{background:#e0d1f4}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{border-radius:5px;background:#d8d0de}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app{height:100dvh;min-height:560px;display:flex;flex-direction:column;overflow:hidden}.topbar{height:80px;min-height:80px;padding:0 26px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line);background:#fffdfa;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:10px;text-align:left;padding:0;min-width:194px}.brand-emblem{height:45px;width:45px;background:#efe3fc;border:1px solid #e3d5f2;display:grid;place-items:center;border-radius:15px;transform:rotate(-7deg);color:var(--purple);box-shadow:3px 3px 0 #f1caae}.brand-emblem svg{transform:rotate(3deg)}.brand>span:last-child{display:flex;flex-direction:column}.wordmark{font-family:Fredoka,sans-serif;font-size:29px;font-weight:600;letter-spacing:-1px;line-height:1}.brand-dot{font-size:17px;color:#edac66;display:inline-block;transform:translate(1px,-6px)}.brand-subtitle{text-transform:uppercase;font-weight:800;font-size:8.8px;letter-spacing:2.2px;color:var(--purple);margin-top:5px}.header-divider{height:30px;width:1px;background:var(--line)}.room-pill{display:flex;align-items:center;gap:8px;max-width:230px;padding:10px 3px;color:#77707f;font-size:12px;font-weight:700}.room-pill #room-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-pill>svg{opacity:.5;transform:rotate(90deg)}.status-dot{height:6px;width:6px;display:inline-block;flex:none;background:#c7c1ce;border-radius:50%}.status-dot.online,.tiny-online{background:#74a991;box-shadow:0 0 0 3px #74a99116}.topbar-spacer{flex:1}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:#fff;border:1px solid #dfd6e7;border-radius:11px;padding:11px 17px;font-size:12px;font-weight:800;line-height:1.2;white-space:nowrap;min-height:41px}.button:hover{background:#f3edf9;border-color:#cbb7e3}.button.primary{color:#fff;background:var(--purple);border-color:var(--purple);box-shadow:0 3px 0 #66439a18}.button.primary:hover{background:var(--purple-dark);border-color:var(--purple-dark)}.button.subtle{background:transparent;border-color:transparent;color:#7c708b;padding-inline:9px}.unlock-top{background:#fff4de;border-color:#f0deba;color:#8c6539;padding-inline:13px;font-size:11px}.unlock-top b{font-weight:900;margin-left:6px}.unlock-top:hover{background:#ffedca;border-color:#e8c88e}.header-members{display:flex;align-items:center;padding-right:4px;gap:0}.avatar{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:50%;border:2px solid #fff;color:#fff;background:var(--member-color,#9b78eb);font-size:9px;font-weight:900;letter-spacing:.2px;box-shadow:0 0 0 1px #00000005}.header-members .avatar+.avatar{margin-left:-7px}.avatar.more{color:var(--purple);background:#eae1f7}.avatar:hover{transform:translateY(-2px);z-index:1}.icon-button{width:32px;height:32px;display:inline-flex;justify-content:center;align-items:center;border-radius:8px;color:#8c8298;padding:0;flex-shrink:0}.icon-button>span{display:none}.icon-button:hover{background:#eee6f8;color:var(--purple)}.eyebrow{font-size:8.5px;font-weight:900;letter-spacing:1.8px;color:#a296ae;line-height:1.6;display:block}.app-layout{display:grid;grid-template-columns:251px minmax(340px,1fr)255px;flex:1;min-height:0;overflow:hidden}.book-panel{display:flex;flex-direction:column;background:#fffdfb;border-right:1px solid var(--line);min-height:0;z-index:5}.panel-heading{padding:25px 20px 16px}.panel-heading h1{font-size:22px;line-height:1.35;margin-top:5px;white-space:nowrap}.panel-heading p{font-size:10px;line-height:1.6;color:#9a8f9e;margin-top:6px}.tiny-flower{display:inline-block;font-size:22px;font-weight:400;color:#e5b5c6;margin-left:7px;transform:rotate(-14deg)}.search-wrap{margin:0 18px;display:flex;align-items:center;gap:8px;border-radius:9px;background:#f7f4f7;border:1px solid #ede8ee;color:#b5a9bd;padding:0 10px;height:36px}.search-wrap input{border:0;outline:0!important;background:none;width:100%;font-size:11px;height:100%}.search-wrap input::placeholder{color:#afa3b7}.book-filters{display:flex;margin:14px 18px 0;gap:3px;padding:3px;border:1px solid #eee8f0;border-radius:8px;background:#faf7fc}.book-filters button{flex:1;padding:6px 2px;font-size:9px;font-weight:800;white-space:nowrap;border-radius:5px;color:#a196aa}.book-filters button.active{background:white;box-shadow:0 1px 3px #4e306014;color:var(--purple)}.category-control{display:flex;justify-content:space-between;align-items:center;margin:14px 20px 11px;color:#a69aa9;font-size:10px}.category-control select{font-weight:800;border:0;background:transparent;outline:none;color:#8b8094;font-size:10px;max-width:170px;padding:3px 14px 3px 0}.category-control>span{background:#f2edf5;border-radius:5px;padding:2px 5px;font-size:9px}.page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:14px 10px;padding:3px 17px 19px;overflow-y:auto;flex:1;min-height:0;scroll-behavior:smooth}.page-card{display:flex;flex-direction:column;min-width:0;padding:0;text-align:left;position:relative}.page-card-art{width:100%;aspect-ratio:1;position:relative;display:grid;place-items:center;background:linear-gradient(140deg,#f6f0e9,#f6f1f9);border:1.5px solid transparent;border-radius:11px;transition:border-color .2s,box-shadow .2s}.page-card:nth-child(3n+1) .page-card-art{background:#f2edf9}.page-card:nth-child(3n+2) .page-card-art{background:#f8eee3}.page-card:nth-child(3n+3) .page-card-art{background:#eaf2ee}.page-card:hover .page-card-art{border-color:#d3bce9}.page-card.selected .page-card-art{border-color:#a383d1;box-shadow:0 0 0 3px #a383d11c;background:#eee6fa}.page-card-art img{width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 2px 1px #4c295117);transition:transform .2s}.page-card:hover img{transform:rotate(-3deg) scale(1.025)}.page-card-number{font-size:8px;font-weight:900;position:absolute;top:5px;left:6px;color:#8d7e9b;background:#ffffffb5;border-radius:3px;min-width:15px;text-align:center;padding:1px 2px}.page-card-free,.page-card-lock{position:absolute;right:5px;top:5px;background:#ffffffd6;color:#8ca292;font-size:6px;font-weight:900;letter-spacing:.45px;padding:2px 4px;border-radius:4px}.page-card-lock{color:#a99bb4;padding:3px}.page-card-title{font-size:10px;font-weight:800;line-height:1.35;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.page-card-subtitle{font-size:8px;color:#b1a5b7;line-height:1.5;margin-top:2px}.page-card.selected .page-card-title{color:var(--purple)}.card-presence{display:flex;position:absolute;bottom:5px;left:5px}.card-presence>span{display:grid;place-items:center;width:17px;height:17px;border:1.5px solid white;border-radius:50%;color:white;background:var(--member-color,#a58bd1);font-size:6px;font-weight:900}.card-presence>span+span{margin-left:-4px}.started-dot{width:6px;height:6px;border-radius:50%;background:#83b69c;position:absolute;bottom:8px;right:7px;box-shadow:0 0 0 2px white}.empty-book{grid-column:1/-1;text-align:center;padding:30px 12px;color:#a497ab;font-size:12px;line-height:1.6}.book-unlock{margin:12px 14px 8px;display:flex;align-items:center;text-align:left;gap:8px;background:linear-gradient(125deg,#f5eafc,#fceddf);border:1px solid #ebdcf1;border-radius:11px;padding:12px 9px;color:#8b65b1}.book-unlock-icon{color:#b48bd5;flex:none}.book-unlock>span:nth-child(2){flex:1;min-width:0}.book-unlock strong{font-size:9px;display:block;white-space:nowrap}.book-unlock small{font-size:8px;color:#b193b7;display:block;margin-top:4px}.panel-footer{display:flex;justify-content:space-between;align-items:center;padding:5px 16px 12px;color:#b1a7b7;font-size:7.2px}.panel-footer button{font-size:8px;color:#92829e;padding:2px;text-decoration:underline;text-underline-offset:3px}
.workspace{display:flex;flex-direction:column;min-height:0;min-width:0;background:#f8f5ef;position:relative}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:26px 31px 16px}.workspace-heading h2{font-size:25px;margin-top:4px;color:#574563;line-height:1.25}.workspace-heading .eyebrow{color:#ad9cb6;font-size:8px}.page-badge{border:1px solid #dbdfce;background:#edf1e7;color:#8b9d6d;letter-spacing:1px;font-weight:900;font-size:7px;padding:6px 8px;border-radius:5px;white-space:nowrap}.page-badge.locked{background:#f4e9fb;border-color:#e3cdef;color:#9b79b0}.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 30px 16px;gap:8px}.view-switch{display:flex;background:#ede8ee;border:1px solid #e9e2eb;border-radius:8px;padding:3px;gap:1px}.view-switch button{border-radius:5px;padding:6px 12px;white-space:nowrap;font-size:10px;font-weight:800;color:#a194aa}.view-switch button.active{color:#8c66ba;background:#fff;box-shadow:0 1px 3px #53356a0f}.toolbar-actions{display:flex;align-items:center;gap:3px}.toolbar-separator{height:17px;background:#e3dce9;width:1px;margin-inline:4px}.canvas-area{flex:1;min-height:0;overflow:auto;position:relative;display:grid;place-items:center;container-type:size;padding:22px 24px;background-image:radial-gradient(#c9bdcc45 .65px,transparent .65px);background-size:18px 18px;background-position:7px 7px}.paper-surround{--zoom:1;width:calc(min(calc(100cqw - 72px),calc(100cqh - 54px),760px)*var(--zoom));min-width:200px;aspect-ratio:1;position:relative;flex-shrink:0;margin:auto;z-index:1}.drawing-paper{position:relative;background:#fff;width:100%;height:100%;box-shadow:0 9px 27px #6f526315,0 1px 3px #674d6013;border:1px solid #ece7e9;border-radius:3px;isolation:isolate}.drawing-paper::before,.drawing-paper::after{content:'';position:absolute;inset:0;z-index:-1;background:#fffdf9;border:1px solid #eae3e4;transform:rotate(-1.2deg);box-shadow:0 1px 1px #674d600b}.drawing-paper::after{transform:rotate(.8deg);z-index:-2}#coloring-canvas{display:block;width:100%;height:100%;position:relative;z-index:1;background:#fff;border-radius:3px;cursor:crosshair}#coloring-canvas[data-tool=eyedropper]{cursor:crosshair}#coloring-canvas[data-tool=fill]{cursor:crosshair}.paper-tape{position:absolute;top:-10px;height:26px;width:92px;background:repeating-linear-gradient(90deg,#e7c59075 0 2px,#eac99875 2px 4px);opacity:.65;z-index:4;pointer-events:none;clip-path:polygon(0 4%,100% 0,98% 17%,100% 28%,98% 40%,100% 53%,98% 65%,100% 79%,98% 96%,0 100%,2% 81%,0 67%,2% 52%,0 40%,2% 25%)}.tape-left{left:12%;transform:rotate(-6deg)}.tape-right{right:9%;transform:rotate(5deg);background-color:#f8e0b9}.canvas-loading{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;background:#fff;color:#ac98bb;padding:25px;text-align:center;font-size:13px;border-radius:3px}.loader{width:25px;height:25px;border:2.5px solid #e7dbf2;border-top-color:#9f78cd;border-radius:50%;display:inline-block;animation:spin 1.1s linear infinite}.locked-banner{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);z-index:8;width:calc(100% - 44px);max-width:540px;display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid #e6d4f5;border-radius:12px;background:#fffcfff2;box-shadow:0 5px 22px #512e7719;color:#9a7ab7;backdrop-filter:blur(10px)}.locked-banner>div{flex:1}.locked-banner strong{font-size:11px;display:block;color:#78548f}.locked-banner span{display:block;font-size:9px;line-height:1.5;margin-top:3px}.locked-banner .button{font-size:10px;padding:9px 12px;min-height:34px}.canvas-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 30px 10px}.save-state{display:flex;align-items:center;gap:6px;min-width:110px;font-size:9px;color:#a698b0}.save-state.saved{color:#87a58e}.save-state.error{color:#bc777e}.zoom-controls,.page-navigation{display:flex;align-items:center;gap:8px;color:#9d8fa7;font-size:10px;font-weight:800}.zoom-controls .icon-button,.page-navigation .icon-button{width:26px;height:26px;border:1px solid #e8e0eb;background:#fff9;border-radius:7px}.zoom-controls .icon-button svg,.page-navigation .icon-button svg{width:13px;height:13px}#zoom-label{min-width:37px;padding:0;font-size:9px;color:#ab9bb2}.page-navigation span{font-size:9px;font-weight:700;color:#a695ae;min-width:45px;text-align:center}.together-strip{height:35px;min-height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 30px 12px;gap:15px;font-size:8px;color:#b5a5bc}.together-strip>div{display:flex;align-items:center;gap:6px;max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#canvas-hint{font-size:8px;text-align:right}.tiny-online{height:5px;width:5px;border-radius:50%;display:inline-block;flex:none;margin-right:3px}.connection-banner{margin:0 22px;padding:9px 12px;border:1px solid #edc9b3;background:#fff0e2;display:flex;align-items:center;justify-content:space-between;color:#9d6c50;font-size:10px;z-index:9;gap:12px}.connection-banner button{font-weight:900;color:#9d6c50;text-decoration:underline}.live-cursor{position:absolute;pointer-events:none;z-index:6;display:flex;align-items:center;color:var(--member-color);transform:translate(-3px,-3px);transition:left .07s linear,top .07s linear}.live-cursor>svg{filter:drop-shadow(0 0 1px white)}.live-cursor>span{background:var(--member-color);color:white;border-radius:5px;padding:3px 7px;font-size:9px;font-weight:800;transform:translate(-3px,15px);white-space:nowrap;box-shadow:0 2px 4px #00000010}#live-cursors{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.tools-panel{background:#fffdfb;border-left:1px solid var(--line);padding:22px 20px;overflow-y:auto;min-height:0;scrollbar-gutter:stable}.tool-panel-title{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}.tool-panel-title h2{font-size:20px}.tool-panel-title>span{font-size:7px;font-weight:900;letter-spacing:1.6px;color:#b8aabc}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.tool-grid button{border:1px solid #e9e0ec;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 2px 7px;color:#afa0b9;min-width:0}.tool-grid button span{font-size:8px;font-weight:800}.tool-grid button.active{background:#f0e8f9;border-color:#c2a4df;color:#936dc0;box-shadow:0 0 0 2px #e5d8f43d}.tool-grid button:hover{background:#f5edf9}.switch-line{display:flex;align-items:center;gap:7px;font-size:9px;color:#a090ad;margin:14px 0 2px;cursor:pointer;position:relative}.switch-line>span:last-child{margin-left:auto;color:#bfafca}.switch-line input{position:absolute;width:27px;height:17px;opacity:0;cursor:pointer}.switch{width:26px;height:15px;background:#ddd5e4;border-radius:10px;position:relative;display:inline-block;transition:background .15s}.switch::after{content:'';position:absolute;left:3px;top:3px;height:9px;width:9px;border-radius:50%;background:white;transition:transform .15s}.switch-line input:checked+.switch{background:#baa0d9}.switch-line input:checked+.switch::after{transform:translateX(11px)}.switch-line input:focus-visible+.switch{outline:2px solid #8d67bc;outline-offset:2px}.tool-section{border-top:1px solid #eee7f0;margin-top:19px;padding-top:17px}.section-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.section-label h3{font-size:13px;font-family:Nunito;font-weight:800;color:#897994}.mini-button{font-size:9px;font-weight:800;padding:4px;border-radius:5px;color:#a58bb8}.mini-button:hover{background:#f1e7fa}.tools-panel select{font-size:10px;color:#a28caf;background:#faf6fc;border:1px solid #eae0f0;border-radius:7px;padding:6px 8px;outline:none}.palette-section>select{width:100%;font-size:10px;padding:7px 8px;margin-bottom:12px}.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px 8px;padding:2px}.swatch{position:relative;aspect-ratio:1;border-radius:50%;background:var(--swatch);border:1px solid #00000008;padding:0;display:grid;place-items:center;box-shadow:inset 0 -2px 2px #00000005}.swatch>svg{opacity:0;color:white;filter:drop-shadow(0 0 1px #0009);height:13px;width:13px}.swatch:hover{transform:scale(1.12)}.swatch.selected{outline:2px solid var(--swatch);outline-offset:3px;border:1px solid #ffffff80}.swatch.selected>svg{opacity:1}.custom-color{display:flex;align-items:center;gap:10px;border:1px solid #eee5f2;background:#fff;border-radius:8px;margin-top:15px;padding:8px 9px;min-width:0}.current-color{width:30px;height:30px;border-radius:7px;overflow:hidden;display:block;flex:none;border:1px solid #0000000a;background:var(--chosen-color)}input[type=color]{cursor:pointer;-webkit-appearance:none;appearance:none;border:0;padding:0;background:none;height:30px;width:30px;display:block}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}.custom-color>label:nth-child(2){min-width:0;flex:1;display:flex;flex-direction:column}.custom-color>label:nth-child(2)>span{font-size:6px;letter-spacing:1.3px;color:#b7a6c3;font-weight:900}.custom-color input[type=text],#hex-color{border:0;outline:none!important;font-size:10px;font-weight:800;color:#8c739f;width:100%;padding:2px 0;background:transparent}.color-dot{width:6px;height:6px;border-radius:50%;background:var(--chosen-color);opacity:.8}.range-label{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;font-size:9px;color:#a58fb2;margin-top:12px}.range-label output{font-size:8px;color:#ae9cbb}.range-label input{width:100%;margin:0;-webkit-appearance:none;appearance:none;background:#eee6f4;height:3px;border-radius:3px;cursor:pointer;accent-color:#b19acb}.range-label input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:#b59bcd;border:2px solid #fff;box-shadow:0 0 0 1px #b59bcd}.range-label input::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:#b59bcd;border:2px solid #fff}.tool-section summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:11px;font-weight:800;color:#927ca3;list-style:none;gap:8px}.tool-section summary::-webkit-details-marker{display:none}.tool-section summary>span:first-child{display:flex;align-items:center;gap:5px}.free-label{font-size:6px;letter-spacing:.9px;font-weight:900;color:#a8b18b;background:#f1f4e9;padding:3px 5px;border-radius:4px}.premium-pill{font-size:6px;letter-spacing:.5px;font-weight:900;color:#b193bd;border:1px solid #e8daf1;background:#f5eefa;padding:3px 4px;border-radius:3px;white-space:nowrap}.gradient-types{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.gradient-types button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:8px;color:#baa5c7;font-weight:700;border:1px solid #eae0f0;border-radius:7px;padding:6px 3px;background:#fff}.gradient-types button.active{border-color:#bca0d4;background:#f7f1fc;color:#9874b6}.gradient-sample{width:100%;height:16px;border-radius:4px}.gradient-sample.solid{background:var(--chosen-color)}.gradient-sample.linear{background:linear-gradient(100deg,var(--chosen-color),#ffd2c8)}.gradient-sample.radial{background:radial-gradient(circle at 50%,#ffdfce,var(--chosen-color))}.gradient-colors{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#a68db5;margin-top:12px}.gradient-colors input{height:22px;width:35px}.blend-row{display:flex;align-items:center;justify-content:space-between;font-size:9px;margin-top:12px;color:#a88fb9;gap:12px}.blend-row select{width:111px;padding:5px 7px;font-size:9px}.brush-options{padding:10px 0 6px}.brush-options>label:first-child,.effect-options>label:first-child{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#a58fb2;gap:8px}.brush-options select{max-width:120px}.section-description{font-size:8px;color:#b4a0c2;line-height:1.6;margin-top:8px}.effects-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 7px;margin-top:12px}.effect-button{display:flex;flex-direction:column;align-items:center;min-width:0;gap:5px;padding:0;color:#ab95bb}.effect-button>span:last-child{font-size:7px;font-weight:700;white-space:nowrap}.effect-swatch{width:100%;aspect-ratio:1.15;border-radius:8px;border:1px solid #e9d8f3;display:grid;place-items:center;position:relative;overflow:hidden;background:#f4e9fc;color:#a585bc}.effect-swatch>svg{width:17px;opacity:.7}.effect-button:hover .effect-swatch,.effect-button.selected .effect-swatch{outline:2px solid #b49acc;outline-offset:2px}.effect-lock{position:absolute;right:1px;bottom:1px;border-radius:3px;padding:2px;background:#ffffffd9;color:#aa8bbd;display:grid;place-items:center}.finish-none{background:#f8f5fb}.finish-holo{background:linear-gradient(120deg,#f5a8d5,#a1e3e9,#f7e5a6,#c3a6e9,#b7e4ca);background-size:200% 200%;animation:shimmer 7s ease-in-out infinite}.finish-prism{background:repeating-conic-gradient(from 20deg,#c3a0ed 0deg 60deg,#a5e3ea 60deg 120deg,#f2d685 120deg 180deg,#ecb2de 180deg 240deg,#b1dec6 240deg 300deg,#f9e6fc 300deg 360deg) 0 0/30px 37px}.finish-puffy{background:radial-gradient(at 35% 20%,#fff6,#0000 45%),linear-gradient(170deg,#ecc5eb,#d0a4d5);box-shadow:inset 0 3px 4px #fff7,inset 0 -4px 4px #8f5e9f33;color:#9f67af}.finish-velvet{background:repeating-radial-gradient(at 35% 20%,#fff6 0 .6px,#351a5533 .7px 1.3px,#0000 1.4px 3px) 0 0/5px 7px,#d7bde7}.finish-sand{background:radial-gradient(circle,#fff9 .8px,#755f7933 1px,#0000 1.9px) 0 0/4px 5px,#e3cdbc}.finish-glitter{background:radial-gradient(circle,#fff 0 .6px,#e2a1ff 1px 1.5px,#0000 2px) 0 0/9px 9px,radial-gradient(circle,#fff28b 0 .8px,#0000 1.5px) 4px 3px/13px 13px,#caa5e3}.finish-glow{background:linear-gradient(#d8f1ad,#aeedcf);box-shadow:inset 0 0 8px #fff; color:#6bb888}.finish-foil{background:linear-gradient(120deg,#bc9a69,#ffeeba 25%,#caa872 44%,#fff3cc 51%,#c7ac72 62%,#edcf9d 80%,#b99d76);background-size:180% 180%;color:#b7985d;animation:shimmer 6s ease-in-out infinite}.finish-lenticular{background:repeating-linear-gradient(90deg,#fff6 0 1px,#71359333 1px 2px,#0000 2px 4px),linear-gradient(90deg,#e3c1ed,#a5cee9)}.finish-scratch{background:radial-gradient(circle,#fff6 .8px,#0000 2px) 0 0/5px 5px,#d9b99e}.finish-vivid{background:linear-gradient(135deg,#e8a0ca,#a58de7,#71d4ca)}.finish-pastel{background:linear-gradient(135deg,#f8d8d5,#ded4f0,#d3ebdf)}.finish-monochrome{background:linear-gradient(135deg,#faf7fb,#bdb4c6,#78707f);color:#f7f3fa}.effect-options{border-top:1px dashed #eee4f4;margin-top:13px;padding-top:12px}.effect-options select{max-width:127px;font-size:8px;padding:5px}.effect-options .range-label{margin-top:11px}.reference-card{display:flex;align-items:center;gap:9px;text-align:left;margin-top:20px;border:1px solid #eee4ef;border-radius:10px;background:#faf5f4;padding:7px;width:100%}.reference-card img{width:48px;height:48px;object-fit:contain;border-radius:6px;background:#f3e8ec}.reference-card strong{display:block;font-size:9px;color:#9c809f}.reference-card small{font-size:8px;display:flex;align-items:center;color:#b79ebb;margin-top:5px;gap:5px}.mobile-nav{display:none}
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,15px);z-index:100;max-width:min(540px,90vw);background:#4d3a61;color:#fff;border-radius:12px;box-shadow:0 6px 20px #3e275b33;padding:13px 20px;font-size:12px;font-weight:700;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}#toast.error{background:#925d6d}
dialog{width:min(490px,calc(100vw - 32px));max-height:calc(100dvh - 56px);border:1px solid #e5d8ed;border-radius:23px;background:#fffdf9;color:var(--ink);padding:34px;box-shadow:0 24px 80px #4f2b5840;overflow-y:auto;scrollbar-width:thin;text-align:left}dialog::backdrop{background:#30213c66;backdrop-filter:blur(5px)}dialog.wide{width:min(640px,calc(100vw - 32px))}.modal-close{position:absolute;right:13px;top:13px;z-index:2;background:#f5eef8;width:29px;height:29px;color:#a98cbd}.modal-close svg{width:16px;height:16px}dialog>.eyebrow{color:#ad8bbf;margin-bottom:7px}dialog h2{font-size:29px;color:#694c7f;line-height:1.15;padding-right:10px}dialog p{font-size:12px;color:#a08cae;line-height:1.7;margin-top:13px}dialog .modal-lead{font-size:12px;line-height:1.8;color:#a58fad;margin-top:12px}dialog .small-print{font-size:10px;color:#b29dbb;line-height:1.7;margin-top:17px}.modal-symbol{display:grid;place-items:center;width:65px;height:65px;border-radius:20px;margin-bottom:20px;transform:rotate(-7deg);color:#ae8ace}.modal-symbol.lavender{background:#efe3fa}.modal-symbol.peach{background:#fbeddd;color:#d4a875}.unlock-art{height:156px;position:relative;margin:-3px -3px 17px;border-radius:17px;background:radial-gradient(ellipse,#ede1f7,#fffdf900 70%);overflow:hidden}.unlock-sticker{position:absolute;width:124px;height:124px;object-fit:contain;top:17px;filter:drop-shadow(0 5px 2px #61436c22)}.sticker-0{left:12px;transform:rotate(-13deg)}.sticker-1{left:calc(50% - 61px);width:140px;height:140px;top:7px;z-index:1;transform:rotate(4deg)}.sticker-2{right:3px;transform:rotate(16deg)}.unlock-sparkle{position:absolute;left:0;top:0;color:#d8b5ec;font-size:27px}.unlock-sparkle.second{left:auto;right:14px;top:108px;color:#e0bd89;font-size:30px}.unlock-features{display:grid;grid-template-columns:1fr 1fr;gap:13px 12px;margin-top:24px;color:#9a7aac;font-size:10px;font-weight:800}.unlock-features span{display:flex;align-items:center;gap:8px}.unlock-features svg{color:#b69acb}.purchase-price{font-family:Fredoka,sans-serif;font-size:32px;color:#8a65ac;margin-top:24px;display:flex;align-items:baseline;gap:10px}.purchase-price>span{font-family:Nunito,sans-serif;font-size:10px;font-weight:700;color:#b199bf}.buy-button{width:100%;margin-top:22px;font-size:13px;padding:14px}.text-button{font-size:11px;font-weight:800;color:#a589b6;padding:8px 0;text-decoration:underline;text-underline-offset:3px}.restore-button{display:block;margin:8px auto -6px;font-size:10px}.store-note{padding:11px 13px;border:1px solid #eedebf;background:#fff6e4;border-radius:10px;font-size:10px!important;color:#b09467!important}.rooms-tabs{display:flex;gap:10px;border-bottom:1px solid #eee1f2;margin-top:22px;padding-bottom:12px}.rooms-tabs button{font-size:11px;font-weight:800;display:flex;align-items:center;gap:7px;padding:8px 11px;color:#af98be;border-radius:8px}.rooms-tabs button.active{background:#efe3f9;color:#9770b2}.public-rooms{margin-top:15px;max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;font-size:12px;color:#b19abe}.public-room{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #ebdfef;background:#fff;border-radius:13px;padding:10px 12px}.public-room:hover{background:#fbf5ff;border-color:#c8ade0}.public-room-art{width:56px;height:56px;background:#f5e9f9;border-radius:9px;display:grid;place-items:center;color:#c6abdb}.public-room-art img{width:95%;height:95%;object-fit:contain}.public-room-copy{display:flex;flex-direction:column;gap:6px;flex:1}.public-room-copy strong{font-size:13px;color:#9472a8}.public-room-copy>span{font-size:9px;color:#b69fc1;display:flex;align-items:center;gap:4px}.join-label{display:flex;align-items:center;gap:3px;color:#b195c4;font-size:10px;font-weight:800}.empty-rooms{padding:25px 10px 23px;text-align:center;background:#faf4fb;border-radius:12px;color:#b599c9}.empty-rooms-icon{height:62px;width:62px;border-radius:20px;background:#eee1f8;display:grid;place-items:center;margin:0 auto 13px;transform:rotate(-6deg)}.empty-rooms h3{font-size:20px;color:#a07db8}.empty-rooms p{font-size:11px;margin-top:8px}.empty-rooms .button{margin-top:17px}.recent-rooms{border-top:1px solid #f0e5f4;margin-top:22px;padding-top:18px}.recent-rooms h3{font-family:Nunito;font-weight:800;font-size:10px;color:#af93bf;margin-bottom:10px}.recent-book{display:flex;align-items:center;gap:8px;font-size:11px;color:#b298c1;width:100%;padding:9px;border-radius:7px}.recent-book:hover{background:#f5edf9}.recent-book span{flex:1;text-align:left}.form-label{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:800;color:#a88ab9;margin-top:20px}.form-label>input,.form-label>select{border:1px solid #e8d8f0;background:#fffcff;border-radius:9px;padding:10px 12px;font-size:12px;color:#9877ad;width:100%;height:41px}.visibility-options{padding:0;border:0;margin:23px 0 0;display:flex;gap:12px}.visibility-options legend{font-size:11px;font-weight:800;color:#a88ab9;margin-bottom:10px}.visibility-options>label{flex:1;position:relative;cursor:pointer}.visibility-options>label input{position:absolute;top:12px;right:10px;accent-color:#a47bca}.visibility-options>label>span{height:100%;display:flex;flex-direction:column;border:1px solid #eadbf0;background:#fffcff;border-radius:12px;padding:15px 12px;gap:10px;color:#b59ac7}.visibility-options strong{font-size:11px;color:#9f80b2}.visibility-options small{font-size:9px;line-height:1.7;color:#b79ec6}.visibility-options input:checked+span{background:#f6ecfd;border-color:#c7a7e0;box-shadow:0 0 0 2px #eadbf477}.full-width{width:100%;margin-top:23px}.error-message{color:#b56982!important;font-size:11px;margin-top:12px}.copy-link{display:flex;gap:7px;align-items:center}.copy-link input{flex:1;min-width:0;border:1px solid #e4d5ed;background:#f8f0fc;font-size:10px;padding:12px;border-radius:9px;color:#aa8ebe}.copy-link .button{padding-inline:12px;min-height:40px}.member-list{display:flex;flex-direction:column;gap:12px;max-height:275px;overflow-y:auto;margin-top:23px}.member-row{display:flex;align-items:center;gap:10px}.member-row>span{flex:1;display:flex;flex-direction:column;gap:4px}.member-row strong{font-size:11px;color:#997bad}.member-row small{font-size:8px;color:#bba2c9}.danger-text{color:#c17c92}.modal-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}.help-steps p{font-size:12px;margin-top:16px}.help-steps b{color:#9470ab}.shortcut-list{display:flex;flex-wrap:wrap;gap:10px 14px;font-size:10px;color:#b198c1;margin-top:20px}.shortcut-list>span{display:flex;align-items:center;gap:5px}kbd{font-family:inherit;font-size:9px;padding:3px 5px;min-width:19px;text-align:center;background:#f6edf9;border:1px solid #e7d6ef;border-bottom-width:2px;border-radius:5px;color:#b296c4}.legal-links{border-top:1px solid #efdfef;display:flex;justify-content:space-between;gap:10px;font-size:9px;margin-top:25px;padding-top:18px;color:#bfa9ca}.legal-links a{color:#b396c1;text-decoration:none}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@media(min-width:1500px){.app-layout{grid-template-columns:285px minmax(340px,1fr)285px}.topbar{padding-inline:30px}.brand{min-width:223px}.panel-heading{padding-inline:24px}.panel-heading h1{font-size:24px}.page-grid{gap:18px 13px;padding-inline:22px}.page-card-title{font-size:11px}.page-card-subtitle{font-size:9px}.tools-panel{padding-inline:24px}.workspace-heading{padding:28px 38px 18px}.workspace-toolbar{padding-inline:38px}.tool-grid button{padding-block:12px 9px}.swatches{gap:11px}.effect-button>span:last-child{font-size:8px}.tool-panel-title h2{font-size:22px}.tool-section{margin-top:23px;padding-top:20px}.tool-section summary{font-size:12px}}
@media(max-width:1180px) and (min-width:901px){.topbar{gap:12px;padding-inline:18px}.brand{min-width:181px}.room-pill{max-width:156px;font-size:10px}.rooms-top{display:none}.header-members{display:none}.app-layout{grid-template-columns:214px minmax(330px,1fr)225px}.panel-heading{padding-inline:16px}.panel-heading h1{font-size:19px}.tiny-flower{font-size:18px;margin-left:5px}.panel-heading p{font-size:8px}.page-grid{padding-inline:13px;gap:13px 8px}.page-card-title{font-size:9px}.page-card-subtitle{font-size:7px}.book-filters{margin-inline:13px}.book-filters button{font-size:8px}.search-wrap{margin-inline:13px}.book-unlock{margin-inline:9px;padding-inline:7px;gap:5px}.book-unlock-icon svg{width:19px}.book-unlock strong{font-size:8px}.book-unlock small{font-size:7px}.panel-footer{padding-inline:10px;font-size:6.5px}.tools-panel{padding-inline:16px}.workspace-heading{padding-inline:24px}.workspace-heading h2{font-size:23px}.workspace-toolbar{padding-inline:22px}.view-switch button{padding-inline:8px;font-size:9px}.canvas-footer{padding-inline:22px}.together-strip{padding-inline:22px}.effect-button>span:last-child{font-size:6.5px}.effects-grid{gap:9px 6px}.swatches{gap:8px 7px}.save-state{min-width:95px;font-size:8px}.together-strip #canvas-hint{display:none}}
@media(max-width:900px){#app{height:100dvh;min-height:450px}.topbar{height:65px;min-height:65px;padding:0 16px;gap:11px}.brand{min-width:0}.brand-emblem{height:34px;width:34px;border-radius:11px;box-shadow:2px 2px 0 #f1caae}.brand-emblem svg{width:21px;height:21px}.wordmark{font-size:23px}.brand-subtitle{font-size:6.4px;letter-spacing:1.8px;margin-top:4px}.brand-dot{font-size:13px}.header-divider,.room-pill,.rooms-top,.header-members{display:none}.topbar .button.primary{padding:10px 12px;font-size:10px;min-height:36px}.unlock-top{min-height:36px;font-size:9px;padding-inline:10px}.unlock-top b{margin-left:4px}.unlock-top svg{height:15px;width:15px}.app-layout{display:block;min-height:0;overflow:hidden;position:relative}.book-panel,.tools-panel,.workspace{height:100%;width:100%;display:none}.workspace{display:flex}.mobile-nav{height:61px;min-height:61px;padding:6px 18px calc(6px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-around;z-index:15;background:#fffdfb;border-top:1px solid #eae0ec;box-shadow:0 -2px 12px #5c3e6c05}.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#baa3c9;font-size:9px;font-weight:800;min-width:60px;padding:6px 10px;border-radius:10px}.mobile-nav button svg{width:20px;height:20px}.mobile-nav button.active{background:#f0e5fa;color:#9872b5}body[data-panel=book] .workspace,body[data-panel=tools] .workspace{display:none}body[data-panel=book] .book-panel{display:flex}body[data-panel=tools] .tools-panel{display:block}.book-panel{border:0}.panel-heading{padding:22px 24px 16px}.panel-heading h1{font-size:26px}.panel-heading p{font-size:11px}.book-panel .search-wrap{margin-inline:23px;height:40px}.book-filters{margin-inline:23px}.book-filters button{font-size:11px;padding:8px}.category-control{margin-inline:25px;font-size:12px}.category-control select{font-size:12px;max-width:230px}.page-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px;padding-inline:23px}.page-card-title{font-size:11px}.page-card-subtitle{font-size:9px}.book-unlock{margin-inline:23px;padding:13px}.book-unlock strong{font-size:11px}.book-unlock small{font-size:9px}.panel-footer{padding-inline:24px;font-size:9px}.panel-footer button{font-size:10px}.tools-panel{max-width:640px;margin:0 auto;border:0;padding:25px 28px}.tool-panel-title h2{font-size:26px}.tool-panel-title>span{font-size:9px}.tool-grid{gap:12px}.tool-grid button{padding:14px;gap:9px}.tool-grid button span{font-size:11px}.switch-line{font-size:12px;margin-top:19px;justify-content:center}.switch-line>span:last-child{margin-left:0}.swatches{grid-template-columns:repeat(9,minmax(0,1fr));gap:13px}.swatch{max-width:47px}.section-label h3{font-size:16px}.palette-section>select{font-size:13px;padding:9px}.custom-color{padding:11px}.custom-color>label:nth-child(2)>span{font-size:8px}.custom-color #hex-color{font-size:13px}.range-label{font-size:12px;gap:15px;margin-top:18px}.range-label output{font-size:11px}.tool-section{margin-top:24px;padding-top:22px}.tool-section summary{font-size:14px}.free-label,.premium-pill{font-size:8px}.gradient-types button{padding:10px;font-size:11px}.gradient-sample{height:24px}.gradient-colors,.blend-row{font-size:12px}.blend-row select{font-size:12px;width:150px}.effects-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px 12px;margin-top:17px}.effect-button>span:last-child{font-size:9px}.effect-swatch{aspect-ratio:1.2}.effect-swatch>svg{width:23px;height:23px}.section-description{font-size:11px}.effect-options>label:first-child{font-size:12px}.effect-options select{font-size:11px;max-width:180px}.reference-card{width:100%;padding:10px;margin-bottom:12px}.reference-card img{height:65px;width:65px}.reference-card strong{font-size:13px}.reference-card small{font-size:11px}.workspace-heading{padding:20px 25px 13px}.workspace-heading h2{font-size:26px}.workspace-heading .eyebrow{font-size:9px}.page-badge{font-size:8px}.workspace-toolbar{padding:0 24px 10px}.view-switch button{font-size:10px;padding:7px 11px}.toolbar-actions .icon-button{height:30px;width:30px}.canvas-area{padding:16px 18px}.paper-surround{width:calc(min(calc(100cqw - 45px),calc(100cqh - 38px),740px)*var(--zoom))}.canvas-footer{padding:12px 24px 4px}.together-strip{padding:0 24px 12px;height:33px;font-size:9px}.save-state{font-size:9px}.zoom-controls .icon-button,.page-navigation .icon-button{height:29px;width:29px}.page-navigation span{font-size:10px}.locked-banner{bottom:15px;width:calc(100% - 30px);padding:11px 12px}.locked-banner strong{font-size:10px}.locked-banner span{font-size:8px}.locked-banner>svg{width:19px;height:19px}#toast{bottom:77px;font-size:11px}.connection-banner{margin-inline:16px;font-size:10px}.brush-options>label:first-child{font-size:12px}.brush-options select{font-size:12px;max-width:180px}}
@media(max-width:540px){.topbar{padding-inline:13px;gap:9px}.topbar .button.primary span{display:none}.topbar .button.primary{width:36px;padding:7px}.topbar .button.primary svg{height:19px}.unlock-top{font-size:8px;padding-inline:8px;gap:5px}.unlock-top #unlock-label{font-size:0}.unlock-top #unlock-label b{font-size:11px;margin-left:0}.brand{gap:7px}.brand-emblem{width:31px;height:31px}.wordmark{font-size:22px}.brand-subtitle{font-size:6px;letter-spacing:1.6px}.workspace-heading{padding:17px 18px 12px}.workspace-heading h2{font-size:23px}.workspace-heading .eyebrow{font-size:7px;letter-spacing:1.3px}.page-badge{font-size:6px;padding:5px 6px;letter-spacing:.6px}.workspace-toolbar{padding-inline:17px;gap:4px}.view-switch{padding:2px}.view-switch button{font-size:8px;padding:6px 8px}.toolbar-actions{gap:0}.toolbar-actions .icon-button{height:27px;width:27px}.toolbar-actions .icon-button svg{width:16px;height:16px}.toolbar-separator{margin-inline:2px}.canvas-area{padding:15px}.paper-surround{width:calc(min(calc(100cqw - 25px),calc(100cqh - 40px),480px)*var(--zoom));min-width:180px}.paper-tape{width:65px;height:21px;top:-8px}.canvas-footer{padding-inline:16px;gap:5px}.save-state{font-size:8px;min-width:95px}.zoom-controls{gap:5px}.page-navigation{gap:5px}.page-navigation span{font-size:8px;min-width:38px}.zoom-controls .icon-button,.page-navigation .icon-button{width:25px;height:25px}#zoom-label{font-size:8px;min-width:31px}.together-strip{padding:2px 18px 10px;justify-content:center;height:30px;min-height:30px;font-size:8px}.together-strip>div{max-width:100%}#canvas-hint{display:none}.locked-banner{gap:7px;padding:10px;bottom:12px;width:calc(100% - 20px)}.locked-banner>svg{display:none}.locked-banner strong{font-size:9px}.locked-banner span{font-size:7px;max-width:180px}.locked-banner .button{font-size:9px;padding:8px;min-height:32px}.page-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 10px;padding-inline:20px}.page-card-title{font-size:10px}.page-card-subtitle{font-size:7px}.panel-heading{padding-inline:21px}.panel-heading h1{font-size:25px}.panel-heading p{font-size:10px}.book-panel .search-wrap,.book-filters{margin-inline:20px}.book-filters button{font-size:10px}.category-control{margin-inline:21px}.category-control select{font-size:11px}.book-unlock{margin-inline:20px}.book-unlock strong{font-size:10px}.book-unlock small{font-size:8px}.panel-footer{font-size:7px;padding-inline:20px}.panel-footer button{font-size:9px}.tools-panel{padding:24px}.swatches{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.swatch{max-width:none}.effects-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 14px}.effect-button>span:last-child{font-size:10px}.effect-swatch{aspect-ratio:1.3}.free-label,.premium-pill{font-size:7px}.tool-grid button{padding:12px 5px}.tool-grid button span{font-size:10px}.section-description{font-size:10px}.mobile-nav{padding-inline:12px;height:60px;min-height:60px}.mobile-nav button{font-size:8px;gap:4px;min-width:56px}.mobile-nav button svg{width:19px;height:19px}dialog{padding:29px 23px;border-radius:19px;max-height:calc(100dvh - 32px)}dialog h2{font-size:26px}dialog .modal-lead{font-size:11px}.unlock-art{height:135px}.unlock-sticker{width:105px;height:105px}.sticker-0{left:0}.sticker-1{width:122px;height:122px;left:calc(50% - 61px)}.sticker-2{right:-8px}.unlock-features{gap:13px 8px;font-size:9px}.unlock-features svg{width:16px;height:16px}.purchase-price{font-size:29px}.purchase-price>span{font-size:9px}.visibility-options{gap:9px}.visibility-options>label>span{padding:13px 10px}.visibility-options strong{font-size:10px}.visibility-options small{font-size:8px}.public-room{padding:9px;gap:9px}.public-room-art{width:44px;height:44px}.public-room-copy strong{font-size:11px}.public-room-copy>span{font-size:8px}.join-label{font-size:9px}.member-row{gap:7px}.member-row strong{font-size:10px}.member-row .mini-button{font-size:8px}.modal-actions .button{font-size:11px}.legal-links{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.loader{border-color:#bba5d2;border-top-color:#775295}}
/* Keep the soft paper palette while giving working controls readable contrast. */
.tool-panel-title>span,.eyebrow{color:#87758f}
.section-label h3,.tool-section summary{color:#776185}
.tool-grid button{color:#8c769c}.tool-grid button.active{color:#765296}.tool-grid button span{font-size:10px}
.tools-panel select,.range-label,.blend-row,.gradient-colors,.switch-line,.brush-options>label:first-child,.effect-options>label:first-child{color:#806a8f;font-size:10px}
.section-description,.range-label output,.reference-card small{color:#8f799d;font-size:9px}
.effect-button{color:#8b729a}.effect-button>span:last-child{font-size:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gradient-types button{font-size:9px;color:#8b749b}.gradient-types button.active{color:#78558e}
.custom-color>label:nth-child(2)>span{color:#927b9f;font-size:7px}#hex-color{font-size:11px;color:#77598b}
.page-card-subtitle{color:#93849c}.panel-heading p{color:#8e7f98}.book-filters button{color:#8f7d9c}
.category-control select{color:#82708d}.view-switch button{color:#94819e}.view-switch button.active{color:#795699}
.save-state{color:#91829a}.save-state.saved{color:#648d70}.together-strip{color:#94829d}
.reference-card strong{color:#82658f;font-size:10px}.effect-options select{font-size:9px}
@media(max-width:900px){.tools-panel select,.range-label,.blend-row,.gradient-colors,.switch-line,.brush-options>label:first-child,.effect-options>label:first-child{font-size:12px}.section-description,.range-label output,.reference-card small{font-size:11px}.effect-button>span:last-child{font-size:9px}.custom-color>label:nth-child(2)>span{font-size:8px}#hex-color{font-size:13px}.reference-card strong{font-size:13px}.effect-options select{font-size:11px}}

.export-preview{display:block;width:100%;max-height:48vh;object-fit:contain;border:1px solid var(--line);border-radius:15px;background:white;margin:18px auto}.modal-actions a.button{text-decoration:none}

.small-print{font-size:12px;line-height:1.65;color:#74647d}

.modal-status{margin-top:16px;padding:12px 14px;border-radius:10px;background:#eee5f7;color:#604379;font-size:12px;line-height:1.5;font-weight:700}.modal-status[role="alert"]{background:#f8e7eb;color:#803c50}

/* Ruckado book studio — the paper is the workspace, the chrome is the brand. */
:root{--ink:#30213f;--muted:#74677e;--purple:#8438d9;--purple-dark:#6325ad;--lavender:#ede1fa;--line:#ddd4e5;--cream:#faf6eb;--ruckado-lime:#d5ff40;--ruckado-night:#21172f}
#app{min-height:400px;background:var(--ruckado-night)}
.topbar{height:64px;min-height:64px;padding:0 20px;gap:18px;background:#21172f;border-bottom:1px solid #b772f82b;color:#f8f1ff}
.brand{min-width:178px;display:flex;flex-direction:column;gap:0;align-items:center;padding:3px 0;width:178px}
.ruckado-wordmark{display:block;width:156px;height:43px;object-fit:contain}
.brand .brand-subtitle{color:#e0cff6;letter-spacing:3px;font-size:8px;margin-top:-3px;font-weight:900}
.header-divider{background:#d8b5ff29;height:30px}.room-pill{color:#ddd0ed;font-size:12px;max-width:240px}.room-pill>svg{color:#c299ee}
.topbar .button{border-radius:8px;font-size:12px;min-height:36px;padding:9px 13px}.topbar .button.primary{background:var(--ruckado-lime);border-color:#d5ff40;color:#251435;box-shadow:0 3px 0 #0c061a}
.topbar .button.subtle{color:#ddcbed}.topbar .unlock-top{background:#39234d;color:#f0ddff;border-color:#8152a3}.topbar .unlock-top:hover{background:#4b2b66}
.app-layout{grid-template-columns:204px minmax(0,1fr)238px}
.book-panel{background:#291c3b;border-right:1px solid #734e8e55;color:#faf4ff;z-index:5}
.panel-heading{padding:19px 17px 15px}.panel-heading .eyebrow{color:#c8a2eb;font-size:9px;letter-spacing:1.6px}.panel-heading h1{font-size:23px;color:#fff8ff;margin-top:4px}.panel-heading p{font-size:11px;color:#bfaed0;line-height:1.5;margin-top:7px}
.search-wrap{margin:0 14px;background:#170f26;border-color:#77558e55;height:36px;color:#c2aed5}.search-wrap input{color:#f6ebff;font-size:12px}.search-wrap input::placeholder{color:#b6a1c9}
.book-filters{margin:13px 14px 8px;border-color:#79589655;background:#20152d;gap:2px}.book-filters button{font-size:10px;color:#c5b2d5;padding:7px 4px}.book-filters button.active{background:#d5ff40;color:#29173e;box-shadow:none;border-radius:5px}
.category-control{margin:8px 17px 13px;color:#c8b6d9}.category-control select{font-size:11px;color:#ddd0eb;background:#291c3b}.category-control select option{background:#291c3b;color:#fff}.category-control>span:last-child{background:#442b5c;color:#d8c4ea}
.page-grid{padding:2px 14px 20px;gap:17px 10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.page-card-art{background:#fffdf7!important;border-radius:4px;border:2px solid #fff;box-shadow:2px 3px 0 #10091d80;overflow:visible}.page-card-art img{width:94%;height:94%;filter:none}.page-card.selected .page-card-art{border-color:var(--ruckado-lime);box-shadow:0 0 0 3px #b4ee4533,2px 3px 0 #10091d80;background:#fffdf7}.page-card:hover .page-card-art{border-color:#b681f1}.page-card-title{color:#f2e8fc;font-size:11px;line-height:1.3;margin-top:8px}.page-card-subtitle{color:#b7a3c8;font-size:9px;line-height:1.4;margin-top:3px}
.book-unlock{margin:4px 13px 10px;background:#38204e;border-color:#79509b;border-radius:8px;color:#ead8ff;padding:12px 9px;gap:8px}.book-unlock strong{font-size:11px;color:#eee0fc}.book-unlock small{font-size:9px;color:#c7addc}.book-unlock-icon{color:#cffa44}.book-unlock>svg{display:none}.panel-footer{padding:0 15px 13px;color:#a98cbe;font-size:8px;gap:8px}.panel-footer button{color:#dac5ed;font-size:10px}.legal-links{color:#bda5d2}
.workspace{background:#39264d;overflow:hidden}.workspace-heading{height:53px;min-height:53px;padding:9px 22px 7px;color:#f5eaff;gap:10px}.workspace-heading .eyebrow{color:#c4a6d9;font-size:8px;letter-spacing:1.5px}.workspace-heading h2{font-size:23px;line-height:1.2;margin-top:2px;color:#fff9ff}.page-badge{background:#483058;border-color:#75538c;color:#deefad;font-size:8px;padding:6px 8px;white-space:nowrap}
.workspace-toolbar{min-height:43px;padding:4px 17px 8px;gap:8px;color:#ecdef7}.draw-modes{display:flex;gap:3px;background:#21162e;border:1px solid #754d8e55;border-radius:7px;padding:3px}.draw-modes button{display:flex;align-items:center;gap:5px;padding:5px 7px;font-size:11px;font-weight:800;border-radius:4px;color:#d2bbdf;white-space:nowrap}.draw-modes button.active{color:#251633;background:#d5ff40}.draw-modes button:hover:not(.active){background:#5b3778}
.view-switch{background:#261932;border:1px solid #76568e55;padding:3px;border-radius:7px}.view-switch button{font-size:10px;padding:6px 8px;border-radius:4px;color:#cab5db}.view-switch button.active{background:#f7eddf;color:#4d345c;box-shadow:none}.toolbar-actions{gap:3px}.toolbar-actions .icon-button{width:30px;height:30px;border-radius:5px;color:#d7c5e5}.toolbar-actions .icon-button:hover{background:#563871;color:#fff}.toolbar-separator{height:19px;background:#b88cda33;margin:0 3px}.toolbar-actions [aria-pressed=true]{background:#d5ff40;color:#251633}
.canvas-area{padding:0;overflow:hidden;display:block;container-type:normal;touch-action:none;background-color:#4a315b;background-size:auto;background-position:0 0;background-image:repeating-linear-gradient(0deg,transparent,transparent 5px,#12081f08 5px,#12081f08 6px),radial-gradient(ellipse at 50% 20%,#76578355,transparent 75%);border-top:1px solid #fff1;border-bottom:1px solid #170d2499;isolation:isolate}
.canvas-area::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 10px 18px #12091b22;z-index:9}
.paper-surround{width:768px!important;height:768px;min-width:0!important;position:absolute;left:0;top:0;margin:0;transform-origin:0 0;aspect-ratio:auto;will-change:transform}
.drawing-paper{border:0;border-radius:0 4px 4px 0;box-shadow:5px 5px 0 #e6deca,8px 8px 0 #cfc2ab,12px 14px 28px #12092166;overflow:hidden}
.drawing-paper::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:7;background:transparent;border:0;transform:none;box-shadow:inset 12px 0 20px -16px #47332999,inset 1px 0 #ddd4c2}
#coloring-canvas{border-radius:0;background:#fff;image-rendering:auto}.canvas-area[data-navigation=hand] #coloring-canvas{cursor:grab}.canvas-area[data-navigation=dragging] #coloring-canvas{cursor:grabbing}
.book-binding{position:absolute;left:-22px;top:0;width:32px;height:100%;z-index:8;display:flex;flex-direction:column;justify-content:space-around;padding:32px 0;pointer-events:none}.book-binding i{display:block;width:42px;height:13px;border:3px solid #b8a69b;border-radius:9px;box-shadow:inset 0 2px 1px #fff9,0 2px 2px #0005;background:linear-gradient(#c9c2bc,#5d5760 60%,#b2a69e);position:relative}.book-binding i::after{content:'';position:absolute;right:-2px;top:1px;width:8px;height:6px;background:#251c28;border-radius:50%}
.canvas-footer{min-height:45px;padding:6px 17px;background:#2b1c3a;gap:10px;color:#eadcf3}.save-state{font-size:10px;min-width:95px;color:#cab7d9}.save-state.saved{color:#bed7ad}.zoom-controls{gap:7px;color:#eadcf3}.zoom-controls .icon-button,.page-navigation .icon-button{height:29px;width:29px;border:1px solid #80599b66;background:#463058;border-radius:5px;color:#e3d0f0}.zoom-controls .icon-button:hover,.page-navigation .icon-button:hover{background:#6c428a}.zoom-controls .icon-button svg,.page-navigation .icon-button svg{width:16px;height:16px}#zoom-label{min-width:40px;color:#efe3f7;font-size:11px;font-variant-numeric:tabular-nums}#zoom-slider{width:86px;accent-color:#d5ff40;cursor:pointer}.fit-button{border:1px solid #7a5591;border-radius:5px;padding:5px 9px;color:#f0e1f9;font-size:11px;font-weight:800}.fit-button:hover{background:#53326b}.page-navigation{gap:6px}.page-navigation span{font-size:10px;color:#d7c2e7;min-width:43px}.together-strip{height:24px;min-height:24px;padding:0 18px 7px;background:#2b1c3a;color:#baa2cc;font-size:9px}.together-strip #canvas-hint{font-size:9px;color:#baa2cc}.locked-banner{position:absolute;z-index:10;bottom:14px;width:calc(100% - 36px);padding:11px 14px;background:#fffaf3f5;border-color:#cfb8e1;box-shadow:0 4px 15px #1a0c2429}.locked-banner strong{color:#5c3777;font-size:12px}.locked-banner span{font-size:10px;color:#78588c}.locked-banner .button{background:#7d34cd;border-color:#7d34cd;font-size:11px}
.tools-panel{background:#faf6eb;padding:18px 17px;border-left:5px solid #d9caae;box-shadow:inset 1px 0 #fff;scrollbar-color:#bc9bd5 transparent}.tool-panel-title{margin-bottom:15px}.tool-panel-title h2{font-size:23px;color:#402652}.tool-panel-title>span{font-size:8px;letter-spacing:1.4px;color:#8b6a9c}.tool-grid{gap:5px}.tool-grid button{border:1px solid #d7c7df;border-radius:6px;background:#fffdf8;padding:10px 3px;color:#745288}.tool-grid button.active{background:#7d35cb;border-color:#62259c;color:#fff;box-shadow:0 3px 0 #e2ccef}.tool-grid button span{font-size:10px}.tool-grid button.active:hover{background:#7d35cb}.switch-line{font-size:11px;margin-top:17px;color:#725581}.section-label h3{font-size:17px;color:#4b2d5d}.palette-section>select{background:#fffdf8;border-color:#dacbe3;font-size:12px}.swatches{gap:8px;grid-template-columns:repeat(6,minmax(0,1fr))}.swatch{border-radius:5px;box-shadow:inset 0 -3px 0 #0002;border:1px solid #0001;transform:rotate(-2deg)}.swatch:nth-child(even){transform:rotate(2deg)}.swatch.active{outline:2px solid #7c35c6;outline-offset:3px;box-shadow:0 0 0 2px #fff;transform:rotate(0)}.custom-color{background:#fffdf8;border-color:#dfcfe7;border-radius:7px}.custom-color>label:nth-child(2)>span{color:#9a7baa}.custom-color #hex-color{font-size:12px;color:#533466}.tool-section{border-top-color:#d8c8e0;margin-top:20px;padding-top:18px}.tool-section summary{font-size:13px;color:#57356d}.section-description{font-size:10px;color:#9b83a6}.range-label,.effect-options>label:first-child,.blend-row{color:#755786;font-size:11px}.gradient-types button{font-size:10px}.effects-grid{gap:12px 7px}.effect-button>span:last-child{font-size:9px;color:#705080}.free-label{background:#e3edc7;color:#5d7138}.premium-pill{background:#edddfb;color:#7f46ab}.reference-card{border:1px solid #d5c6dd;border-radius:6px;background:#fffdf7;padding:8px;margin-top:22px}.reference-card strong{color:#5b3672;font-size:12px}.reference-card small{font-size:10px;color:#977ca5}.reference-card img{height:46px;width:46px}.connection-banner{font-size:11px;margin:0;background:#fbecd4}
body.focus-mode .book-panel,body.focus-mode .tools-panel{display:none}body.focus-mode .app-layout{grid-template-columns:minmax(0,1fr)}body.focus-mode .workspace{display:flex}
@media(min-width:901px) and (max-width:1200px){.app-layout{grid-template-columns:178px minmax(0,1fr)210px}.topbar{padding-inline:16px}.brand{min-width:152px;width:152px}.ruckado-wordmark{width:140px}.workspace-heading{padding-inline:15px}.workspace-heading h2{font-size:20px}.workspace-toolbar{padding-inline:10px;gap:4px}.draw-modes button span{display:none}.view-switch button{padding-inline:7px;font-size:9px}.toolbar-actions .icon-button{width:25px}.canvas-footer{padding-inline:10px;gap:6px}.save-state{min-width:0;font-size:9px}#zoom-slider{width:54px}.page-navigation span{min-width:36px;font-size:9px}.tools-panel{padding:15px 12px}.page-grid{padding-inline:12px;gap:14px 8px}.page-card-title{font-size:10px}.panel-heading{padding-inline:14px}.panel-heading h1{font-size:21px}.panel-heading p{font-size:10px}.topbar .rooms-top{display:none}}
@media(max-width:900px){.topbar{height:58px;min-height:58px;padding:0 13px;gap:10px}.brand{min-width:130px;width:130px}.ruckado-wordmark{width:126px;height:37px}.brand .brand-subtitle{font-size:6px;letter-spacing:2.5px;margin-top:-4px}.topbar .button{min-height:33px;font-size:10px;padding:7px 10px}.app-layout{display:block}.book-panel,.tools-panel{height:100%;width:100%}.book-panel{border:0}.page-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:4px 22px 22px;gap:20px 14px}.panel-heading{padding:22px}.panel-heading h1{font-size:27px}.panel-heading p{font-size:12px}.search-wrap,.book-filters{margin-inline:22px}.category-control{margin-inline:24px}.book-unlock{margin-inline:22px}.tools-panel{padding:22px;max-width:none;border:0}.tool-panel-title h2{font-size:26px}.tool-grid{gap:10px}.tool-grid button{padding:14px}.swatches{grid-template-columns:repeat(9,minmax(0,1fr));gap:13px}.swatch{max-width:none}.workspace-heading{height:48px;min-height:48px;padding:7px 16px}.workspace-heading h2{font-size:21px}.workspace-toolbar{min-height:42px;padding:2px 12px 7px}.draw-modes button{padding:5px 7px}.canvas-area{padding:0}.paper-surround{width:768px!important;min-width:0!important}.canvas-footer{padding:6px 12px;min-height:45px}.together-strip{height:24px;min-height:24px;padding:0 14px 6px}.mobile-nav{height:53px;min-height:53px;background:#21172f;border-color:#9265ad44;box-shadow:0 -3px 12px #190e2333;padding:4px 12px calc(4px + env(safe-area-inset-bottom))}.mobile-nav button{font-size:9px;gap:3px;color:#d1bce0;border-radius:6px;padding:4px 12px}.mobile-nav button.active{background:#d5ff40;color:#321b41}.mobile-nav button svg{height:18px;width:18px}body.focus-mode .mobile-nav{display:none}body.focus-mode .workspace-heading{height:40px;min-height:40px}body.focus-mode .workspace-heading .eyebrow{display:none}}
@media(max-width:540px){.topbar{gap:7px}.topbar .button.primary{width:33px;padding:7px}.topbar .unlock-top{min-height:33px;padding:7px 9px}.topbar .unlock-top #unlock-label{font-size:0}.topbar .unlock-top #unlock-label b{font-size:11px}.workspace-heading{padding-inline:13px;gap:8px}.workspace-heading h2{font-size:19px}.workspace-heading .eyebrow{font-size:7px}.page-badge{font-size:7px;padding:5px 7px}.workspace-toolbar{padding-inline:9px;gap:4px}.draw-modes button{padding:6px}.draw-modes button span{display:none}.view-switch button{padding:6px;font-size:9px}.toolbar-actions{gap:0}.toolbar-actions .icon-button{height:27px;width:25px}.toolbar-actions .icon-button svg{height:16px;width:16px}.toolbar-separator{margin-inline:1px}.canvas-footer{gap:5px;padding-inline:9px;flex-wrap:wrap;min-height:65px}.save-state{order:2;font-size:9px;min-width:90px}.page-navigation{order:3;margin-left:auto}.zoom-controls{order:1;width:100%;justify-content:center;gap:10px}#zoom-slider{width:100px}.zoom-controls .icon-button,.page-navigation .icon-button{height:28px;width:28px}#zoom-label{font-size:11px}.together-strip{height:20px;min-height:20px;padding:0 10px 4px;justify-content:flex-start}.together-strip>div{font-size:8px}.together-strip #canvas-hint{display:none}.page-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 11px}.page-card-title{font-size:11px}.page-card-subtitle{font-size:9px}.tools-panel{padding:20px}.swatches{grid-template-columns:repeat(6,minmax(0,1fr))}.tool-grid button{padding:13px 4px}.effects-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.locked-banner{bottom:8px;padding:9px 10px;width:calc(100% - 20px)}.locked-banner strong{font-size:10px}.locked-banner span{font-size:9px;max-width:165px}.locked-banner .button{font-size:10px;padding:8px}.fit-button{padding:6px 10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.loader{animation-duration:2s}}

.page-card.selected .page-card-title{color:#d5ff40}

/* The Ruckado collection lives beside the book, without replacing it. */
.topbar .games-top{flex:none;color:#f3e7ff;border-color:#806097;background:#3a254e;gap:7px}
.topbar .games-top:hover{background:#583374;border-color:#c89cf1}
.topbar .games-top svg{color:#d5ff40}
dialog.games-modal{width:min(850px,calc(100vw - 32px));max-width:850px;padding:30px;background:#21172f;color:#efe6f7;border:1px solid #9566b7;border-radius:18px;box-shadow:0 24px 100px #09040dbb;overflow-y:auto}
.games-modal::backdrop{background:#120b1cc7;backdrop-filter:blur(5px)}
.games-modal .modal-close{color:#e5d4f4;background:#47305b;border-radius:50%;top:15px;right:15px}
.games-modal .modal-close:hover{background:#6c4388;color:#fff}
.games-heading{padding:0 42px 24px 0}
.games-heading .eyebrow{font-size:9px;letter-spacing:2px;color:#d5ff40}
.games-modal .games-heading h2{color:#fff6ff;font-size:31px;line-height:1.15;margin:8px 0 0}
.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.other-game{min-width:0;display:flex;flex-direction:column;border:1px solid #76558e;border-radius:10px;overflow:hidden;background:#342145;box-shadow:0 5px 0 #0d07154d}
.other-game-preview{aspect-ratio:16/9;background-color:#17252a;background-position:center;background-size:contain;background-repeat:no-repeat;overflow:hidden;border-bottom:1px solid #89619b66}
.other-game-preview img{display:block;width:100%;height:100%;object-fit:contain}
.other-game-content{padding:21px 21px 20px;flex:1;display:flex;flex-direction:column}
.other-game-category{color:#c7addb;font-size:9px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase}
.games-modal .other-game h3{font-family:Fredoka,sans-serif;font-weight:600;color:#e4ff7a;font-size:31px;letter-spacing:-.5px;margin:9px 0 11px;line-height:1.1}
.games-modal .other-game h3 span{color:#d7a7ff}
.games-modal .other-game p{color:#e1d2ed;font-size:13px;line-height:1.65;margin:0 0 22px}
.other-game-actions{margin-top:auto;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.games-modal .game-launch{color:#251435;background:#d5ff40;border-color:#d5ff40;border-radius:7px;min-height:43px;font-size:13px;text-decoration:none;justify-content:space-between;padding:11px 14px;box-shadow:0 3px 0 #120a1d}
.games-modal .game-launch:hover{background:#e3ff87;border-color:#e3ff87}
.games-modal .game-launch:disabled{opacity:.6;cursor:wait}
.games-modal .game-discord-link{text-align:center;color:#dcc2f0;font-size:11px;font-weight:800;text-decoration:none;padding:3px}
.games-modal .game-discord-link:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.games-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px}
.game-preview-toggle,.games-back{display:inline-flex;align-items:center;gap:7px;color:#cdb5de;font-size:11px;font-weight:800;min-height:36px;padding:5px 0}
.games-back{color:#f3e6ff}.game-preview-toggle:hover,.games-back:hover{color:#d5ff40}
.games-modal :focus-visible{outline:3px solid #d5ff40;outline-offset:4px}
@media(max-width:1100px){.topbar{gap:12px}.topbar .room-pill{max-width:180px}}
@media(max-width:600px){dialog.games-modal{padding:23px 19px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:14px}.games-heading{padding-bottom:19px}.games-modal .games-heading h2{font-size:27px}.games-grid{grid-template-columns:1fr;gap:17px}.other-game-content{padding:17px}.games-modal .other-game h3{font-size:28px;margin:8px 0}.games-modal .other-game p{font-size:12px;margin-bottom:15px}.other-game-actions{gap:9px}.games-footer{padding-top:16px}.game-preview-toggle,.games-back{font-size:10px}.topbar{gap:7px}.topbar .games-top{padding:7px 9px;font-size:10px;gap:5px}.topbar .games-top svg{width:17px;height:17px}}
@media(max-width:380px){.topbar{padding-inline:10px;gap:5px}.brand{width:105px;min-width:105px}.ruckado-wordmark{width:104px}.brand .brand-subtitle{letter-spacing:1.8px}.topbar .unlock-top{padding-inline:7px}.topbar .games-top{padding-inline:7px}}

/* Creative corner: a book to return to, and art to keep. */
:root{--paper:#fffaf0;--plum:#402652;--ink:#32243c;--mint:#d5ff40}
.topbar .library-top{background:#352346;border-color:#725385;color:#f5eaff;white-space:nowrap}
.difficulty-control{margin:0 17px 12px}.difficulty-control select{width:100%;padding:9px;border:1px solid #725487;border-radius:7px;background:#39254a;color:#ede1f8;font-size:11px}
.quick-color-tray{flex:none;display:flex;align-items:center;gap:10px;padding:9px 17px;background:#30213d;border-top:1px solid #795c8a66;min-height:58px}
#quick-colors{display:flex;gap:8px;overflow:auto;min-width:0;flex:1;padding:3px 2px;scrollbar-width:none}
.quick-swatch{background:var(--swatch);width:30px;height:30px;border-radius:50%;flex:none;border:2px solid #ffffff66;box-shadow:0 2px 0 #160a2455}
.quick-swatch.selected{outline:2px solid #d5ff40;outline-offset:2px}.quick-swatch:hover{transform:translateY(-2px)}
.palette-more{color:#ede1f8;flex:none;width:34px;height:36px;display:grid;place-items:center;border:1px solid #796187;border-radius:8px}
.finish-picture{display:flex;gap:5px;align-items:center;background:#d5ff40;color:#30213d;padding:9px 13px;border-radius:9px;flex:none;font-weight:900;font-size:12px;box-shadow:0 3px 0 #8d9e32}
.tools-done{display:none}.first-guide{display:flex;gap:10px;align-items:center;padding:10px 18px;background:#f4e5c7;color:#4c3656;border-block:1px solid #dac4a1}.first-guide .guide-number{display:grid;place-items:center;background:#7d35cb;color:white;border-radius:50%;width:28px;height:28px;flex:none;font-weight:bold}.first-guide strong,.first-guide small{display:block}.first-guide strong{font-size:12px}.first-guide small{font-size:10px;margin-top:3px;line-height:1.4}.first-guide button{font-size:11px;font-weight:800;white-space:nowrap;border:1px solid #c6aacb;border-radius:7px;padding:7px;margin-left:auto}.first-guide .guide-close{border:0;font-size:20px;padding:0 4px;margin-left:0}
.activity-strip{padding:7px 18px;background:#483059;color:#eddef7;display:flex;gap:12px;font-size:11px;align-items:center;flex-wrap:wrap}.activity-strip[hidden]{display:none}.activity-strip button{text-decoration:underline;color:#d5ff40}
.drawing-paper[data-area]::before{content:'YOUR MURAL CORNER';position:absolute;z-index:6;border:3px dashed #9670d0;pointer-events:none;width:50%;height:50%;color:#705089;font-size:14px;letter-spacing:2px;padding:14px;box-sizing:border-box;left:0;top:0}.drawing-paper[data-area="1"]::before{left:50%}.drawing-paper[data-area="2"]::before{top:50%}.drawing-paper[data-area="3"]::before{left:50%;top:50%}
#modal.wide:has(.studio-home),#modal.wide:has(.keepsake-layout),#modal.wide:has(.premium-layout){width:min(1040px,calc(100vw - 32px));max-width:1040px;background:#fffaf0;border:1px solid #d5c0db;box-shadow:0 20px 90px #180c2a99;padding:34px}
.studio-home h2{font-size:38px;max-width:650px;line-height:1.14;margin:12px 0}.studio-home .modal-lead{max-width:620px;font-size:15px}.home-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 28px}.home-tabs .button{font-size:13px}.home-tabs .button span{opacity:.65;font-size:11px}
.home-intro{margin-top:12px}.home-intro h3{font-size:25px;margin:5px 0}.home-intro p{font-size:13px;color:#827087;margin-bottom:17px}
.discovery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:18px 0 28px}.discovery-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.discovery-card{text-align:left;min-width:0;color:#442d55}.discovery-art{display:block;position:relative;background:linear-gradient(155deg,#fff,#fff7eb);border:1px solid #dfd2c3;border-radius:11px;box-shadow:3px 5px 0 var(--collection-color);aspect-ratio:1.16;overflow:hidden;margin:0 3px 13px 0}.discovery-art img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .22s}.discovery-card:hover img{transform:scale(1.04)}.discovery-art>span{position:absolute;left:10px;top:10px;font:800 8px 'Nunito Sans',sans-serif;letter-spacing:1px;background:#fffaf0e8;border:1px solid #dccbe3;border-radius:20px;padding:5px 7px}.discovery-card strong{display:block;font-size:17px;line-height:1.15}.discovery-card small{display:block;font-size:11px;color:#8e7894;margin-top:7px}
.weekly-card{border:1px solid #d9c4a1;background:linear-gradient(115deg,#f9edcc,#f2e6ed);padding:21px 24px;border-radius:13px;display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:30px}.weekly-card h3{font-size:23px;margin:7px 0}.weekly-card p{font-size:12px;max-width:500px;color:#806a81}.weekly-card .button{white-space:nowrap;background:#fffaf0;border-color:#cab1d6}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:18px 0}.collection-cover{display:flex;flex-direction:column;position:relative;background:linear-gradient(90deg,#0001 0,transparent 8%,#ffffff55 11%,transparent 12%),var(--collection-color);border:1px solid #0002;border-radius:4px 12px 12px 4px;padding:14px 14px 19px 22px;box-shadow:3px 4px 0 #d9c8b7;text-align:left;color:#3e3049;overflow:hidden;transition:transform .2s}.collection-cover:hover{transform:translateY(-3px)}.collection-cover img{width:100%;height:155px;object-fit:contain;filter:drop-shadow(0 4px 0 #ffffffaa);margin-bottom:13px}.collection-cover strong{font-size:19px;line-height:1.1;display:block}.collection-cover small{font-size:11px;line-height:1.4;display:block;margin-top:7px}.collection-cover em{font:700 9px 'Nunito Sans',sans-serif;display:inline-block;margin-top:13px;background:#fff8;padding:5px 8px;border-radius:4px}
.art-card{position:relative;min-width:0}.art-card>button:first-child{width:100%;text-align:left}.art-card img{width:100%;aspect-ratio:1;object-fit:contain;background:white;border:1px solid #e0d4c8;border-radius:9px;box-shadow:2px 3px 0 #e8dccc;padding:8px}.art-card strong{display:block;color:#493354;font-size:14px;margin-top:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.art-card small{display:block;font-size:10px;color:#8c7796;margin-top:5px}.favorite-art{position:absolute;right:8px;top:8px;width:31px;height:31px;border-radius:50%;background:#fffaf0e8;border:1px solid #dfcbdf;color:#9e4a89;font-size:20px}.favorite-art[aria-pressed=true]{background:#f6d8e7}
.gallery-toolbar{display:flex;gap:15px;align-items:center;flex-wrap:wrap;justify-content:space-between}.gallery-toolbar .book-filters{margin:0;background:#efe3f2;padding:4px}.gallery-toolbar .book-filters button{color:#6b4f7b}.gallery-toolbar .book-filters .active{background:#7841ab;color:#fff}.gallery-toolbar label{font-size:12px;display:flex;gap:8px;align-items:center}.gallery-toolbar select{max-width:210px;padding:7px;border:1px solid #dbc9df;border-radius:7px;background:#fffaf5}.gallery-empty{text-align:center;padding:25px}.gallery-empty img{width:160px;height:160px;object-fit:contain}.gallery-empty h3{font-size:25px;margin:10px 0}.gallery-empty p{max-width:420px;margin:0 auto 20px;color:#8d7598;font-size:13px}.album-rewards{display:flex;gap:10px;flex-wrap:wrap;border-top:1px dashed #cdb7d6;padding-top:22px}.album-rewards>span,.album-rewards small{width:100%;font-size:10px;color:#907b9c}.album-rewards b{font-size:11px;border-radius:20px;padding:8px 11px;border:1px solid #ddcedf;color:#b4a5b6}.album-rewards b.earned{background:#f0e2b1;color:#71572b;border-color:#ceb676}
.keepsake-layout,.premium-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px}.keepsake-stage{background:linear-gradient(135deg,#e7d6f0,#f7e5be);border:1px solid #dcc5d9;border-radius:15px;padding:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:440px;align-self:start;position:sticky;top:0}.keepsake-stage img{width:100%;max-height:530px;object-fit:contain;filter:drop-shadow(0 9px 9px #33214022)}.keepsake-stage>span{margin-top:20px;font-size:9px;letter-spacing:1.3px;font-weight:800;color:#846a87;text-align:center}.keepsake-controls h2{font-size:33px;line-height:1.15;margin:9px 0 14px}.keepsake-controls>p{font-size:13px;line-height:1.6;color:#8b7494}.keepsake-controls label{display:block;font-size:11px;color:#71537d;font-weight:800;margin:14px 0 5px}.keepsake-controls input,.keepsake-controls select{display:block;width:100%;border:1px solid #d9c6dd;border-radius:8px;padding:10px;background:#fffef9;font:12px 'Nunito Sans',sans-serif;color:#523762;margin-top:6px}.keepsake-controls>small{font-size:10px;color:#8c7796}.keepsake-controls .full-width{margin-top:16px}.keepsake-secondary{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.keepsake-secondary .button{font-size:11px}.keepsake-secondary .text-button{font-size:11px;margin-right:12px}.keepsake-stage.celebrate{animation:keepsake-in .5s ease-out}.preview-shine{animation:preview-shimmer 2s ease-in-out infinite}
.premium-preview{align-self:start;position:sticky;top:0;text-align:center;padding:23px 18px;background:radial-gradient(ellipse at top,#faf2db,#e8d7f6 70%);border:1px solid #dbc6e6;border-radius:15px}.premium-preview img{width:100%;margin:18px 0;border-radius:14px;box-shadow:0 5px 24px #76638b22}.preview-caption{font-size:9px;color:#957c9e;display:block}.finish-preview-buttons{display:flex;gap:5px;justify-content:center;margin-top:17px;flex-wrap:wrap}.finish-preview-buttons button{font-size:11px;background:#fff7;border:1px solid #cbb2dc;border-radius:20px;padding:7px 12px;color:#785687}.finish-preview-buttons button.active{background:#7d35cb;border-color:#7d35cb;color:#fff}.premium-copy h2{font-size:39px;line-height:1.05;margin:12px 0 18px;color:#442653}.premium-copy>p{font-size:13px;line-height:1.6;color:#876f91}.premium-benefits{display:flex;flex-direction:column;gap:17px;margin:24px 0}.premium-benefits>div{display:flex;gap:12px}.premium-benefits b{color:#b18bce;font-size:20px;min-width:28px}.premium-benefits strong{display:block;font-size:16px}.premium-benefits small{display:block;font-size:11px;line-height:1.6;color:#8e739b;margin-top:4px}.premium-price{font-size:35px;font-weight:900;color:#704599;margin:22px 0 12px}.premium-price small{font-size:11px;color:#9277a2;font-weight:400}.premium-copy .small-print{font-size:10px;line-height:1.6;margin-top:15px}.premium-copy>.text-button{display:block;margin:12px auto}
.session-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.session-options label{border:1px solid #d7bfde;border-radius:10px;background:#fffaf1;padding:15px;display:flex;gap:8px;align-items:flex-start;cursor:pointer}.session-options label:has(input:checked){background:#eee0fb;border-color:#9c6bc7}.session-options strong{display:block;font-size:15px}.session-options small{display:block;font-size:11px;line-height:1.5;color:#8d7598;margin-top:8px}.guest-seats{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.guest-seats label{background:#f0e6f5;border:1px solid #dcc6e5;padding:10px;border-radius:8px;font-size:12px;display:flex;gap:8px;align-items:center}.reveal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.reveal-grid figure{margin:0;text-align:center}.reveal-grid img{width:100%;border:1px solid #d7c3de;border-radius:8px}.reveal-grid figcaption{font-size:13px;color:#785387;margin-top:10px}
@keyframes keepsake-in{from{transform:translateY(10px) scale(.97);opacity:.3}to{transform:none;opacity:1}}@keyframes preview-shimmer{50%{filter:brightness(1.14) saturate(1.15)}}
@media(max-width:1200px){.topbar .games-top{display:none}.topbar .library-top{padding-inline:10px}.quick-color-tray{padding-inline:10px;gap:7px}#quick-colors{gap:7px}.quick-swatch{width:27px;height:27px}.finish-picture{font-size:11px;padding:9px}}
@media(max-width:900px){.topbar .library-top{display:none}.topbar-spacer{min-width:0}.workspace-toolbar{min-height:48px}.toolbar-actions .icon-button{height:36px;width:32px}.workspace{height:100%}body[data-panel="tools"] .workspace{display:flex}body[data-panel="tools"] .tools-panel{display:block;position:fixed;z-index:50;bottom:53px;left:0;right:0;height:min(50vh,440px);padding:15px 20px 20px;box-shadow:0 -10px 35px #10091d66;border-radius:20px 20px 0 0;border-top:2px solid #d0b8df}.tools-done{display:block;float:right;background:#e7d7ef;border-radius:20px;padding:7px 12px;color:#704b87;font-size:12px}.quick-color-tray{min-height:56px;padding:8px 10px}.mobile-nav button{padding-inline:8px}.tools-panel .tool-panel-title{margin-bottom:12px}.tools-panel .swatches{gap:10px}.tools-panel .tool-grid button{padding:8px}.tools-panel .switch-line{margin-top:13px}.tools-panel .palette-section{margin-top:13px;padding-top:12px}.difficulty-control{margin-inline:22px}#modal.wide:has(.studio-home),#modal.wide:has(.keepsake-layout),#modal.wide:has(.premium-layout){padding:26px;width:calc(100vw - 24px)}.studio-home h2{font-size:32px}.collection-cover img{height:130px}.discovery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.first-guide{padding:8px 10px}.first-guide small{font-size:9px}.first-guide strong{font-size:11px}.first-guide .guide-number{width:23px;height:23px}.first-guide button{font-size:10px;padding:6px}.keepsake-layout,.premium-layout{gap:22px}.premium-copy h2{font-size:31px}.keepsake-stage{padding:15px;min-height:300px}.session-options{gap:8px}.session-options label{padding:11px}.session-options strong{font-size:13px}}
@media(max-width:600px){#modal.wide:has(.studio-home),#modal.wide:has(.keepsake-layout),#modal.wide:has(.premium-layout){padding:25px 18px;max-height:calc(100dvh - 24px);border-radius:17px}.studio-home h2{font-size:29px;padding-right:12px}.studio-home .modal-lead{font-size:13px}.home-tabs{gap:7px;margin:17px 0 24px}.home-tabs .button{font-size:11px;padding:9px 10px}.home-intro h3{font-size:21px}.home-intro p{font-size:11px}.discovery-grid,.discovery-grid.three{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.discovery-grid.three .discovery-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:100px 1fr;align-items:center;column-gap:16px;text-align:left}.discovery-grid.three .discovery-card:last-child .discovery-art{grid-row:1/3}.discovery-grid.three .discovery-card:last-child strong{align-self:end}.discovery-grid.three .discovery-card:last-child small{align-self:start}.discovery-card strong{font-size:14px}.discovery-card small{font-size:10px}.discovery-art img{padding:7px}.discovery-art>span{left:6px;top:6px;font-size:6px}.weekly-card{display:block;padding:18px}.weekly-card h3{font-size:22px}.weekly-card p{font-size:11px;margin-bottom:13px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.collection-cover{padding:12px 10px 16px 17px}.collection-cover img{height:105px}.collection-cover strong{font-size:17px}.collection-cover small{font-size:10px}.collection-cover em{font-size:8px}.keepsake-layout,.premium-layout{display:flex;flex-direction:column}.keepsake-stage,.premium-preview{position:relative;top:auto;min-height:0;width:100%;padding:16px}.keepsake-stage img{max-height:290px}.keepsake-stage>span{margin-top:10px;font-size:8px}.keepsake-controls h2{font-size:29px}.premium-preview img{width:78%;max-height:250px;object-fit:contain;margin:10px 0}.premium-copy h2{font-size:34px}.premium-benefits{margin:20px 0;gap:14px}.premium-copy>p{font-size:12px}.gallery-toolbar{gap:10px}.gallery-toolbar .book-filters{width:100%;display:flex}.gallery-toolbar .book-filters button{font-size:10px;padding:8px}.gallery-toolbar label{font-size:10px}.session-options{grid-template-columns:1fr}.session-options small{margin-top:3px}.session-options label{padding:12px}.reveal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar-actions [data-action="export"]{display:none}.toolbar-actions [data-action="focus"]{display:none}.view-switch{margin-left:auto}.workspace-toolbar .toolbar-actions{margin-left:auto}.view-switch button{font-size:9px;padding:8px 7px}.draw-modes button{padding:8px}.quick-swatch{width:29px;height:29px}.finish-picture{padding:8px 9px;min-height:35px}.finish-picture svg{display:none}.canvas-footer{min-height:40px;flex-wrap:nowrap;padding:5px 10px}.zoom-controls{width:auto;order:1;gap:7px}.zoom-controls #zoom-slider{display:none}.zoom-controls #zoom-label{min-width:34px}.save-state{order:0;font-size:8px;min-width:0}.page-navigation{display:none}.zoom-controls .icon-button{width:29px;height:29px}.together-strip{height:18px;min-height:18px}.activity-strip{font-size:9px;gap:8px;padding:5px 10px}.first-guide small{max-width:220px}.first-guide{gap:7px}.first-guide button{font-size:9px}.first-guide .guide-close{font-size:18px}.tools-panel .tool-grid{gap:7px}.tools-panel .swatches{grid-template-columns:repeat(6,1fr)}.tools-panel .swatch{height:35px}.tools-panel .custom-color{margin-top:12px}.album-rewards b{font-size:9px;padding:7px}.gallery-empty{padding:20px 5px}.gallery-empty h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.keepsake-stage.celebrate,.preview-shine{animation:none}}
@media(max-width:360px){.workspace-toolbar{display:grid;grid-template-columns:1fr auto;gap:6px}.workspace-toolbar .draw-modes{justify-self:start}.workspace-toolbar .toolbar-actions{grid-row:1;grid-column:2;margin-left:0}.workspace-toolbar .view-switch{grid-row:2;grid-column:1/-1;margin-left:0;justify-content:center}.workspace-toolbar .view-switch button{flex:1}.finish-preview-buttons{flex-wrap:wrap}}

@media(max-width:360px){.gallery-toolbar .book-filters button{padding:8px 6px;font-size:9px;min-width:0;flex:1}.gallery-toolbar .book-filters{gap:0}}