@charset "UTF-8";
:root{color-scheme:light;--paper:#fbf6ec;--ink:#24493e;--muted:#767a6d;--coral:#bd513a;--coral-dark:#9f3e2c;--lavender:#d9c8e8;--line:#e6dfd2;--white:#fffdf8;--radius:28px;--font:"Tajawal","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button,a{touch-action:manipulation}button{border:0}a{color:inherit;text-decoration:none}svg{display:block;flex:none}button svg,.return-link svg,.stage-hint svg,.fixed-detail svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #9973b8;outline-offset:4px}h1,h2,h3,p,figure{margin:0}[hidden]{display:none!important}.skip-link{position:fixed;inset-block-start:-100px;inset-inline-start:15px;z-index:100;background:var(--ink);color:white;padding:14px 20px;border-radius:12px}.skip-link:focus{inset-block-start:12px}.site-header{height:82px;max-width:1240px;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;direction:ltr;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:10px;color:var(--coral);min-height:44px}.brand-icon{width:34px;height:39px}.wordmark-type{font:900 23px/.95 "Arial Rounded MT Bold",Arial,sans-serif;letter-spacing:-1.2px}.wordmark-type>span{display:block;margin-top:6px;font:500 8px/1.2 Arial,sans-serif;letter-spacing:1.05px;color:var(--ink)}.by-kabo{display:flex;align-items:center;gap:5px;font:11px/1 Arial,sans-serif;letter-spacing:.1px}.by-kabo strong{font-size:12px;letter-spacing:1.6px}.by-kabo i{width:7px;height:7px;background:var(--coral);border-radius:50%;margin-left:5px}.customizer-section{max-width:1240px;margin:0 auto;padding:32px 32px 68px;scroll-margin-top:0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.intro h1{font-size:clamp(28px,3.4vw,44px);line-height:1.4;font-weight:800;letter-spacing:-1.2px}.intro h1 span{color:var(--coral)}.intro p{margin-top:3px;font-size:14px;color:var(--muted)}.intro-stamp{display:flex;align-items:center;gap:13px;margin-inline-end:8px;transform:rotate(-8deg)}.intro-stamp svg{width:32px;height:32px;fill:var(--coral)}.intro-stamp span{font:italic 15px/1.05 Georgia,serif;letter-spacing:-.4px}.studio-grid{display:grid;grid-template-columns:minmax(0,1.33fr) minmax(340px,1fr);align-items:start;gap:36px;direction:ltr}.preview-column,.controls-column{direction:rtl;min-width:0}.preview-column{position:sticky;top:24px}.stage{isolation:isolate;position:relative;height:570px;overflow:hidden;border-radius:34px;background:#eeece6}.stage:after{content:"";position:absolute;inset:0;border:1px solid #d7d4cb;border-radius:inherit;pointer-events:none;z-index:5}.stage-orbit{position:absolute;left:50%;top:47%;width:74%;height:76%;border:1px solid #fff8e8b5;border-radius:50%;pointer-events:none;z-index:-1}.orbit-one{transform:translate(-50%,-50%) rotate(27deg)}.orbit-two{width:92%;height:65%;transform:translate(-50%,-50%) rotate(-31deg)}.stage-label{position:absolute;inset-inline-end:24px;top:24px;display:flex;align-items:center;gap:7px;font:9px/1 Arial,sans-serif;letter-spacing:1.7px;color:#755f4d;pointer-events:none;z-index:2}.stage-label>span{width:5px;height:5px;border-radius:50%;background:var(--coral)}#canvas{display:block;width:100%;height:100%;position:relative;z-index:1;touch-action:none;cursor:grab}#canvas:active{cursor:grabbing}.stage-sparkle{position:absolute;pointer-events:none;color:#b45b40;font-family:Georgia,serif;z-index:0;line-height:1}.sparkle-one{top:23%;right:13%;font-size:42px;transform:rotate(15deg)}.sparkle-two{bottom:21%;left:12%;font-size:45px;color:#89729a;transform:rotate(-18deg)}.stage-doodle{position:absolute;right:14%;bottom:17%;width:55px;height:46px;transform:rotate(18deg);color:#a2795a;pointer-events:none}.stage-doodle svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.stage-tools{position:absolute;top:20px;inset-inline-start:18px;z-index:4;display:flex;gap:7px}.icon-button{width:44px;height:44px;border:1px solid #ffffffa8;background:#fffaf4b0;backdrop-filter:blur(10px);border-radius:50%;display:grid;place-items:center;transition:background .2s,transform .2s}.icon-button:hover{background:var(--white);transform:translateY(-2px)}.icon-button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.stage-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;z-index:3;font-size:11px;color:#666b60;background:#f9f8f2d4;border:1px solid #ffffffb0;padding:9px 13px;border-radius:99px;pointer-events:none}.stage-hint svg{width:15px;height:15px}.stage-hint span{opacity:.6}.loading,.load-error{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;background:#eeece6ed;font-size:14px}.loading-mushroom{font-size:40px;animation:breathe 1.7s ease-in-out infinite}.load-error{padding:30px}.load-error strong{font-size:21px}.load-error p{font-size:13px;color:#6e665b}.load-error button{margin-top:12px}.preview-footnote{display:flex;justify-content:space-between;align-items:center;padding:14px 7px;color:#827e6c;font-size:11px}.preview-footnote>span:first-child{display:flex;gap:6px;align-items:center}.preview-footnote i{height:5px;width:5px;border-radius:50%;background:#858c71}.preview-footnote>span:last-child{font:italic 13px Georgia,serif;color:var(--coral)}.parts-heading,.section-heading,.design-heading{display:flex;justify-content:space-between;align-items:center}.parts-heading{margin-bottom:13px}.parts-heading h2{font-size:16px;font-weight:750}.step-label{font:8px/1 Arial,sans-serif;letter-spacing:1px;color:#8d8d7a}.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:5px;background:#b7d2e3;border:1px solid #e9e1d3;border-radius:18px}.part-tab{display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:8px 5px;border-radius:12px;font-size:13px;background:transparent;transition:background .2s,color .2s,box-shadow .2s}.part-tab.is-active,.part-tab[aria-selected=true]{background:var(--white);color:var(--ink);box-shadow:0 2px 7px #5e42210c;font-weight:700}.part-dot{display:block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--part-color,var(--coral));box-shadow:0 0 0 1px #24493e15}.palette-heading{display:flex;justify-content:space-between;align-items:center;margin:24px 0 13px}.field-label{display:block;color:#8a8776;font-size:10px;margin-bottom:3px}.palette-heading h3{font-size:18px;font-weight:700;line-height:1.5}.color-meta{display:flex;flex-direction:column;gap:4px;align-items:flex-end;color:#8a8776;font-size:10px}.color-meta>span:first-child{display:inline-flex;background:#ece8dc;border-radius:6px;padding:3px 7px;font-size:9px;color:#6e745f}.color-meta b{font-weight:500}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px 6px}.color-option{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-width:0;min-height:65px;padding:7px 1px 4px;background:transparent;border-radius:13px;position:relative}.swatch{position:relative;display:block;width:37px;height:37px;border-radius:50%;background:var(--swatch,#ddd);box-shadow:inset 0 0 0 1px #00000012;transition:transform .2s;flex:none}.swatch:after{content:"";position:absolute;inset:-5px;border:1.5px solid transparent;border-radius:inherit;transition:border-color .2s}.color-option.is-selected .swatch:after,.color-option[aria-checked=true] .swatch:after{border-color:var(--ink)}.color-option.is-selected .swatch:before,.color-option[aria-checked=true] .swatch:before{content:"";position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border:2px solid var(--paper);border-radius:50%;background:var(--ink);z-index:2}.color-option:hover .swatch{transform:translateY(-2px)}.color-label{display:block;max-width:100%;font:9px/1.3 Arial,var(--font),sans-serif;white-space:normal;overflow-wrap:anywhere;text-align:center;color:#6f7263;direction:ltr}.color-option.is-selected .color-label,.color-option[aria-checked=true] .color-label{color:var(--ink);font-weight:700}.fixed-detail{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:13px;font-size:10px;line-height:1.5;color:#898574}.fixed-detail svg{width:12px;height:12px;opacity:.75}.fixed-detail>span{opacity:.5}.section-heading h3,.design-heading h3{font-size:14px}.text-button{display:flex;align-items:center;gap:6px;background:none;color:var(--coral);font-size:12px;min-height:44px;padding:0 8px 0 0}.text-button svg{width:16px;height:16px}.your-design{margin-top:25px;padding:19px 16px 16px;background:#f0eee2;border:1px solid #e4e4d3;border-radius:22px}.design-heading h3{display:flex;align-items:center;gap:7px}.design-heading h3 span{color:var(--coral);font-size:18px}.design-heading>span{font-size:10px;color:#7a806c}.summary{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.summary-item{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#68705d;min-height:25px}.summary-dot{width:10px;height:10px;border-radius:50%;background:var(--swatch,#ddd);box-shadow:inset 0 0 0 1px #00000012;flex:none}.action-row{display:grid;grid-template-columns:1.13fr 1fr;gap:8px;margin-top:17px}.button{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;min-height:49px;padding:12px 10px;font-size:12px;font-weight:600;transition:background .2s,transform .2s}.button svg{width:18px;height:18px}.button-primary{background:var(--ink);color:var(--paper)}.button-primary:hover{background:#18372f;transform:translateY(-1px)}.button-secondary{background:transparent;border:1px solid #b7bdab;color:var(--ink)}.button-secondary:hover{background:#e5e6d5}.button:disabled{opacity:.5;cursor:wait}.screen-note{text-align:center;font-size:10px;color:#979280;margin-top:13px;line-height:1.7}.little-world{position:relative;background:#e4ead8;padding:69px 32px 53px;overflow:hidden}.little-world:before{content:"";position:absolute;top:-1px;left:-1%;width:102%;height:24px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 42%,96% 55%,92% 66%,88% 72%,84% 73%,80% 67%,76% 57%,72% 45%,68% 33%,64% 24%,60% 23%,56% 30%,52% 41%,48% 55%,44% 67%,40% 73%,36% 70%,32% 61%,28% 48%,24% 34%,20% 26%,16% 25%,12% 32%,8% 43%,4% 57%,0 65%)}.world-inner{max-width:1050px;margin:auto}.world-heading{position:relative;text-align:center;margin-bottom:31px}.eyebrow{display:block;font:8px/1.5 Arial,sans-serif;letter-spacing:2.2px;color:#6b785e;margin-bottom:11px}.world-heading h2{font-size:32px;font-weight:750;letter-spacing:-.8px}.world-heading h2 span{color:#b75942}.world-heading p{color:#7b836d;font-size:12px;margin-top:9px}.world-flower{position:absolute;right:10%;top:3px;width:66px;height:66px;transform:rotate(12deg);fill:#b5c59b}.world-flower circle{fill:#e4ead8}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;direction:rtl}.story-card{min-width:0;background:#fcf8ee;padding:12px 12px 20px;border-radius:23px;box-shadow:0 5px 1px #52633e06}.story-desk{transform:rotate(1.5deg)}.story-hand{transform:rotate(-1.5deg)}.story-image{position:relative;aspect-ratio:1.18;overflow:hidden;border-radius:15px;background:#d8c7de}.story-hand .story-image{background:#ebc4a5}.story-image img{display:block;width:100%;height:100%;object-fit:cover}.image-sticker{position:absolute;inset-inline-start:16px;bottom:16px;display:grid;place-items:center;width:75px;height:75px;border-radius:50%;background:#f4da8c;color:#74532f;text-align:center;font-size:13px;font-weight:700;line-height:1.6;transform:rotate(-13deg);border:1px solid #b895504d;box-shadow:0 3px 7px #48342517}.story-hand .image-sticker{background:#d7cae4;color:#5e4977;transform:rotate(11deg)}.story-card .card-sticker-wrap{padding:17px 8px 0}.story-card .card-sticker-wrap>div{display:flex;align-items:center;gap:10px}.story-number{font:10px/1 Arial,sans-serif;letter-spacing:.5px;color:#aaa38f}.story-card h3{font-size:18px;font-weight:700}.story-card p{font-size:11px;color:#8b8774;margin-top:7px;padding-right:24px}.imagined-note{text-align:center;font-size:10px;color:#78816b;margin-top:27px}.return-link{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px auto 0;min-height:44px;width:fit-content;font-size:13px;font-weight:600;border-bottom:1px solid #8d9b7c}.return-link svg{width:18px;height:18px}.site-footer{max-width:1240px;margin:auto;padding:36px 32px 24px;text-align:center}.footer-wordmark{display:inline-block;color:var(--coral);font:900 23px/.9 Arial,sans-serif;letter-spacing:-1px}.footer-wordmark span{display:block;color:var(--ink);font:10px/1 Arial,sans-serif;letter-spacing:1.5px;margin-top:9px}.site-footer>p{color:#8c8976;font-size:12px;margin-top:16px}.footer-details{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:28px;padding-top:16px;font-size:10px;color:#898675}.footer-details>span span{padding:0 5px}.footer-details a{min-height:44px;display:flex;align-items:center;color:var(--ink)}.toast{position:fixed;z-index:100;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:14px 22px;border:1px solid #ffffff26;border-radius:18px;background:var(--ink);color:var(--paper);box-shadow:0 10px 40px #172c3225;text-align:center;font-size:13px;line-height:1.7;white-space:normal}.noscript-note{position:fixed;bottom:10px;right:10px;left:10px;background:var(--coral);color:white;text-align:center;padding:18px;border-radius:16px;z-index:20}@keyframes breathe{50%{transform:translateY(-6px) rotate(-5deg)}}
@media(min-width:1440px){.site-header,.customizer-section,.site-footer{max-width:1300px}.stage{height:620px}}
@media(max-width:1000px) and (min-width:701px){.studio-grid{gap:24px;grid-template-columns:minmax(0,1fr) minmax(310px,.85fr)}.site-header{padding:0 25px}.customizer-section{padding-inline:25px}.stage{height:510px}.stage-label{font-size:7px;letter-spacing:1px;inset-inline-end:19px}.stage-tools{top:45px;gap:5px}.stage-orbit{width:88%}.step-label{font-size:7px}.palette{gap:7px 2px}.world-flower{right:1%}.story-card h3{font-size:17px}}
@media(max-width:700px){.site-header{height:58px;margin-inline:18px;padding:0;border-bottom-color:#e6dfd299}.wordmark{gap:7px}.brand-icon{width:25px;height:31px}.wordmark-type{font-size:18px;letter-spacing:-.9px}.wordmark-type>span{font-size:6.2px;letter-spacing:.75px;margin-top:4px}.by-kabo{font-size:9px}.by-kabo strong{font-size:10px;letter-spacing:1.2px}.by-kabo i{width:5px;height:5px;margin-left:2px}.customizer-section{padding:15px 17px 36px}.intro{margin-bottom:14px}.intro h1{font-size:27px;line-height:1.35;letter-spacing:-.9px}.intro p{font-size:11px;margin-top:3px}.intro-stamp{gap:7px;margin-inline-end:4px}.intro-stamp svg{width:21px;height:21px}.intro-stamp span{font-size:11px}.studio-grid{display:flex;flex-direction:column;gap:13px}.preview-column,.controls-column{width:100%}.preview-column{position:static}.stage{height:clamp(245px,34svh,320px);border-radius:25px}.stage-label{top:18px;inset-inline-end:17px;font-size:7px;letter-spacing:1.15px}.stage-tools{top:10px;inset-inline-start:10px;gap:4px}.icon-button{width:44px;height:44px}.icon-button svg{width:18px;height:18px}.stage-hint{bottom:11px;padding:7px 11px;font-size:9px;gap:5px}.stage-hint svg{height:13px;width:13px}.stage-sparkle.sparkle-one{top:23%;right:12%;font-size:27px}.stage-sparkle.sparkle-two{bottom:22%;left:12%;font-size:29px}.stage-doodle{width:35px;right:13%;bottom:19%;height:30px}.stage-orbit{height:79%;width:68%}.orbit-two{height:68%;width:84%}.preview-footnote{display:none}.parts-heading{margin:0 2px 8px}.parts-heading h2{font-size:12px}.step-label{font-size:7px;letter-spacing:1px}.parts{padding:4px;border-radius:16px;gap:5px}.part-tab{min-height:44px;font-size:12px;gap:7px;padding:7px 4px}.part-dot{width:11px;height:11px}.palette-heading{margin:12px 2px 7px}.field-label{font-size:9px;margin-bottom:1px}.palette-heading h3{font-size:16px;line-height:1.4}.color-meta{font-size:9px;gap:3px}.color-meta>span:first-child{font-size:8px;padding:2px 6px}.palette{gap:3px 4px}.color-option{min-height:58px;gap:6px;padding-top:6px;padding-bottom:4px}.swatch{width:33px;height:33px}.swatch:after{inset:-4px}.color-label{font-size:8px;line-height:1.2}.fixed-detail{font-size:9px;margin-top:7px;gap:5px}.section-heading h3,.design-heading h3{font-size:13px}.your-design{margin-top:20px;padding:17px 14px 14px}.button{min-height:50px;font-size:12px}.summary{gap:7px 10px}.screen-note{font-size:9px}.little-world{padding:53px 17px 32px}.world-heading{margin-bottom:25px}.eyebrow{font-size:7px;letter-spacing:1.7px;margin-bottom:8px}.world-heading h2{font-size:26px;letter-spacing:-.7px}.world-heading p{font-size:10px;margin-top:7px}.world-flower{width:37px;height:37px;right:-6px;top:-8px;opacity:.8}.story-grid{grid-template-columns:1fr;gap:24px;margin-inline:4px}.story-card{border-radius:21px;padding:9px 9px 17px}.story-desk{transform:rotate(1.6deg)}.story-hand{transform:rotate(-1.6deg)}.story-image{aspect-ratio:1.12;border-radius:14px}.image-sticker{width:66px;height:66px;font-size:12px;bottom:12px;inset-inline-start:12px}.story-card .card-sticker-wrap{padding:15px 8px 0}.story-card h3{font-size:17px}.story-card p{font-size:10px}.imagined-note{font-size:9px;margin-top:25px}.return-link{font-size:12px;margin-top:12px}.site-footer{padding:30px 18px max(16px,env(safe-area-inset-bottom))}.footer-wordmark{font-size:22px}.site-footer>p{font-size:11px}.footer-details{font-size:9px;margin-top:21px;padding-top:10px}.toast{font-size:12px;width:max-content;bottom:max(15px,env(safe-area-inset-bottom))}}
@media(max-width:360px){.site-header{margin-inline:14px}.customizer-section{padding-inline:13px}.intro h1{font-size:24px}.intro-stamp span{font-size:10px}.intro-stamp svg{width:17px;height:17px}.stage{height:clamp(224px,33svh,275px)}.stage-label{font-size:6px;letter-spacing:.8px;top:18px}.stage-tools{gap:0}.icon-button{background:#fffaf49c}.swatch{width:31px;height:31px}.color-label{font-size:7.5px}.parts-heading h2{font-size:11px}.step-label{font-size:6.5px}.world-heading h2{font-size:24px}.world-flower{right:-8px;width:28px}.button{gap:6px;font-size:11px}.summary-item{font-size:9px}.fixed-detail{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}.is-silk{background:linear-gradient(115deg,#aa7427 0%,#e8bf68 35%,#f3d992 48%,#c38d34 68%,#eac572 100%)}.palette[data-part=body]{grid-template-columns:repeat(2,minmax(0,1fr));min-height:174px;align-items:center}.palette[data-part=body] .swatch{width:58px;height:58px}.share-dialog{border:1px solid #d9d4c5;border-radius:22px;background:#fbf6ec;padding:25px;max-width:calc(100vw - 32px);color:#24493e}.share-dialog::backdrop{background:#18382c66}.share-dialog input{width:100%;padding:14px;margin:18px 0;border:1px solid #b9c4b8;border-radius:10px;font:14px Arial}.share-dialog button{padding:12px 30px;border-radius:10px;background:#24493e;color:white;min-height:44px}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/Iura6YBj_oCad4k1rzY.ttf) format('truetype');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/Iurf6YBj_oCad4k1l8KiLrY.ttf) format('truetype');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/Iurf6YBj_oCad4k1l4qkLrY.ttf) format('truetype');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./assets/Iurf6YBj_oCad4k1l5anLrY.ttf) format('truetype');
}

@media(prefers-reduced-motion:no-preference){.stage-sparkle{animation:float-sparkle 5s ease-in-out infinite}.sparkle-two{animation-delay:-2s}.intro-stamp{animation:gentle-tilt 7s ease-in-out infinite}.story-card{transition:transform .4s ease}.story-card:hover{transform:rotate(0deg) translateY(-4px)}}@keyframes float-sparkle{50%{translate:0 -7px;rotate:12deg}}@keyframes gentle-tilt{50%{transform:rotate(5deg)}}
.stage-label{inset-inline-end:auto;left:18px;right:auto;max-width:calc(100% - 126px);font-size:7px;letter-spacing:.9px}.fixed-detail{color:#777360}.color-label{color:#585f52}

/* V2: quiet product preview, short copy and photographic gallery. */
.intro{position:relative;min-height:80px;padding-inline-end:100px}
.intro h1{font-size:38px;letter-spacing:-.6px}
.intro p{font-size:13px}
.cute-sticker{display:block;object-fit:contain;pointer-events:none;user-select:none;width:80px;height:80px;max-width:80px;max-height:80px;filter:drop-shadow(0 3px 2px #3147350a)}
.sticker-wave{position:absolute;inset-inline-end:2px;top:0;transform:rotate(-6deg);transform-origin:50% 85%}
.stage-label{left:24px;right:auto;top:28px;max-width:none;letter-spacing:0;font:11px/1.5 var(--font);color:#74786c;gap:4px}
.stage-label bdi{font:10px/1 Arial,sans-serif}
.little-world{background:#e9ede2;padding-top:43px;padding-bottom:35px}
.little-world:before{display:none}
.world-inner{max-width:1176px}
.world-heading{display:flex;align-items:center;justify-content:space-between;text-align:right;min-height:82px;margin-bottom:17px;padding-inline:4px}
.world-heading h2{font-size:25px;letter-spacing:-.3px}
.world-heading p{font-size:12px;margin-top:6px;color:#727b67}
.sticker-peek{transform:rotate(7deg);transform-origin:50% 80%}
.story-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.story-card{padding:8px 8px 13px;border-radius:20px;background:#faf8f2;box-shadow:none;transform:none}
.story-image,.story-hand .story-image{aspect-ratio:1;background:#dedfd5;border-radius:13px}
.story-card .card-sticker-wrap{padding:12px 7px 0;font-size:13px;color:#68725e;text-align:center;font-weight:500}
.imagined-note{margin-top:20px;color:#727b67}
.return-link{margin-top:12px;font-size:12px}
.footer-wordmark{display:inline-flex;min-height:44px;flex-direction:column;justify-content:center}
.site-footer{padding-top:29px}
.footer-details{margin-top:22px}
@media(min-width:701px){.palette[data-part=body]{min-height:174px}}
@media(max-width:1000px) and (min-width:701px){.stage-label{top:22px}.stage-tools{top:14px}.story-grid{gap:12px}.world-heading h2{font-size:24px}}
@media(max-width:700px){
  .intro{min-height:61px;margin-bottom:11px;padding-inline-end:73px}
  .intro h1{font-size:28px;line-height:1.35}
  .intro p{font-size:11px;margin-top:3px}
  .cute-sticker{width:64px;height:64px;max-width:64px;max-height:64px}
  .sticker-wave{top:-3px;inset-inline-end:1px}
  .stage-label{top:24px;left:17px;font-size:10px}
  .stage-label bdi{font-size:9px}
  .palette[data-part=body]{min-height:114px}
  .little-world{padding:27px 0 26px}
  .world-heading{min-height:68px;padding-inline:21px;margin-bottom:15px}
  .world-heading h2{font-size:22px}
  .world-heading p{font-size:11px;margin-top:5px}
  .story-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x pan-y pinch-zoom;scroll-snap-type:x mandatory;scroll-padding-inline:17px;gap:13px;margin:0;padding:0 17px 11px;scrollbar-width:thin;scrollbar-color:#b8c1ac transparent}
  .story-card{transform:none;padding:8px 8px 13px;border-radius:19px;scroll-snap-align:start}
  .story-image{aspect-ratio:1;border-radius:13px}
  .story-card .card-sticker-wrap{padding-top:11px;font-size:12px}
  .imagined-note{margin-top:12px;font-size:9px}
  .return-link{margin-top:8px}
}
@media(max-width:360px){.intro h1{font-size:26px}.intro p{font-size:10px}.cute-sticker{width:60px;height:60px;max-width:60px;max-height:60px}.stage-label{top:23px;left:15px}.world-heading{padding-inline:17px}.story-grid{grid-auto-columns:86%;padding-inline:13px;scroll-padding-inline:13px}.world-heading h2{font-size:21px}}
@media(prefers-reduced-motion:no-preference){.sticker-wave{animation:sticker-hello 5.8s ease-in-out 2}.sticker-peek{animation:sticker-peek 7s ease-in-out 2}.story-card:hover{transform:none}}
@keyframes sticker-hello{0%,75%,100%{transform:rotate(-6deg)}82%{transform:rotate(3deg)}89%{transform:rotate(-9deg)}96%{transform:rotate(-3deg)}}
@keyframes sticker-peek{0%,85%,100%{transform:rotate(7deg)}92%{transform:translateY(-4px) rotate(3deg)}}
.story-grid:focus-visible{outline:2px solid #9973b8;outline-offset:4px}
/* Six approved stickers stay outside product photos and controls. */
.story-card .card-sticker-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:65px;padding:7px 9px 0}
.card-sticker{display:block;width:54px;height:54px;object-fit:contain;flex:none;pointer-events:none;transform:rotate(-6deg)}
.story-hand .card-sticker{transform:rotate(7deg)}
.footer-sticker{display:block;width:68px;height:68px;object-fit:contain;margin:0 auto 10px;pointer-events:none}
@media(max-width:700px){.story-card .card-sticker-wrap{min-height:58px;padding:6px 7px 0}.card-sticker{width:48px;height:48px}.footer-sticker{width:62px;height:62px}}
/* Motion is inside each GIF; avoid stacking another CSS animation. */
.sticker-wave,.sticker-peek{animation:none}
.story-card .card-sticker-wrap picture{display:block;flex:none}

/* Neutral playful paper — 2026-10-19. Continuous stage; no inset or green wash. */
:root{--paper:#faf7f0;--ink:#343d44;--muted:#807d75;--line:#e3ded3}
body{background-color:#faf7f0;background-image:radial-gradient(circle,#ad9d8124 1px,transparent 1.3px);background-size:25px 25px}
.site-header{border-bottom:1px dashed #d9d1c2;background:#fcfaf4e8}
.by-kabo{background:#f0eee7;border:1px solid #e0ddd3;border-radius:999px;padding:8px 10px}
.by-kabo i{background:#718ba4}
.customizer-section{position:relative}
.intro h1 span{position:relative;isolation:isolate}
.intro h1 span:after{content:"";position:absolute;z-index:-1;left:-3px;right:-4px;bottom:1px;height:9px;border-radius:5px;background:#ecdcb3;transform:rotate(-1deg);pointer-events:none}
.intro p{color:#807a6f}
.stage{background:var(--stage-color,#a9d7d6);border-radius:31px;box-shadow:0 7px 0 #8eafc347,0 15px 27px #52463807}
.stage-backdrop{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.stage:after{border:1px solid #d7cdbb90}
#canvas{z-index:1}
.stage-label{background:#faf6ecdc;color:#7d7a72;border:1px solid #e7dece;padding:6px 10px;border-radius:999px;top:21px;left:21px}
.stage-tools .icon-button{background:#fbf8f0ed;border-color:#ded6c8;box-shadow:0 2px 3px #52463810}
.stage-tools .icon-button[aria-pressed=true]{background:#566f87;border-color:#566f87}
.stage-hint{background:#faf6eced;border-color:#dfd6c6;color:#7c786d;box-shadow:0 2px 6px #52463806}
.loading,.load-error{background:var(--stage-color,#a9d7d6)}
.controls-column{position:relative;background:#fffcf5;border:1px solid #e5ded0;border-radius:25px;padding:23px 21px 17px;box-shadow:0 5px 0 #dfd7c62e}
.controls-column:before{display:none}
.parts{background:#eeeae2;border-color:#e2ddd2}
.part-tab.is-active,.part-tab[aria-selected=true]{background:#fffdf7;box-shadow:inset 0 -2px #829bb2,0 2px 5px #5246380c}
.color-meta>span:first-child{background:#eeece5;color:#7e7b71}




.your-design{background:#f1eee6;border-color:#e0d9cb}
.design-heading>span,.summary-item{color:#79776c}
.button-primary{background:#3b4954}
.button-primary:hover{background:#2f3d48}
.button-secondary{border-color:#c7c8c4;color:#46545e}
.button-secondary:hover{background:#e7e8e5}
.little-world{background-color:#f0ebe1;background-image:linear-gradient(90deg,#879caf16 1px,transparent 1px),linear-gradient(#879caf16 1px,transparent 1px);background-size:35px 35px;border-top:1px solid #e1d8c8;border-bottom:1px solid #e1d8c8}
.story-card{border:1px solid #e4dccc;box-shadow:0 4px 0 #d5cbb835;background:#fffcf5}
.world-heading p,.story-card .card-sticker-wrap,.imagined-note{color:#807a6e}
.return-link{border-color:#acb5bc}
.site-footer{background:#fcfaf4df}
.footer-details{border-color:#e3dccc}
button:focus-visible,a:focus-visible,canvas:focus-visible,.story-grid:focus-visible{outline-color:#718fa8}
@media(min-width:701px){.studio-grid{gap:28px}.parts-heading{margin-bottom:12px}.palette-heading{margin-top:19px}.controls-column .your-design{margin-top:20px}}
@media(max-width:700px){
  .site-header{margin:0;padding:0 18px;background:#fcfaf4ed}
  .by-kabo{padding:6px 8px}
  .stage{border-radius:25px;box-shadow:0 5px 0 #8eafc347}
  .stage-label{top:15px;left:15px;padding:5px 8px;font-size:9px}
  .stage-label bdi{font-size:8px}
  .stage-tools{top:10px;inset-inline-start:10px}
  .stage-tools .icon-button{width:44px;height:44px}
  .studio-grid{gap:20px}
  .controls-column{padding:17px 13px 13px;border-radius:22px}
  .parts-heading{margin-bottom:8px}
  .intro h1 span:after{height:7px;bottom:1px}
  .palette[data-part=body]{min-height:110px}
  .screen-note{margin-top:11px}
  .site-footer{padding-inline:18px}
}
@media(max-width:360px){.site-header{padding-inline:14px}.controls-column{padding-inline:11px}.stage-label{left:12px}.color-label{font-size:7.5px}.stage-tools{inset-inline-start:8px}}
.share-dialog{background:#faf7f0;color:#343d44;border-color:#d9d3c7}.share-dialog button{background:#3b4954}.share-dialog input{border-color:#c8c5bc}.fixed-detail{color:#817b6e}.color-label{color:#656057}

/* Simplified color controls and six selectable stage backgrounds. */
.stage,.loading,.load-error{background:var(--stage-color,#a9d7d6)}
.background-chooser{display:grid;grid-template-columns:auto minmax(0,300px);align-items:center;justify-content:space-between;gap:10px;margin-top:13px;padding:0 2px}
.background-label{font-size:11px;color:#807a6e;white-space:nowrap}
.backgrounds{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:2px;min-width:0}
.background-option{display:grid;place-items:center;min-width:44px;min-height:44px;padding:7px;background:transparent;border-radius:12px}
.background-swatch{display:block;width:26px;height:26px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px #0000000b}
.background-option[aria-checked=true] .background-swatch{box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px #586d7e,inset 0 0 0 1px #0000000b}
.background-option:hover{background:#eae5db70}
.color-meta{flex-direction:row;align-items:center;gap:8px}
.color-meta>span{background:none;padding:0;border-radius:0;color:#898274;font-size:9px;white-space:nowrap}
#randomize{min-height:44px;padding:8px 10px;border:1px solid #e1d8ca;border-radius:11px;background:#f4efe5;font-size:11px;gap:6px;white-space:nowrap}
#randomize:hover{background:#ede6d9}
#randomize svg{width:15px;height:15px}
.palette-heading>div:first-child{min-width:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.background-chooser{margin-top:11px}.background-label{font-size:10px}.background-swatch{width:25px;height:25px}.palette-heading{gap:8px}.color-meta{gap:6px}}
@media(max-width:380px){.background-chooser{grid-template-columns:minmax(0,1fr);gap:2px;padding:0}.background-label{padding-inline:3px}.backgrounds{width:100%}#randomize{padding-inline:8px;font-size:10px}.color-meta{gap:5px}}
/* Stack narrow tablets so the full mushroom fits beside no squeezed controls. */
@media(min-width:701px) and (max-width:900px){.studio-grid{display:flex;flex-direction:column;gap:24px}.preview-column,.controls-column{width:100%;position:static}.stage{height:480px}}
.background-chooser{grid-template-columns:minmax(0,1fr);width:min(100%,300px);margin-inline:auto;justify-content:stretch}

/* Background surfaces only; the 3D canvas and character stay sharp. */
.background-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.background-style{min-height:44px;min-width:44px;border:1px solid #e0ddd5;border-radius:12px;background:#f3f2ec;color:#677581;font-size:12px}
.background-style[aria-checked=true]{background:#dce6ed;border-color:#8ca7b8;color:#344b5b;box-shadow:inset 0 0 0 1px #8ca7b830}
.stage[data-background-style=solid]{background-image:none}
.stage[data-background-style=mix]{background-image:linear-gradient(135deg,var(--stage-color),var(--stage-secondary))}
.stage[data-background-style=glass]{background-color:#ffffff18;background-image:linear-gradient(135deg,#ffffff70 0%,#ffffff08 42%,#00000005 72%,#ffffff38 100%);backdrop-filter:blur(14px) saturate(0);-webkit-backdrop-filter:blur(14px) saturate(0);box-shadow:inset 0 0 0 1px #ffffffc9,inset 0 2px 2px #ffffffe6,inset 0 -2px 3px #ffffff90,0 8px 24px #0000000c}
.stage[data-background-style=glass]:after{border-color:#ffffff90;box-shadow:inset 1px 0 1px #ffffffd9,inset -1px 0 1px #0000000c}
.stage[data-background-style=glass] .stage-backdrop{filter:grayscale(1);opacity:.45}
.stage[data-background-style=glass] .loading,.stage[data-background-style=glass] .load-error{background:#e6e6e6}
.backgrounds[hidden]{display:none}

/* Compact brand lockup and one icon-only theme switch. Light is the default. */
.wordmark{flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px}
.wordmark-main{display:flex;align-items:center;gap:10px}
.wordmark .by-kabo{display:flex;justify-content:center;gap:4px;background:none;border:0;border-radius:0;padding:0;margin:0;color:#79756d;font:9px/1 Arial,sans-serif;letter-spacing:.2px}
.wordmark .by-kabo strong{font-size:9px;letter-spacing:1.5px}
.theme-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #dcd6cb;border-radius:11px;background:#f2eee6;color:#5a6873;box-shadow:0 2px 3px #51432c05}
.theme-toggle:hover{background:#eae5da}
.theme-toggle svg{width:20px;height:20px;stroke-width:1.7}
.theme-moon,.theme-sun{display:flex;align-items:center;justify-content:center}
.theme-sun{display:none}
html[data-theme=dark] .theme-moon{display:none}
html[data-theme=dark] .theme-sun{display:flex}
@media(max-width:700px){.wordmark{gap:2px}.wordmark-main{gap:7px}.wordmark .by-kabo{font-size:7px;gap:3px}.wordmark .by-kabo strong{font-size:7px;letter-spacing:1.25px}}

/* Dark theme changes UI surfaces only. Product and background swatches stay true. */
html[data-theme=dark]{color-scheme:dark;--paper:#1d2226;--ink:#eeeae2;--muted:#b0aca3;--line:#3b4247;--white:#2e353a;--coral:#e9a083;--coral-dark:#efb197}
html[data-theme=dark] body{background-color:#1d2226;background-image:radial-gradient(circle,#d8cdb617 1px,transparent 1.3px);color:#eeeae2}
html[data-theme=dark] .site-header{background:#21272bf0;border-color:#42494d}
html[data-theme=dark] .wordmark .by-kabo{color:#b5b0a5}
html[data-theme=dark] .theme-toggle{background:#30383e;border-color:#4a555e;color:#edcd88;box-shadow:0 2px 3px #00000012}
html[data-theme=dark] .theme-toggle:hover{background:#39434b}
html[data-theme=dark] .intro p{color:#b8b1a4}
html[data-theme=dark] .intro h1 span:after{background:#80644670}
html[data-theme=dark] .controls-column{background:#272e33;border-color:#41494f;box-shadow:0 5px 0 #10171938}
html[data-theme=dark] .parts{background:#1e252a;border-color:#3b454d}
html[data-theme=dark] .part-tab{color:#bdbbb4}
html[data-theme=dark] .part-tab.is-active,html[data-theme=dark] .part-tab[aria-selected=true]{background:#3a454d;color:#f6f1e7;box-shadow:inset 0 -2px #aac0cf,0 2px 5px #00000012}
html[data-theme=dark] .field-label,html[data-theme=dark] .color-meta,html[data-theme=dark] .color-meta>span{color:#b6afa3}
html[data-theme=dark] .color-label{color:#bab8af}
html[data-theme=dark] .color-option.is-selected .color-label,html[data-theme=dark] .color-option[aria-checked=true] .color-label{color:#f3eee3}
html[data-theme=dark] .color-option{background:transparent}
html[data-theme=dark] .swatch{box-shadow:inset 0 0 0 1px #ffffff24}
html[data-theme=dark] .fixed-detail,html[data-theme=dark] .screen-note{color:#aaa79c}
html[data-theme=dark] #randomize{background:#343b3e;border-color:#515553;color:#ecc2a4}
html[data-theme=dark] #randomize:hover{background:#404746}
html[data-theme=dark] .your-design{background:#20272b;border-color:#41494d}
html[data-theme=dark] .summary-item,html[data-theme=dark] .design-heading>span{color:#c0bcb0}
html[data-theme=dark] .button-primary{background:#d5e1e8;color:#27343e}
html[data-theme=dark] .button-primary:hover{background:#e4edf2}
html[data-theme=dark] .button-secondary{color:#d6e0e6;border-color:#63717b;background:transparent}
html[data-theme=dark] .button-secondary:hover{background:#35424a}
html[data-theme=dark] .background-label{color:#bcb5a8}
html[data-theme=dark] .background-option:hover{background:#d9e4ea10}
html[data-theme=dark] .background-option[aria-checked=true] .background-swatch{box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px #d3e0e9,inset 0 0 0 1px #ffffff20}
html[data-theme=dark] .background-style{background:#272f34;border-color:#454f56;color:#bdc8ce}
html[data-theme=dark] .background-style[aria-checked=true]{background:#415563;border-color:#9fb6c7;color:#f0f5f7;box-shadow:inset 0 0 0 1px #a9bfce30}
html[data-theme=dark] .stage{box-shadow:0 7px 0 #0d141a3d,0 15px 27px #00000014}
html[data-theme=dark] .stage:after{border-color:#ffffff30}
html[data-theme=dark] .stage-label,html[data-theme=dark] .stage-hint{background:#232a30dc;color:#ece7dc;border-color:#ffffff30;box-shadow:none}
html[data-theme=dark] .stage-tools .icon-button{background:#242d34ed;color:#eeeae0;border-color:#ffffff36;box-shadow:0 2px 3px #00000012}
html[data-theme=dark] .stage-tools .icon-button[aria-pressed=true]{background:#59748a;border-color:#adc0ce;color:#fff}
html[data-theme=dark] .loading,html[data-theme=dark] .load-error{color:#35434d}
html[data-theme=dark] .load-error p{color:#51606a}
html[data-theme=dark] .stage[data-background-style=glass]{background-color:#ffffff04;background-image:linear-gradient(135deg,#ffffff0e 0%,#ffffff02 42%,#00000008 72%,#ffffff06 100%);box-shadow:inset 0 0 0 1px #ffffff20,inset 0 2px 2px #ffffff20,inset 0 -2px 3px #ffffff0a,0 8px 24px #00000014}
html[data-theme=dark] .stage[data-background-style=glass]:after{border-color:#ffffff24;box-shadow:inset 1px 0 1px #ffffff28,inset -1px 0 1px #00000020}
html[data-theme=dark] .stage[data-background-style=glass] .loading,html[data-theme=dark] .stage[data-background-style=glass] .load-error{background:#272c30;color:#e9e5db}
html[data-theme=dark] .stage[data-background-style=glass] .load-error p{color:#bbb7ad}
html[data-theme=dark] .little-world{background-color:#242b2e;background-image:linear-gradient(90deg,#a5b5bf0a 1px,transparent 1px),linear-gradient(#a5b5bf0a 1px,transparent 1px);border-color:#3c464b}
html[data-theme=dark] .world-heading p,html[data-theme=dark] .story-card .card-sticker-wrap,html[data-theme=dark] .imagined-note{color:#b8b1a5}
html[data-theme=dark] .story-card{background:#2c3337;border-color:#465055;box-shadow:0 4px 0 #11191d2e}
html[data-theme=dark] .story-image,html[data-theme=dark] .story-hand .story-image{background:#374148}
html[data-theme=dark] .story-grid{scrollbar-color:#6b777e transparent}
html[data-theme=dark] .return-link{color:#dddcd5;border-color:#75858e}
html[data-theme=dark] .site-footer{background:#20272bf0}
html[data-theme=dark] .footer-details{border-color:#3c464b;color:#b6afa3}
html[data-theme=dark] .footer-details a{color:#dcdedb}
html[data-theme=dark] .share-dialog{background:#283137;color:#eee9de;border-color:#55616a}
html[data-theme=dark] .share-dialog::backdrop{background:#05090c99}
html[data-theme=dark] .share-dialog input{background:#1e262b;color:#e8edf0;border-color:#586973}
html[data-theme=dark] .share-dialog button{background:#d5e1e8;color:#27343e}
html[data-theme=dark] .toast{background:#d7e3ea;color:#263640;border-color:#eef5f8;box-shadow:0 10px 40px #00000030}
html[data-theme=dark] button:focus-visible,html[data-theme=dark] a:focus-visible,html[data-theme=dark] canvas:focus-visible,html[data-theme=dark] .story-grid:focus-visible{outline-color:#b9d4e5}
/* User-selected clear iridescent glass: edge sheen only, no stage doodles. */
.stage-backdrop{display:none}
#canvas{filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage[data-background-style=glass],html[data-theme=dark] .stage[data-background-style=glass]{background-color:#ffffff06;background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 1px #ffffffb0,inset 0 -1px 1px #ffffff38,0 9px 25px #26323c0d}
.stage[data-background-style=glass]:before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#a1e4efc9 0%,#b6b5ef9e 18%,#edb9d3bd 34%,#ecd69cb8 49%,#ffffffd9 58%,#b3e4e7c4 73%,#b9bbecb0 87%,#f4d3e4b8 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.stage[data-background-style=glass]:after,html[data-theme=dark] .stage[data-background-style=glass]:after{border:1px solid #ffffff40;background:none;box-shadow:inset 0 3px 8px #ffffff38,inset 4px 0 10px #8ddce916,inset -4px 0 10px #e5afd316,inset 0 -3px 9px #e8d39618;pointer-events:none}
html[data-theme=dark] .stage[data-background-style=glass]{background-color:#ffffff04;box-shadow:inset 0 1px 1px #ffffff30,inset 0 -1px 1px #ffffff14,0 9px 25px #00000018}
html[data-theme=dark] .stage[data-background-style=glass]:before{opacity:.76}
html[data-theme=dark] .stage[data-background-style=glass]:after{border-color:#ffffff15;box-shadow:inset 0 3px 8px #ffffff0d,inset 4px 0 10px #8ddce914,inset -4px 0 10px #e5afd314,inset 0 -3px 9px #e8d39612}
/* Distinct, restrained interaction feedback; JS owns click reaction sequences. */
@media(prefers-reduced-motion:no-preference){
  .part-tab{transition:transform .17s ease,background .2s ease,box-shadow .2s ease}
  .color-option .swatch{transition:transform .18s ease,box-shadow .18s ease}
  .background-option .background-swatch{transition:transform .2s ease,box-shadow .2s ease}
  .background-style{position:relative;overflow:hidden;transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease}
  .background-style:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff30 48%,transparent 75%);opacity:0;transform:translateX(-30%);transition:opacity .22s ease,transform .35s ease}
  #randomize svg,#save-image svg,#share svg,#reset svg,#rotate svg{transition:transform .2s ease}
  .theme-toggle,.theme-toggle svg{transition:transform .2s ease,background .2s ease,border-color .2s ease}
  .part-tab:active{transform:translateY(1px)}
  .color-option:active .swatch{transform:scale(.93)}
  .background-option:active .background-swatch{transform:scale(.91)}
  .background-style:active{transform:scale(.97)}
  #randomize:active{transform:rotate(-1deg)}
  #save-image:active{transform:translateY(1px)}
  #share:active{transform:translateY(-1px)}
  .theme-toggle:active{transform:scale(.94)}
  .stage-tools .icon-button:active{transform:scale(.94)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .part-tab:hover{transform:translateY(-1px)}
  .color-option:hover .swatch{transform:translateY(-2px) scale(1.05)}
  .background-option:hover .background-swatch{transform:translateY(-2px)}
  .background-style:hover{transform:translateY(-1px);border-color:#8fa7b7}
  .background-style:hover:after{opacity:1;transform:translateX(20%)}
  #randomize:hover svg{transform:rotate(-12deg)}
  #save-image:hover svg{transform:translateY(2px)}
  #share:hover svg{transform:translateY(-2px) rotate(-5deg)}
  .theme-toggle:hover svg{transform:rotate(-12deg) scale(1.05)}
  #reset:hover svg{transform:rotate(-28deg)}
  #rotate:hover svg{transform:rotate(-24deg)}
}
.part-tab:focus-visible,.background-style:focus-visible{outline-offset:2px}
.color-option:focus-visible,.background-option:focus-visible{outline-offset:1px}
/* Frost only what is behind the glass; keep its model and controls crisp. */
.stage[data-background-style=glass],html[data-theme=dark] .stage[data-background-style=glass]{backdrop-filter:blur(16px) saturate(1.08);-webkit-backdrop-filter:blur(16px) saturate(1.08)}

/* Fixed frosted glass and colorful Mushroom brand — 2026-10-19. */
.site-header{gap:16px}
.header-actions{display:flex;align-items:center;gap:8px;flex:none;direction:ltr}
.wordmark{flex:none;gap:4px}
.wordmark-main{gap:8px}
.wordmark .brand-icon{width:43px;height:46px;display:block;object-fit:contain;flex:none}
.wordmark-type{display:flex;align-items:baseline;white-space:nowrap;line-height:1.1}
.wordmark-type>.brand-letter{position:relative;display:inline-block;font:inherit;letter-spacing:inherit;margin:0;color:#b85343}
.wordmark-type>.brand-letter:nth-child(4n+2){color:#9a742f}
.wordmark-type>.brand-letter:nth-child(4n+3){color:#527f8d}
.wordmark-type>.brand-letter:nth-child(4n){color:#7d668d}
.wordmark-type>.brand-spotted:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#fff8e7;top:.13em;left:.2em;box-shadow:1px 1px 0 #613e291c;pointer-events:none}
.wordmark .by-kabo{font-size:8px;letter-spacing:.15px;line-height:1.2;gap:3px}
.wordmark .by-kabo strong{font-size:8px;letter-spacing:1px}
.language-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #dcd6cb;border-radius:11px;background:#f2eee6;color:#526371;box-shadow:0 2px 3px #51432c05;font:700 17px/1 var(--font)}
.language-toggle:hover{background:#eae5da}
#language-label{display:block;line-height:1;transform:translateY(1px)}
.intro h1 span:after{display:none}
#heading-prefix{color:var(--ink)}
#heading-product{color:#b85343;background:linear-gradient(100deg,#b85343 7%,#976e2b 33%,#527e86 63%,#77618c 94%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.stage[data-background-style=glass]{background-color:#ffffff0a;background-image:none;backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08)}
.stage[data-background-style=glass] .loading,.stage[data-background-style=glass] .load-error{background:#f7f5efeb}
#canvas{filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.footer-wordmark>span{letter-spacing:.25px}
html[dir=ltr] .intro h1{text-align:left;letter-spacing:-1.2px}
html[dir=ltr] .parts-heading,html[dir=ltr] .palette-heading,html[dir=ltr] .world-heading,html[dir=ltr] .your-design{text-align:left}
html[dir=ltr] .intro h1{font-size:34px}
html[data-theme=dark] .wordmark-type>.brand-letter{color:#ee9a83}
html[data-theme=dark] .wordmark-type>.brand-letter:nth-child(4n+2){color:#e3c47e}
html[data-theme=dark] .wordmark-type>.brand-letter:nth-child(4n+3){color:#94cad6}
html[data-theme=dark] .wordmark-type>.brand-letter:nth-child(4n){color:#c4aedf}
html[data-theme=dark] .language-toggle{background:#30383e;border-color:#4a555e;color:#dce3e6;box-shadow:0 2px 3px #00000012}
html[data-theme=dark] .language-toggle:hover{background:#39434b}
html[data-theme=dark] #heading-product{background-image:linear-gradient(100deg,#ee9a83 7%,#e3c47e 33%,#94cad6 63%,#c4aedf 94%)}
html[data-theme=dark] .stage[data-background-style=glass]{background-color:#ffffff04;background-image:none;backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08)}
html[data-theme=dark] .stage[data-background-style=glass] .loading,html[data-theme=dark] .stage[data-background-style=glass] .load-error{background:#272c30eb}
@media(max-width:700px){
  .site-header{height:70px;gap:10px}
  .header-actions{gap:6px}
  .wordmark-main{gap:5px}
  .wordmark .brand-icon{width:35px;height:38px}
  .wordmark-type{font-size:18px;letter-spacing:-.9px}
  .wordmark .by-kabo,.wordmark .by-kabo strong{font-size:7px}
  .wordmark .by-kabo strong{letter-spacing:.8px}
  .wordmark-type>.brand-spotted:after{width:2.5px;height:2.5px}
  html[dir=ltr] .intro h1{font-size:26px;letter-spacing:-.8px;line-height:1.22}
}
@media(max-width:360px){
  .site-header{padding-inline:13px;gap:8px}
  .wordmark-type{font-size:16px;letter-spacing:-.8px}
  .wordmark .brand-icon{width:32px;height:35px}
  .wordmark-main{gap:4px}
  .wordmark .by-kabo,.wordmark .by-kabo strong{font-size:6.8px}
  html[dir=ltr] .intro h1{font-size:23px}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.language-toggle:hover #language-label{transform:translateY(-1px)}}
@media(prefers-reduced-motion:no-preference){.language-toggle,.language-toggle #language-label{transition:transform .18s ease,background .2s ease}.language-toggle:active{transform:scale(.94)}}
@media(forced-colors:active){#heading-product{-webkit-text-fill-color:currentColor;background:none}.wordmark-type>.brand-letter{color:LinkText}}

/* English flow follows document direction through the original RTL panels. */
html[dir=ltr] .preview-column,
html[dir=ltr] .controls-column,
html[dir=ltr] .parts,
html[dir=ltr] .palette,
html[dir=ltr] .summary,
html[dir=ltr] .story-grid{direction:ltr}
html[dir=ltr] .controls-column,
html[dir=ltr] .parts-heading,
html[dir=ltr] .palette-heading,
html[dir=ltr] .your-design,
html[dir=ltr] .design-heading,
html[dir=ltr] .summary,
html[dir=ltr] .world-heading{text-align:start}

/* Pearl space with four sculptural, scroll-responsive glass accents. */
:root{--paper:#f3f4f2}
body{position:relative;isolation:isolate;background:#f3f4f2}
.site-header,.customizer-section,.little-world,.site-footer{background:transparent;background-image:none}
.site-header,.little-world{border-color:transparent}
body:before,body:after,.customizer-section:before,.customizer-section:after,.little-world:before,.little-world:after,.world-flower{display:none}
.site-header,body>main,.site-footer{position:relative;z-index:1}
.ambient-scene{position:fixed;inset:0;z-index:0;overflow:hidden;contain:layout paint;pointer-events:none;user-select:none}
.ambient-shape{position:absolute;display:block;pointer-events:none;--shape-angle:0deg;transform:translate3d(0,var(--drift-y,0px),0) rotate(calc(var(--shape-angle) + var(--drift-turn,0deg)));transform-origin:50% 50%;border:1px solid rgb(var(--shape-rgb)/.22);background:linear-gradient(125deg,#ffffffa8 0%,rgb(var(--shape-rgb)/.09) 52%,rgb(var(--shape-rgb)/.2) 100%);box-shadow:inset 1px 2px 2px #ffffffc7,inset -1px -2px 3px rgb(var(--shape-rgb)/.12),0 18px 34px rgb(var(--shape-rgb)/.055)}
.ambient-shape:before,.ambient-shape:after{content:"";position:absolute;border-radius:inherit;pointer-events:none}
.ambient-shape:before{inset:7px;border:1px solid #ffffff70}
.ambient-shape:after{inset:3px;border-top:1px solid rgb(var(--shape-rgb)/.12)}
.ambient-ribbon{--shape-rgb:184 83 67;--shape-angle:-31deg;width:350px;height:105px;left:calc(50% - 680px);top:18%;border-radius:90px}
.ambient-orbit{--shape-rgb:154 116 47;--shape-angle:16deg;width:385px;height:385px;right:calc(50% - 800px);top:48%;border:35px solid rgb(var(--shape-rgb)/.105);border-radius:50%;background:none;box-shadow:inset 0 1px 2px #ffffffb8,0 1px 1px #ffffffd9,0 20px 35px rgb(var(--shape-rgb)/.04)}
.ambient-orbit:before{inset:-35px;border:1px solid rgb(var(--shape-rgb)/.22)}
.ambient-orbit:after{inset:-22px;border:1px solid #ffffff80}
.ambient-capsule{--shape-rgb:82 127 141;--shape-angle:27deg;width:270px;height:100px;left:calc(50% - 720px);top:78%;border-radius:90px}
.ambient-loop{--shape-rgb:125 102 141;--shape-angle:35deg;width:240px;height:310px;right:calc(50% - 690px);top:5%;border:25px solid rgb(var(--shape-rgb)/.10);border-radius:115px;background:none;box-shadow:inset 1px 1px 2px #ffffffc7,0 1px 1px #ffffffd9,0 15px 32px rgb(var(--shape-rgb)/.04)}
.ambient-loop:before{inset:-25px;border:1px solid rgb(var(--shape-rgb)/.22)}
.ambient-loop:after{inset:-14px;border:1px solid #ffffff8c}
.controls-column{box-shadow:0 12px 32px #30384606,0 1px 1px #ffffff80}
.story-card{box-shadow:0 9px 24px #30384608,0 1px 1px #ffffff99}
html[data-theme=dark]{--paper:#222529}
html[data-theme=dark] body{background:#222529}
html[data-theme=dark] .site-header,html[data-theme=dark] .customizer-section,html[data-theme=dark] .little-world,html[data-theme=dark] .site-footer{background:transparent;background-image:none}
html[data-theme=dark] .site-header,html[data-theme=dark] .little-world{border-color:transparent}
html[data-theme=dark] .ambient-shape{background:linear-gradient(125deg,#ffffff09,rgb(var(--shape-rgb)/.09) 52%,rgb(var(--shape-rgb)/.18));border-color:rgb(var(--shape-rgb)/.28);box-shadow:inset 1px 2px 2px #ffffff16,inset -1px -2px 3px #00000010,0 18px 34px #0000000e}
html[data-theme=dark] .ambient-shape:before{border-color:#ffffff12}
html[data-theme=dark] .ambient-shape:after{border-color:rgb(var(--shape-rgb)/.18)}
html[data-theme=dark] .ambient-ribbon{--shape-rgb:238 154 131}
html[data-theme=dark] .ambient-orbit{--shape-rgb:227 196 126;background:none;border-color:rgb(var(--shape-rgb)/.09)}
html[data-theme=dark] .ambient-capsule{--shape-rgb:148 202 214}
html[data-theme=dark] .ambient-loop{--shape-rgb:196 174 223;background:none;border-color:rgb(var(--shape-rgb)/.09)}
html[data-theme=dark] .ambient-orbit:before,html[data-theme=dark] .ambient-loop:before{border-color:rgb(var(--shape-rgb)/.23)}
html[data-theme=dark] .controls-column{box-shadow:0 12px 32px #0000000d,0 1px 1px #ffffff05}
html[data-theme=dark] .story-card{box-shadow:0 9px 24px #00000014,0 1px 1px #ffffff05}
[data-reveal]{opacity:1;transform:none}
html.motion-ready [data-reveal]{transition:opacity .65s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.18,.75,.22,1) var(--reveal-delay,0ms)}
html.motion-ready [data-reveal]:not(.is-visible){opacity:0;transform:translate3d(0,24px,0)}
html.motion-ready [data-reveal=tilt]:not(.is-visible){transform:translate3d(0,28px,0) rotate(var(--reveal-tilt,2deg)) scale(.975)}
html.motion-ready [data-reveal].is-visible{opacity:1;transform:none}
@media(max-width:1100px){
 .ambient-ribbon{left:-115px;top:16%;width:300px;height:90px}
 .ambient-orbit{right:-170px;width:340px;height:340px;top:50%}
 .ambient-capsule{left:-110px;width:245px;top:79%}
 .ambient-loop{right:-110px;width:225px;height:280px;top:6%}
}
@media(max-width:700px){
 .ambient-ribbon{left:-80px;top:150px;width:230px;height:72px;--shape-angle:-33deg}
 .ambient-orbit{right:-140px;top:57%;width:270px;height:270px;border-width:26px}
 .ambient-orbit:before{inset:-26px}.ambient-orbit:after{inset:-16px}
 .ambient-capsule{left:-100px;top:83%;width:235px;height:79px;--shape-angle:28deg}
 .ambient-loop{right:-93px;top:92px;width:185px;height:220px;border-width:21px;--shape-angle:39deg}
 .ambient-loop:before{inset:-21px}.ambient-loop:after{inset:-12px}
}
@media(prefers-reduced-motion:reduce){
 .ambient-shape{transform:rotate(var(--shape-angle))!important;transition:none!important}
 html.motion-ready [data-reveal],html.motion-ready [data-reveal]:not(.is-visible),html.motion-ready [data-reveal=tilt]:not(.is-visible){opacity:1;transform:none;transition:none!important}
}

/* One approved green mascot and the same multicolor lettering at both ends. */
.brand-mascot{display:block;flex:none;line-height:0}
.footer-brand{display:inline-flex;direction:ltr;gap:6px}
.footer-brand .wordmark-main{gap:9px}
.footer-brand .brand-icon{width:60px;height:64px}
.footer-brand .wordmark-type{font-size:23px;letter-spacing:-1.2px}
.footer-brand .by-kabo,.footer-brand .by-kabo strong{font-size:8px}
@media(max-width:700px){.footer-brand .brand-icon{width:55px;height:59px}.footer-brand .wordmark-type{font-size:22px;letter-spacing:-1.1px}}

/* Latest brand: solid red lettering; static top mascot, animated footer above. */
:root{--brand-red:#c94046}
html[data-theme=dark]{--brand-red:#f27672}
#heading-product,html[data-theme=dark] #heading-product{color:var(--brand-red);background:none;-webkit-text-fill-color:currentColor}
.wordmark-type>.brand-letter:nth-child(n),html[data-theme=dark] .wordmark-type>.brand-letter:nth-child(n){
 color:var(--brand-red);background:none;-webkit-text-fill-color:currentColor;
}
.wordmark-type>.brand-spotted:after{display:none}
.footer-brand .wordmark-main{flex-direction:column;gap:8px}
.footer-brand .brand-icon{width:68px;height:72px}
@media(max-width:700px){.footer-brand .brand-icon{width:64px;height:68px}}
@media(forced-colors:active){.wordmark-type>.brand-letter{-webkit-text-fill-color:LinkText;background:none}#heading-product{-webkit-text-fill-color:currentColor}}

/* Compact designer credit and an accessible Instagram footer link. */
.wordmark,.footer-brand{gap:1px}
.wordmark-type{line-height:1.03}
.wordmark .by-kabo{align-items:baseline;gap:4px;line-height:1.05}
.wordmark .by-kabo strong{font-family:"Arial Rounded MT Bold",Arial,sans-serif;font-size:10px;line-height:1;font-weight:900;font-style:italic;letter-spacing:.7px;color:var(--brand-red)}
.footer-brand .by-kabo strong{font-size:11px}

.instagram-link{position:relative;isolation:isolate;display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;min-width:44px;padding:0;border:1px solid #ffffff85;border-radius:12px;background:#ffffff38;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #ffffffbd,0 4px 12px #343d4407;color:var(--brand-red);text-decoration:none}
.instagram-link svg{display:block;width:20px;height:20px;flex:none}
.instagram-link:focus-visible{outline:2px solid var(--brand-red);outline-offset:4px}
html[data-theme=dark] .instagram-link{background:#ffffff06;border-color:#f276723d;box-shadow:inset 0 1px 0 #ffffff12,0 4px 12px #0000000a}
@media(max-width:700px){.wordmark .by-kabo strong{font-size:9px}.footer-brand .by-kabo strong{font-size:10.5px}}
@media(max-width:360px){.wordmark .by-kabo strong{font-size:8.5px}.footer-brand .by-kabo strong{font-size:10px}}
@media(hover:hover){.instagram-link:hover{background:#c940460c;border-color:#c9404666}html[data-theme=dark] .instagram-link:hover{background:#f2767210;border-color:#f2767270}}
@media(prefers-reduced-motion:no-preference){.instagram-link{transition:transform .18s ease,background .2s ease,border-color .2s ease}.instagram-link:active{transform:scale(.98)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.instagram-link:hover{transform:translateY(-1px)}}

/* Header credit belongs directly to the lettering, beside the mascot. */
.site-header .wordmark{display:grid;grid-template-columns:43px max-content;grid-template-rows:24px 11px;column-gap:8px;row-gap:1px;min-height:46px;align-content:center;justify-content:start;justify-items:start}
.site-header .wordmark-main{display:contents}
.site-header .wordmark .brand-icon{grid-column:1;grid-row:1 / 3;align-self:center;justify-self:center;width:43px;height:46px}
.site-header .wordmark-type{grid-column:2;grid-row:1;align-self:end}
.site-header .wordmark .by-kabo{grid-column:2;grid-row:2;align-self:start;justify-self:center}
@media(max-width:700px){.site-header .wordmark{grid-template-columns:35px max-content;grid-template-rows:19px 10px;column-gap:5px;min-height:44px}.site-header .wordmark .brand-icon{width:35px;height:38px}}
@media(max-width:360px){.site-header .wordmark{grid-template-columns:32px max-content;grid-template-rows:17px 9px;column-gap:4px}.site-header .wordmark .brand-icon{width:32px;height:35px}}
/* Optional body/cap: a hollow slash is an absence choice, never a paint color. */
:root{--none-ink:#8a918e}
html[data-theme=dark]{--none-ink:#b6c0c3}
.palette[data-part=body]{grid-template-columns:repeat(3,minmax(0,1fr))}
.color-option.is-none{min-height:65px;min-width:44px}
.color-option.is-none .color-label{max-width:100%;white-space:normal;overflow-wrap:normal;line-height:1.25;text-wrap:balance}
.swatch-none,.part-dot.is-none,.summary-dot.is-none{
 --none-line:1px;
 background:linear-gradient(135deg,transparent calc(50% - var(--none-line)),var(--none-ink) calc(50% - var(--none-line)),var(--none-ink) calc(50% + var(--none-line)),transparent calc(50% + var(--none-line)));
 border:1px solid var(--none-ink);box-shadow:none;
}
.part-dot.is-none,.summary-dot.is-none{--none-line:.65px}
.color-option.is-none.is-selected .swatch:before,.color-option.is-none[aria-checked=true] .swatch:before{background:var(--none-ink)}
.part-tab.is-absent{border:1px dashed #8a918e70;color:#707b77}
html[data-theme=dark] .part-tab.is-absent{border-color:#b6c0c35e;color:#c4ccce}
.summary-item.is-none,html[data-theme=dark] .summary-item.is-none{color:var(--none-ink)}
.part-tab:disabled[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none!important;background:transparent;box-shadow:none}
.part-tab:disabled[aria-disabled="true"]:after{content:"";display:block;width:10px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Crect x='2' y='8' width='12' height='8' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M4.5 8V5a3.5 3.5 0 0 1 7 0v3' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Crect x='2' y='8' width='12' height='8' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M4.5 8V5a3.5 3.5 0 0 1 7 0v3' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:700px){.color-option.is-none{min-height:58px}.palette[data-part=body] .color-option.is-none .color-label{font-size:9px}}
@media(max-width:360px){.part-tab:disabled[aria-disabled="true"]{gap:5px}.part-tab:disabled[aria-disabled="true"]:after{width:9px;height:11px}}

/* Sunny rounded KABO lettering and one globe language button. */
:root{--kabo-yellow:#f1c943;--kabo-outline:#8c6c19}
html[data-theme=dark]{--kabo-yellow:#ffda60;--kabo-outline:#b8942c}
.wordmark .by-kabo{align-items:center}
.wordmark .by-kabo strong{display:inline-flex;align-items:center;font-style:normal;line-height:0;letter-spacing:0;color:var(--kabo-yellow)}
.kabo-logo{display:block;width:45px;height:14px;overflow:visible;flex:none}
.kabo-outline{stroke:var(--kabo-outline)}
.kabo-fill{stroke:var(--kabo-yellow)}
.footer-brand .kabo-logo{width:52px;height:16px}
.site-header .wordmark{grid-template-rows:24px 15px}
.language-toggle{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:1px solid #dcd6cb;border-radius:11px;background:#f2eee6;color:#5a6873;box-shadow:0 2px 3px #51432c05;backdrop-filter:none;-webkit-backdrop-filter:none}
#language-label{display:grid;place-items:center;width:20px;height:20px;line-height:1;transform:none}
.language-toggle .language-globe{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.language-toggle:hover{background:#eae5da}
html[data-theme=dark] .language-toggle{background:#30383e;border-color:#4a555e;color:#dce3e6;box-shadow:0 2px 3px #00000012}
html[data-theme=dark] .language-toggle:hover{background:#39434b}
@media(max-width:700px){.site-header .wordmark{grid-template-rows:19px 14px}.site-header .kabo-logo{width:42px;height:13px}}
@media(max-width:360px){.site-header .wordmark{grid-template-rows:17px 13px}.site-header .kabo-logo{width:39px;height:12px}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.language-toggle:hover #language-label{transform:none}}
@media(forced-colors:active){.kabo-outline,.kabo-fill{stroke:LinkText}}

/* Center the brand itself; Instagram stays 24px to its visual right. */
.footer-lockup{position:relative;display:inline-grid;grid-template-columns:max-content;align-items:end;max-width:100%;direction:ltr}
.footer-lockup .footer-brand{grid-column:1;grid-row:1}
.footer-lockup .instagram-link{position:absolute;left:calc(100% + 24px);bottom:0;grid-column:auto;grid-row:auto;align-self:auto}
.instagram-link:before{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;background:linear-gradient(130deg,#ffffffcf,#c7e7edb0 25%,#e5c8d886 49%,#ead69e9c 72%,#ffffffb0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
html[data-theme=dark] .instagram-link:before{opacity:.55}
@media(prefers-reduced-motion:no-preference){.instagram-link svg{transition:transform .2s ease}.instagram-link:active svg{transform:rotate(5deg) scale(.94)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.instagram-link:hover svg{transform:rotate(-8deg) scale(1.04)}}

/* The supplied group photo matches its neighbors; only empty vertical margins crop. */
.story-grid{align-items:start}
/* Phone cards reveal with opacity only, so swipes never gain a vertical range. */
@media(max-width:700px){html.motion-ready .story-grid .story-card[data-reveal]{transform:none;transition-property:opacity}}
.story-group .story-image img{object-fit:cover;object-position:50% 50%}
#world-title .gallery-product{color:var(--brand-red)}
@media(min-width:701px) and (max-width:1040px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1041px){.story-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Phone landscape: colors left, live mushroom right, in either language. */
@media(orientation:landscape) and (min-width:600px) and (max-width:1040px) and (max-height:600px){
 .studio-grid{display:grid;grid-template-columns:minmax(264px,1fr) minmax(0,1.1fr);gap:16px;align-items:start;direction:ltr}
 .studio-grid>.controls-column{grid-column:1;grid-row:1;width:100%;min-width:0}
 .studio-grid>.preview-column{grid-column:2;grid-row:1;width:100%;min-width:0;position:static;top:auto;align-self:start}
 .stage{height:clamp(245px,78svh,400px)}
}

/* Personal name before downloading, with an explicit unnamed Skip choice. */
.export-name-dialog{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:30px 24px 24px;border:1px solid #cbd6d7;border-radius:26px;background:#f7f8f6;color:#24493e;box-shadow:0 20px 80px #15252b30;backdrop-filter:blur(24px);font:inherit}
.export-name-dialog::backdrop{background:#14202766;backdrop-filter:blur(8px)}
.export-name-dialog form{position:relative}.export-name-dialog h2{font-size:27px;line-height:1.2;margin:0 0 18px;padding-inline-end:26px}.export-name-dialog label{font-size:15px}
.export-name-dialog input{display:block;width:100%;box-sizing:border-box;margin:12px 0 20px;padding:13px 15px;border:1px solid #b5c1c4;border-radius:14px;background:#ffffffa8;color:inherit;font:inherit;font-size:18px;min-height:52px}
.export-name-dialog input:focus{outline:none;border-color:#829395;box-shadow:none}.export-name-dialog input:focus-visible{outline:1px solid #829395;outline-offset:2px}
.export-name-close{position:absolute;inset-inline-end:-12px;top:-18px;width:44px;height:44px;border:0;background:transparent;color:inherit;font-size:28px;cursor:pointer}
.export-name-actions{display:flex;gap:10px}.export-name-actions .button{flex:1;min-height:48px;border-radius:14px;font:inherit;font-size:14px;cursor:pointer}
.export-name-save{background:#344b56;color:#fff}.export-name-save:disabled{opacity:.45;cursor:default}.export-name-skip{background:transparent;color:inherit;border:1px solid #b6c3c6}
html[data-theme=dark] .export-name-dialog{background:#2c3236;color:#eeeae2;border-color:#67757a}html[data-theme=dark] .export-name-dialog input{background:#ffffff0b;border-color:#67757a}html[data-theme=dark] .export-name-save{background:#d5e5eb;color:#25363f}

/* Local rounded English type; Arabic keeps the approved Tajawal family. */
@font-face{font-family:MushroomEnglish;src:url('./assets/nunito-variable.ttf') format('truetype');font-style:normal;font-weight:200 1000;font-display:swap}
html[lang=en]{--font:MushroomEnglish,Tajawal,Arial,sans-serif}
.color-label{font-family:var(--font);direction:inherit}
html[lang=ar] .color-label{direction:rtl}
html[lang=en] .intro h1,html[lang=en] .world-heading h2{letter-spacing:-.6px}
html[lang=en] .color-label{font-weight:600}
.export-name-dialog input::placeholder{color:#87918f;opacity:1}
html[data-theme=dark] .export-name-dialog input::placeholder{color:#aeb7b9}

/* Prepared PNG keeps a fresh user gesture for the iPhone Photos share action. */
.export-photo-dialog{position:relative;text-align:center}
.export-photo-dialog h2{padding-inline:24px;margin-bottom:14px}
.export-photo-dialog>.export-name-close{top:8px;inset-inline-end:8px}
.export-photo-dialog>img{display:block;max-width:100%;width:auto;height:auto;max-height:38dvh;margin:0 auto 14px;border-radius:16px;object-fit:contain;-webkit-touch-callout:default;user-select:auto}
.export-photo-hint{font-size:14px;line-height:1.6;margin:0 0 18px}
.export-photo-dialog .export-name-actions{flex-wrap:wrap}

/* Start on the first card in the selected language, including the first paint. */
.story-grid[dir=ltr]{direction:ltr}
.story-grid[dir=rtl]{direction:rtl}