/* site.css — shared chrome for the standalone coloring site (header, footer, cards) */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#FFFFFF;--panel:#FFFFFF;--border:#EFE7DB;
  --text:#4A3728;--text-light:#8B7355;
  --coral:#FF6B6B;--teal:#4ECDC4;--orange:#FFB347;--purple:#6C5CE7;
  --shadow:0 4px 20px rgba(74,55,40,0.08);--radius:16px;
  --rainbow:linear-gradient(135deg,#FF6B6B,#FFB347,#4ECDC4,#6C5CE7);
}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
h1,h2,h3{font-family:'Fredoka',sans-serif}

/* ── Header ── */
.site-header{background:var(--panel);border-bottom:1px solid var(--border);box-shadow:0 2px 12px rgba(74,55,40,0.05)}
.site-header-inner{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.site-logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.site-logo img{height:48px;width:auto;display:block}
.site-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.site-nav a{font-family:'Fredoka',sans-serif;font-weight:500;font-size:14px;color:var(--text-light);
  text-decoration:none;padding:8px 14px;border-radius:12px;transition:all 0.15s}
.site-nav a:hover{background:var(--bg);color:var(--text)}
.site-nav a.active{background:var(--bg);color:var(--coral)}
.site-nav a.nav-cta{background:var(--rainbow);color:white}
.site-nav a.nav-cta:hover{opacity:0.9}

/* ── Hero ── */
.hero{text-align:center;padding:56px 16px 40px;max-width:820px;margin:0 auto}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:14px;
  background:var(--rainbow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:18px;color:var(--text-light);margin-bottom:26px;line-height:1.5}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:14px;border:none;
  text-decoration:none;font-family:'Fredoka',sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:transform 0.15s, box-shadow 0.15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(74,55,40,0.15)}
.btn-coral{background:var(--coral);color:white}
.btn-teal{background:var(--teal);color:white}
.btn-orange{background:var(--orange);color:white}
.btn-outline{background:white;color:var(--text);border:2px solid var(--border)}

/* ── Sections / cards ── */
.section{max-width:1200px;margin:0 auto;padding:24px 16px}
.section-title{font-size:26px;font-weight:700;text-align:center;margin:8px 0 22px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.cat-card,.sheet-card{position:relative;background:white;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow);text-decoration:none;color:var(--text);
  display:block;transition:transform 0.2s, box-shadow 0.2s}
.cat-card:hover,.sheet-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(74,55,40,0.15)}
.cat-card img,.sheet-card img{width:100%;aspect-ratio:1;object-fit:contain;background:#FAFAFA;padding:8px}
.card-label{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;padding:10px 14px;text-align:center;line-height:1.3}
.card-count{font-size:12px;color:var(--text-light);font-family:'Nunito',sans-serif;font-weight:700;display:block}

/* feature strip */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feature{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 22px;text-align:center}
.feature .f-icon{font-size:40px;display:block;margin-bottom:10px}
.feature h3{font-size:18px;margin-bottom:8px}
.feature p{font-size:14px;color:var(--text-light);line-height:1.5;margin-bottom:14px}

/* category chip cloud */
.chip-cloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{font-family:'Fredoka',sans-serif;font-size:13px;font-weight:500;color:var(--text);
  background:white;border:1px solid var(--border);border-radius:999px;padding:7px 14px;text-decoration:none;transition:all 0.15s}
.chip:hover{border-color:var(--teal);color:var(--teal)}

/* page title bar (category / color pages) */
.page-titlebar{max-width:1200px;margin:0 auto;padding:22px 16px 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.page-titlebar h1{font-size:26px;font-weight:700;
  background:var(--rainbow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.site-breadcrumbs{width:100%;flex-basis:100%;margin:0 0 5px;font-size:12px;font-weight:800;color:#9A8876}
.site-breadcrumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:5px;list-style:none;margin:0;padding:0}
.site-breadcrumbs li{display:inline-flex;align-items:center;gap:5px;min-width:0}
.site-breadcrumbs li+li::before{content:"›";color:#D0BFAE;font-size:17px;font-weight:600;line-height:1}
.site-breadcrumbs a{color:#7B68D7;text-decoration:none;transition:color .15s ease}
.site-breadcrumbs a:hover{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.site-breadcrumbs span[aria-current="page"]{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9A8876}
.breadcrumb-bar{max-width:1200px;margin:0 auto;padding:12px 16px 0}
.breadcrumb-bar .site-breadcrumbs{margin:0}
.breadcrumb-bar+.page-titlebar{padding-top:9px}
.color-page-titlebar{max-width:1280px;padding:20px 16px 14px;align-items:center;gap:10px}
.color-page-titlebar h1{margin-right:auto;font-size:25px;color:#403442;background:none;
  -webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor}
.color-page-titlebar .crumb{padding:7px 10px;border-radius:999px;background:#F7F1EA;transition:background .15s,color .15s}
.color-page-titlebar .crumb:hover{background:#FFF0ED;text-decoration:none}
.color-page-titlebar>.btn{margin-left:0!important;border-radius:999px;box-shadow:0 4px 13px rgba(74,55,40,.1)}
.editor-savebar{max-width:1280px;width:100%;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.editor-savebar .site-breadcrumbs{width:auto;flex:1 1 auto;margin:0}
.editor-savebar .btn{padding:8px 19px;font-size:13px;border-radius:999px}.editor-save-state{display:inline-flex;align-items:center;gap:7px;color:#8A7969;font-size:11px;font-weight:700}
.editor-save-state i{width:8px;height:8px;border-radius:50%;background:#C5B8AB}.editor-save-state.is-saving i{border:2px solid #D7CDC3;border-top-color:#6C5CE7;background:transparent;animation:editorSaveSpin .7s linear infinite}
.editor-save-state.is-saved{color:#278463}.editor-save-state.is-saved i{background:#45B98A}.editor-save-state.is-pending{color:#9B7421}.editor-save-state.is-pending i{background:#E8B643}
.editor-save-state.is-error{color:#C25045}.editor-save-state.is-error i{background:#E16B61}.editor-save-state.is-readonly i{background:#9A8C80}@keyframes editorSaveSpin{to{transform:rotate(360deg)}}
@media(max-width:700px){.editor-savebar{padding:5px 9px}.editor-savebar .btn{padding:7px 16px}.editor-save-state{margin-right:auto}}
@media(max-width:700px){
  .color-page-titlebar{padding-top:14px}.color-page-titlebar h1{flex-basis:calc(100% - 90px);font-size:21px}
  .color-page-titlebar>.btn{font-size:12px!important;padding:8px 12px!important}
}

/* static content pages */
.content-page{max-width:760px;margin:0 auto;padding:36px 16px 48px;line-height:1.7}
.content-page h1{font-size:30px;margin-bottom:18px;
  background:var(--rainbow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.content-page h2{font-size:20px;margin:26px 0 8px}
.content-page p,.content-page li{font-size:15px;color:var(--text);margin-bottom:10px}
.content-page ul{padding-left:22px}

/* ── Individual category gallery ── */
.category-detail-page{position:relative;isolation:isolate;overflow:hidden;padding:0 18px 44px;
  background:radial-gradient(circle at 4% 16%,rgba(255,221,92,.09),transparent 24%),radial-gradient(circle at 97% 12%,rgba(93,211,255,.08),transparent 23%),radial-gradient(circle at 92% 90%,rgba(190,155,255,.07),transparent 27%),#fff}
.category-detail-page::before,.category-detail-page::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.category-detail-page::before{width:350px;height:350px;left:-210px;top:180px;background:rgba(255,112,146,.045)}
.category-detail-page::after{width:410px;height:410px;right:-245px;bottom:35px;background:rgba(78,205,196,.04)}
.category-detail-breadcrumb{max-width:1248px;padding:12px 12px 0}
.category-detail-hero{max-width:1248px;margin:0 auto 18px;padding:14px 12px 22px;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:24px}
.category-detail-icon{width:116px;height:116px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.9);border-radius:30px;background:linear-gradient(145deg,#FFE3B5,#FFD2DE 54%,#DCD4FF);
  box-shadow:0 10px 24px rgba(74,55,40,.14);transform:rotate(-3deg)}
.category-detail-icon img{width:112%;height:112%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(74,55,40,.12))}
.category-detail-icon.is-sheet{padding:10px;background:linear-gradient(145deg,#FFD9A5,#FFD1DF 52%,#D7D0FF)}
.category-detail-icon.is-sheet img{width:100%;height:100%;padding:5px;border:1px solid rgba(139,115,85,.18);border-radius:18px;background:#fff;filter:none}
.category-detail-icon span{font-family:'Fredoka',sans-serif;font-size:61px;font-weight:700;line-height:1;color:#fff;text-shadow:0 4px 0 rgba(108,92,231,.18)}
.category-detail-copy{max-width:900px;overflow:visible}
.category-detail-hero h1{display:inline-block;font-size:40px;line-height:1.18;margin:0;padding:0 .04em .13em 0;letter-spacing:-.6px;
  background:linear-gradient(100deg,#FF625F 0%,#F28A43 38%,#8B65E8 78%,#5E55D8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.category-sheet-panel{max-width:1248px;margin:0 auto;padding:25px;border:1px solid #FFDDE8;border-radius:25px;
  background:rgba(255,255,255,.91);box-shadow:0 14px 38px rgba(134,93,180,.11);backdrop-filter:blur(8px)}
.category-sheet-head{margin-bottom:19px;padding:0 2px}
.category-sheet-head h2{font-size:24px;color:#493C43}
.category-sheet-grid{grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px}
.category-sheet-card{border-color:#F0DDE5;border-radius:19px;box-shadow:0 5px 17px rgba(104,75,122,.09)}
.category-sheet-card:hover{transform:translateY(-5px);box-shadow:0 13px 28px rgba(74,55,40,.14)}
.category-sheet-preview{aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:9px;background:#FFE9A8;border-radius:18px 18px 13px 13px}
.category-sheet-card:nth-child(4n+2) .category-sheet-preview{background:#DDF8EF}.category-sheet-card:nth-child(4n+3) .category-sheet-preview{background:#E7E1FF}
.category-sheet-card:nth-child(4n+4) .category-sheet-preview{background:#FFE0E9}.category-sheet-card img{width:auto;height:100%;max-width:100%;aspect-ratio:1792/2400;object-fit:contain;
  padding:7px;border:1px solid #D7CCC0;border-radius:12px;background:#fff;box-shadow:0 5px 13px rgba(74,55,40,.15);
  transition:transform .24s cubic-bezier(.2,.8,.25,1),box-shadow .24s ease}
.category-sheet-card:hover img{transform:scale(1.045) rotate(-.6deg);box-shadow:0 8px 18px rgba(74,55,40,.2)}
.category-sheet-card:nth-child(even):hover img{transform:scale(1.045) rotate(.6deg)}.category-sheet-card .card-label{min-height:67px;padding:11px 13px 12px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:space-between;gap:6px;text-align:left}.category-sheet-card .card-label>span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.category-sheet-card .card-label small{color:#6C5CE7;font-family:'Nunito',sans-serif;font-size:10.5px;font-weight:800}.category-sheet-card .card-label b{font-size:16px;line-height:0;vertical-align:-1px}
@media(max-width:720px){
  .category-detail-page{padding:0 12px 32px}.category-detail-breadcrumb{padding:10px 5px 0}.category-detail-hero{padding:10px 5px 18px;grid-template-columns:auto minmax(0,1fr);gap:15px}.category-detail-hero h1{font-size:30px}
  .category-detail-icon{width:82px;height:82px;border-radius:22px}.category-detail-icon span{font-size:44px}
  .category-sheet-panel{padding:16px}.category-sheet-head h2{font-size:20px}
  .category-sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.category-sheet-card .card-label{min-height:64px;padding:9px 10px 10px;font-size:13px}
}
@media(max-width:450px){.category-detail-icon{width:72px;height:72px}.category-detail-hero{align-items:center}.category-detail-hero h1{font-size:27px}}

/* ── Footer ── */
.site-footer{background:var(--panel);border-top:1px solid var(--border);margin-top:36px}
.site-footer.site-footer-compact{margin-top:12px}
.site-footer-inner{max-width:1200px;margin:0 auto;padding:22px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:13px;color:var(--text-light)}
.site-footer-inner a{color:var(--text-light);text-decoration:none;font-weight:700}
.site-footer-inner a:hover{color:var(--coral)}
.footer-links{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}

@media(max-width:600px){
  .hero{padding:36px 16px 28px}
  .hero h1{font-size:30px}
  .hero p{font-size:15px}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card-label{font-size:12px;padding:8px 10px}
  .site-nav a{padding:7px 10px;font-size:13px}
}

/* ── Collaboration (rooms) ── */
.room-code{
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;letter-spacing:3px;
  background:white;border:2px dashed var(--orange);border-radius:10px;padding:6px 12px;color:var(--text)}
.collab-presence{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.collab-chip{display:inline-flex;align-items:center;gap:5px;background:white;border:1px solid var(--border);
  border-radius:999px;padding:5px 12px 5px 8px;font-size:13px;font-weight:700;box-shadow:var(--shadow)}
.collab-chip.me{border-color:var(--teal)}
.join-overlay{position:fixed;inset:0;background:rgba(74,55,40,0.45);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.join-box{background:white;border-radius:20px;padding:28px 26px;max-width:420px;width:100%;
  box-shadow:0 12px 48px rgba(0,0,0,0.25);text-align:center}
.join-box h2{font-size:22px;margin-bottom:6px;
  background:var(--rainbow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.join-box p{font-size:14px;color:var(--text-light);margin-bottom:14px}
.join-box input[type="text"]{width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:12px;
  font-family:'Nunito',sans-serif;font-size:16px;outline:none;margin-bottom:12px;text-align:center}
.join-box input[type="text"]:focus{border-color:var(--teal)}
.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:16px}
.avatar-opt{font-size:22px;padding:6px 2px;border:2px solid transparent;border-radius:10px;background:#FAF5EE;
  cursor:pointer;transition:all 0.12s;line-height:1}
.avatar-opt:hover{transform:scale(1.12)}
.avatar-opt.active{border-color:var(--coral);background:#FFF0F0}
.join-error{color:#c62828;font-size:13px;margin-top:10px;min-height:16px}
@media(max-width:600px){.avatar-grid{grid-template-columns:repeat(8,1fr)}.room-code{font-size:15px}}

/* ══════════════════ Homepage redesign (2026-07-09) ══════════════════ */
.btn-lg{padding:15px 30px;font-size:17px;border-radius:16px}
.btn-ghost{background:#fff;color:var(--text);border:2px solid #FBE3D0;box-shadow:0 3px 10px rgba(74,55,40,.06)}
.btn-ghost:hover{border-color:var(--coral);color:var(--coral)}

/* soft pastel icon tiles */
.t-blue{background:#E7F1FF}.t-orange{background:#FFEEDA}.t-green{background:#E3F7E8}
.t-purple{background:#EEE9FF}.t-pink{background:#FFE6F1}.t-yellow{background:#FFF6D6}.t-teal{background:#DEF7F4}

/* ── Hero ── */
.home-hero{max-width:1180px;margin:20px auto 8px;padding:44px 40px;border-radius:30px;
  background:linear-gradient(180deg,#FFF6E6 0%,#FFFBF3 70%);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.hero-copy h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:52px;line-height:1.05;
  letter-spacing:-1px;margin-bottom:16px;color:var(--text)}
.w-coral{color:#FF6B6B}.w-orange{color:#FF9F45}.w-purple{color:#6C5CE7}.w-teal{color:#34C5B8}.w-green{color:#33A64D}
.hero-sub{font-size:18px;color:var(--text-light);line-height:1.55;max-width:440px;margin-bottom:26px}
.hero-sub b{color:var(--coral)}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap}
.trust-row{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.trust-row li{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--text)}
.ti-ico{width:27px;height:27px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.ti-ico.green{background:#D9F3E0;color:#2F9E5B}.ti-ico.purple{background:#E7E0FF}.ti-ico.blue{background:#DCEBFF}

.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:330px}
.preview-card{position:relative;background:#fff;border-radius:24px;padding:16px;
  box-shadow:0 22px 50px rgba(74,55,40,.16);transform:rotate(-2.5deg);max-width:360px;width:100%}
.preview-card img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:16px;background:#F6FBFF;display:block}
.cbn-dots{position:absolute;top:24px;right:-16px;display:flex;flex-direction:column;gap:9px}
.cbn-dots span{width:34px;height:34px;border-radius:50%;color:#fff;font-family:'Fredoka',sans-serif;
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(74,55,40,.2);border:2px solid #fff}
.cbn-cursor{position:absolute;bottom:30px;left:50%;font-size:34px;transform:rotate(8deg);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.22))}
.deco{position:absolute;pointer-events:none}
.deco-pencils{top:-4px;right:8%;font-size:46px;transform:rotate(14deg)}
.deco-splat{width:64px;height:54px;left:4%;bottom:6%;background:#6C5CE7;opacity:.85;
  border-radius:60% 40% 55% 45%/55% 45% 60% 40%}
.deco-dot{width:14px;height:14px;border-radius:50%}
.deco-dot.d1{background:#FF6B6B;top:8%;left:1%}
.deco-dot.d2{background:#4ECDC4;bottom:16%;right:1%}
.deco-dot.d3{background:#F7C948;top:2%;right:24%}

/* ── Feature cards ── */
.feature-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fcard{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);
  padding:26px 20px;text-align:center;transition:transform .2s,box-shadow .2s}
.fcard:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(74,55,40,.12)}
.fcard-ico{width:64px;height:64px;border-radius:18px;display:inline-flex;align-items:center;
  justify-content:center;font-size:30px;margin-bottom:14px}
.fcard h3{font-size:17px;margin-bottom:6px}
.fcard p{font-size:13.5px;color:var(--text-light);line-height:1.5}

/* ── Category row (pastel picture cards) ── */
.cat-head{margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between}
.cat-head .section-title{text-align:left;margin:0}
.view-all{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:#4D96FF;text-decoration:none;white-space:nowrap}
.view-all:hover{text-decoration:underline}
.cat-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:17px}
.cat-tile{--cat-border:#F3C65B;--cat-panel:#FFF8E4;--cat-label:#FFE59A;
  aspect-ratio:1.12;border:1.5px solid var(--cat-border);border-radius:14px;overflow:visible;
  position:relative;z-index:0;isolation:isolate;
  display:flex;flex-direction:column;text-decoration:none;color:#241D1B;background:var(--cat-label);
  box-shadow:0 3px 8px rgba(74,55,40,.09);transition:transform .22s ease,box-shadow .22s ease}
.cat-tile:hover{transform:translateY(-7px);box-shadow:0 13px 24px rgba(74,55,40,.2);
  animation:cat-tile-bounce .44s cubic-bezier(.22,.8,.3,1) both;z-index:5}
.cat-tile:focus-visible{outline:3px solid #6C5CE7;outline-offset:3px}
@keyframes cat-tile-bounce{
  0%{transform:translateY(0)}
  45%{transform:translateY(-11px)}
  72%{transform:translateY(-5px)}
  100%{transform:translateY(-7px)}
}
.cat-thumb{width:100%;min-height:0;flex:1;border-radius:12px;overflow:visible;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;padding:0 3px;background:var(--cat-panel)}
.cat-thumb img{width:100%;height:100%;object-fit:contain;transform:scale(1.25);transform-origin:center 62%;
  position:relative;z-index:2;pointer-events:none;
  filter:drop-shadow(0 2px 1px rgba(74,55,40,.08)) saturate(1);
  transition:transform .32s cubic-bezier(.2,.8,.25,1),filter .24s ease;will-change:transform}
.cat-tile:hover .cat-thumb img{transform:translateY(-6px) scale(1.43) rotate(-2deg);
  filter:drop-shadow(0 6px 4px rgba(74,55,40,.18)) saturate(1.12)}
.cat-tile:nth-child(even):hover .cat-thumb img{transform:translateY(-6px) scale(1.43) rotate(2deg)}
.cat-tile:focus-visible .cat-thumb img{transform:translateY(-6px) scale(1.43)}
.cat-pill{width:100%;min-height:29px;text-align:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;
  color:#241D1B;padding:4px 6px 5px;line-height:1.05;display:flex;align-items:center;justify-content:center;
  background:var(--cat-label);border-radius:0 0 12px 12px;position:relative;z-index:3}
.cat-row-all{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* placeholder badge for categories that don't have custom artwork yet */
.cat-ph{width:78%;aspect-ratio:1;margin:auto;border-radius:24px;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:46px;line-height:1;color:#fff}
.cat-tile:nth-child(7n+1) .cat-ph{background:#FF8A8A}
.cat-tile:nth-child(7n+2) .cat-ph{background:#4ECDC4}
.cat-tile:nth-child(7n+3) .cat-ph{background:#6FA8FF}
.cat-tile:nth-child(7n+4) .cat-ph{background:#FF9FC7}
.cat-tile:nth-child(7n+5) .cat-ph{background:#FFB65C}
.cat-tile:nth-child(7n+6) .cat-ph{background:#9B8CF0}
.cat-tile:nth-child(7n+7) .cat-ph{background:#67C98A}
.cat-tile:nth-child(8n+1){--cat-border:#F4C44E;--cat-panel:#FFF7DE;--cat-label:#FFE394}
.cat-tile:nth-child(8n+2){--cat-border:#78D79D;--cat-panel:#E5F8EC;--cat-label:#C8F0D2}
.cat-tile:nth-child(8n+3){--cat-border:#F1A9C3;--cat-panel:#FDE8EF;--cat-label:#F9CFDD}
.cat-tile:nth-child(8n+4){--cat-border:#7CC8EF;--cat-panel:#E3F5FE;--cat-label:#BDE8FB}
.cat-tile:nth-child(8n+5){--cat-border:#9AD578;--cat-panel:#ECF9E7;--cat-label:#D6F0C5}
.cat-tile:nth-child(8n+6){--cat-border:#C4A4ED;--cat-panel:#F1E8FC;--cat-label:#E1D1F7}
.cat-tile:nth-child(8n+7){--cat-border:#F0D38A;--cat-panel:#FFF8E5;--cat-label:#FFEAB5}
.cat-tile:nth-child(8n+8){--cat-border:#85CFF0;--cat-panel:#E4F5FC;--cat-label:#C8ECFA}

/* ── How it works ── */
.how-steps{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.how-step{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);
  padding:24px 22px;text-align:center;flex:1 1 220px;max-width:280px}
.how-ico{width:60px;height:60px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:12px}
.how-step h3{font-size:16px;margin-bottom:6px}
.how-step p{font-size:13.5px;color:var(--text-light);line-height:1.5}
.how-arrow{font-size:26px;color:#D8C3A6;font-weight:700}

/* ── Share band ── */
.share-band{background:linear-gradient(120deg,#E7F1FF,#F0F6FF);border-radius:26px;padding:34px 38px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.share-text h2{font-family:'Fredoka',sans-serif;font-size:27px;margin-bottom:8px;color:var(--text)}
.share-text p{font-size:15px;color:var(--text-light);margin-bottom:18px;max-width:420px}
.share-deco{position:relative;width:190px;height:120px;flex:0 0 auto}
.sd-card{position:absolute;width:78px;height:96px;background:#fff;border-radius:12px;
  box-shadow:0 8px 20px rgba(74,55,40,.14);display:flex;align-items:center;justify-content:center;font-size:34px}
.sd-a{left:18px;top:16px;transform:rotate(-8deg)}
.sd-b{left:66px;top:8px;transform:rotate(8deg)}
.sd-cloud{position:absolute;right:2px;bottom:2px;font-size:42px}

/* ── Benefit strip ── */
.benefit-strip{max-width:1200px;margin:6px auto 0;padding:30px 16px 46px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.benefit{display:flex;align-items:flex-start;gap:12px}
.b-ico{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;flex:0 0 auto}
.b-ico.coral{background:#FFE6E6}.b-ico.green{background:#E3F7E8}.b-ico.orange{background:#FFF0DD}.b-ico.purple{background:#EEE9FF}
.benefit h4{font-family:'Fredoka',sans-serif;font-size:15px;margin-bottom:3px}
.benefit p{font-size:13px;color:var(--text-light);line-height:1.45}

/* ── Homepage responsive ── */
@media(max-width:960px){
  .feature-cards{grid-template-columns:repeat(2,1fr)}
  .cat-row{grid-template-columns:repeat(4,1fr)}
  .benefit-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .home-hero{grid-template-columns:1fr;text-align:center;padding:34px 22px}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta-row,.trust-row{justify-content:center}
  .hero-copy h1{font-size:40px}
  .hero-visual{min-height:300px;margin-top:10px}
  .how-arrow{transform:rotate(90deg)}
}
@media(max-width:560px){
  .hero-copy h1{font-size:33px}
  .cat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cat-head{flex-wrap:wrap;gap:4px}
  .share-band{padding:26px 22px}
}

/* ── Header: icon nav + Upload button (mockup) ── */
.site-header-inner{gap:14px}
.site-nav{flex:1;justify-content:center;gap:2px;margin-left:0;flex-wrap:nowrap}
.site-nav a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#2E2A46;
  padding:7px 9px;border-radius:12px;position:relative;white-space:nowrap}
.site-nav a:hover{background:#FBF3E8;color:#2E2A46}
.nav-ico{width:20px;height:20px;object-fit:contain;display:block}
.site-nav a.active{color:#FF6B6B;background:transparent}
.site-nav a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-3px;height:3px;border-radius:3px;background:#FFB347}
.nav-upload{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  background:linear-gradient(135deg,#8B7BF0,#6C5CE7);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;
  padding:11px 22px;border-radius:999px;text-decoration:none;box-shadow:0 6px 16px rgba(108,92,231,.32);
  transition:transform .15s,box-shadow .15s}
.nav-upload:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(108,92,231,.4);color:#fff}

/* Primary actions: animated color, shine and playful icon movement */
.nav-upload,.hero-cta{--action-glow:rgba(108,92,231,.34);position:relative;overflow:hidden;isolation:isolate;
  background-size:220% 220%;background-position:0 50%;color:#fff;
  animation:action-gradient 5s ease-in-out infinite,action-glow 2.8s ease-in-out infinite;
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s ease,filter .22s ease}
.nav-upload{background-image:linear-gradient(120deg,#7B68EE,#A45EE8,#5D8BF4,#7B68EE)}
.hero-cta{--action-glow:rgba(255,107,107,.36);
  background-image:linear-gradient(120deg,#FF5F6D,#FF8C42,#FFC83D,#FF6B6B);text-shadow:0 1px 1px rgba(116,48,30,.18);
  box-shadow:0 7px 18px var(--action-glow)}
.nav-upload::before,.hero-cta::before{content:"";position:absolute;z-index:2;pointer-events:none;
  top:-35%;bottom:-35%;left:-42%;width:30%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);opacity:.7}
.nav-upload::after,.hero-cta::after{content:"✦";position:absolute;z-index:2;pointer-events:none;
  top:3px;right:9px;color:rgba(255,255,255,.9);font-size:10px;line-height:1;
  animation:action-sparkle 1.8s ease-in-out infinite}
.nav-upload:hover,.hero-cta:hover{animation:action-gradient 1.8s ease-in-out infinite;
  transform:translateY(-4px) scale(1.045);filter:saturate(1.12) brightness(1.04);
  box-shadow:0 13px 27px var(--action-glow);color:#fff}
.nav-upload:hover::before,.hero-cta:hover::before{animation:action-shine .65s ease-out}
.nav-upload svg,.hero-cta>span{position:relative;z-index:3;display:inline-block;transform-origin:center;
  filter:drop-shadow(0 2px 2px rgba(72,38,25,.18))}
.nav-upload:hover svg{animation:action-icon-upload .55s cubic-bezier(.2,.85,.3,1)}
.hero-cta:hover>span{animation:action-icon-palette .55s cubic-bezier(.2,.85,.3,1)}
.nav-upload:active,.hero-cta:active{transform:translateY(-1px) scale(.98);box-shadow:0 5px 12px var(--action-glow)}
.nav-upload:focus-visible,.hero-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes action-gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes action-glow{0%,100%{box-shadow:0 7px 18px var(--action-glow)}50%{box-shadow:0 9px 24px var(--action-glow)}}
@keyframes action-shine{0%{left:-42%}100%{left:125%}}
@keyframes action-sparkle{0%,100%{opacity:.35;transform:scale(.75) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(22deg)}}
@keyframes action-icon-upload{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px) scale(1.14)}70%{transform:translateY(1px) scale(.96)}}
@keyframes action-icon-palette{0%,100%{transform:rotate(0) scale(1)}45%{transform:rotate(-14deg) scale(1.22)}72%{transform:rotate(7deg) scale(1.08)}}

/* ── Hero: instructions (left) + coloring scene (right) ── */
.hero-banner{background:#FEF1D8;width:100%;overflow:hidden}
.hero-scene{position:relative;max-width:1150px;margin:0 auto;padding:15px 22px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:26px;align-items:center}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
.hero-copy h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:34px;line-height:1.04;
  letter-spacing:-.5px;margin-bottom:12px;color:var(--text);white-space:nowrap}
.hero-sub{font-size:17px;color:var(--text-light);font-weight:700;margin-bottom:18px}
.hero-steps{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.hero-steps li{display:flex;align-items:center;gap:13px}
.hs-ico{width:48px;height:48px;border-radius:15px;display:inline-flex;align-items:center;
  justify-content:center;font-size:23px;flex:0 0 auto}
.hero-steps b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;color:var(--text);display:block;line-height:1.2}
.hero-steps small{font-size:13px;color:var(--text-light);line-height:1.3}

.hero-art{position:relative;z-index:1;height:clamp(300px,36vh,380px)}
.hero-art img{position:absolute;display:block}
.hero-cta{border-radius:999px;align-self:flex-end}
.h-bg{position:absolute;z-index:0;pointer-events:none;background:url('/app/img/paint_splotch.svg') center/contain no-repeat;
  opacity:.24;filter:none}
.h-bg::before,.h-bg::after{display:none}
.h-bg-1{width:390px;height:295px;top:-145px;left:-155px;transform:rotate(11deg);opacity:.31}
.h-bg-2{width:330px;height:250px;bottom:-145px;left:3%;transform:rotate(-17deg) scaleX(-1);opacity:.27}
.h-bg-3{width:500px;height:365px;top:-175px;right:-180px;transform:rotate(8deg);opacity:.28}
.h-bg-4{width:285px;height:215px;top:23%;left:34%;transform:rotate(-13deg) scaleX(-1);opacity:.2}
.h-bg-5{width:380px;height:285px;right:1%;bottom:-170px;transform:rotate(16deg);opacity:.25}
.h-bg-6{width:275px;height:205px;top:-105px;left:43%;transform:rotate(25deg) scaleX(-1);opacity:.23}
.h-card{height:90%;top:49%;left:41%;transform:translate(-50%,-50%) rotate(-7deg);
  filter:drop-shadow(0 12px 20px rgba(74,55,40,.18));z-index:3}
.h-pencils{height:50%;top:52%;left:71%;transform:translateY(-50%);z-index:4}
.h-crayon{height:44%;top:68%;left:83%;transform:translateY(-50%) rotate(13deg);z-index:4}
.h-blob{height:118%;top:50%;left:46%;transform:translate(-50%,-50%);z-index:0}
.h-squiggle{height:15%;top:4%;left:8%;z-index:1}
.h-squiggle2{height:12%;bottom:4%;right:8%;z-index:1;transform:rotate(196deg)}
.h-dot-y{height:7%;top:14%;right:20%;z-index:1}
.cat-section{max-width:1340px;padding:30px 16px 24px}
.home-ad-slot{max-width:970px;height:96px;margin:8px auto 0;padding:9px 12px;position:relative;
  display:flex;align-items:center;justify-content:center;border:2px dashed #D8CFC4;border-radius:16px;
  background:repeating-linear-gradient(135deg,#FBF8F4,#FBF8F4 12px,#F7F2EC 12px,#F7F2EC 24px);color:#9A8978}
.home-ad-slot>span{position:absolute;top:6px;left:10px;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#AD9E90}
.home-ad-slot>div{text-align:center}.home-ad-slot strong,.home-ad-slot small{display:block}.home-ad-slot strong{font-family:'Fredoka',sans-serif;font-size:14px;color:#7D6C5D}
.home-ad-slot small{font-size:10px;margin-top:2px}

@media(max-width:820px){
  .hero-scene{grid-template-columns:1fr;gap:8px;padding:15px 18px;text-align:center}
  .hero-copy h1{font-size:30px;white-space:normal}
  .hero-steps{display:inline-flex;text-align:left;margin:0 auto 18px}
  .hero-art{height:clamp(240px,32vh,300px)}
  .h-bg-2,.h-bg-4,.h-bg-6,.h-squiggle2,.h-dot-y{display:none}
}
@media(max-width:1024px){.home-ad-slot{margin:8px 16px 0;height:88px}}
@media(max-width:520px){
  .hero-copy h1{font-size:31px}
  .h-crayon{display:none}
  .h-card{left:40%}.h-pencils{left:74%}
}

@media(max-width:980px){
  .site-nav{order:3;flex-basis:100%;justify-content:center;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .site-nav a{white-space:nowrap}
  .nav-upload{margin-left:auto}
}

/* Coloring page (color.php) — immersive mobile: keep only the brand logo + ad.
   Nav, the "Use Your Own" CTA, and the whole page titlebar are stripped so the
   coloring workspace gets the screen. Desktop is unchanged. */
@media(max-width:1024px){
  body.coloring-focus .site-nav,
  body.coloring-focus .nav-upload{display:none!important}
  body.coloring-focus .site-header-inner{padding:8px 16px}
  body.coloring-focus .site-logo img{height:38px}
  body.coloring-focus .page-titlebar{display:none!important}
}

/* ══════════════════ Upload page ══════════════════ */
.upload-shell{max-width:1180px;width:100%;margin:0 auto;padding:28px 18px 54px}
.upload-shell>.site-breadcrumbs{margin-bottom:12px;padding:0 2px}
.upload-intro{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;
  align-items:center;padding:34px 38px;border:1px solid #F5DFC6;border-radius:26px;
  background:linear-gradient(130deg,#FFF9EF 0%,#FFF3E4 54%,#F2F0FF 100%);box-shadow:0 10px 35px rgba(74,55,40,.07)}
.upload-intro::before,.upload-intro::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.upload-intro::before{width:170px;height:170px;right:25%;top:-105px;background:rgba(255,179,71,.14)}
.upload-intro::after{width:110px;height:110px;left:42%;bottom:-72px;background:rgba(108,92,231,.1)}
.upload-intro-copy{position:relative;z-index:1;max-width:690px}
.upload-eyebrow,.upload-kicker{display:block;font-family:'Fredoka',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#EF735B}
.upload-intro h1{font-size:38px;line-height:1.08;color:#3C3041;margin:7px 0 10px;letter-spacing:-.5px}
.upload-intro-copy p{max-width:650px;color:var(--text-light);font-size:16px;line-height:1.6}
.upload-privacy{position:relative;z-index:1;width:270px;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:15px 16px;border:1px solid rgba(78,205,196,.34);border-radius:17px;background:rgba(255,255,255,.78);
  color:var(--text);text-decoration:none;box-shadow:0 5px 18px rgba(74,55,40,.06);transition:transform .18s,box-shadow .18s}
.upload-privacy:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(74,55,40,.11)}
.upload-privacy-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#DFF7F2;font-size:19px}
.upload-privacy strong{display:block;font-family:'Fredoka',sans-serif;font-size:14px;margin-bottom:2px}
.upload-privacy small{display:block;color:var(--text-light);font-size:11.5px;line-height:1.35}

.upload-steps{max-width:760px;margin:26px auto;display:flex;align-items:center;justify-content:center;list-style:none}
.upload-step{display:flex;align-items:center;gap:9px;color:#A39485;white-space:nowrap}
.upload-step>span{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#F3EDE6;border:2px solid #E9DED1;font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;transition:all .2s}
.upload-step strong,.upload-step small{display:block}.upload-step strong{font-family:'Fredoka',sans-serif;font-size:14px;color:inherit}
.upload-step small{font-size:11px;margin-top:1px}.upload-step-line{width:72px;height:3px;margin:0 17px;border-radius:3px;background:#EDE5DC;transition:background .2s}
.upload-step.is-active{color:#6C5CE7}.upload-step.is-active>span{color:#fff;border-color:#6C5CE7;background:#6C5CE7;box-shadow:0 4px 12px rgba(108,92,231,.3)}
.upload-step.is-complete{color:#279F75}.upload-step.is-complete>span{font-size:0;color:#fff;border-color:#4ECDC4;background:#4ECDC4}
.upload-step.is-complete>span::after{content:"✓";font-size:15px}.upload-step-line.is-complete{background:#73D8CF}

.upload-drop{min-height:310px;position:relative;display:grid;grid-template-columns:260px minmax(0,520px);gap:45px;align-items:center;justify-content:center;
  padding:38px;border:3px dashed #BFB2E9;border-radius:26px;background:linear-gradient(145deg,#FBFAFF,#F6F3FF);
  cursor:pointer;box-shadow:inset 0 0 0 5px rgba(255,255,255,.68),0 10px 30px rgba(74,55,40,.06);
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.upload-drop:hover,.upload-drop:focus-visible,.upload-drop.is-dragging{border-color:#7C69E8;background:linear-gradient(145deg,#FAF8FF,#EFEBFF);
  transform:translateY(-3px);box-shadow:inset 0 0 0 5px rgba(255,255,255,.75),0 15px 34px rgba(108,92,231,.13);outline:none}
.upload-drop-art{height:205px;position:relative}
.upload-paper{position:absolute;left:50%;top:50%;width:142px;height:178px;border-radius:14px;border:1px solid #E4DBD1;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(74,55,40,.13)}
.upload-paper-back{transform:translate(-59%,-51%) rotate(-9deg);background:#FFE8C7;border-color:#F4C985}
.upload-paper-front{transform:translate(-42%,-50%) rotate(5deg);font-size:52px;background:linear-gradient(#fff,#FFFCF7)}
.upload-arrow{position:absolute;right:12px;bottom:4px;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#8C7AF1,#6C5CE7);border:4px solid #F7F4FF;color:#fff;font-size:26px;font-weight:700;
  box-shadow:0 8px 18px rgba(108,92,231,.3);transition:transform .25s}
.upload-drop:hover .upload-arrow,.upload-drop.is-dragging .upload-arrow{transform:translateY(-7px) scale(1.07)}
.upload-drop-copy h2{font-size:29px;color:#3F3444;margin:6px 0 8px}.upload-drop-copy p{font-size:15px;line-height:1.55;color:var(--text-light);margin-bottom:17px}
.upload-choose{display:inline-flex;padding:11px 20px;border-radius:999px;background:linear-gradient(135deg,#7C69E8,#6C5CE7);color:#fff;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;box-shadow:0 6px 15px rgba(108,92,231,.25)}
.upload-drop-copy>small{display:block;color:#998977;font-size:12px;margin-top:10px}

.upload-workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(315px,.75fr);gap:20px;align-items:start}
.upload-preview-card,.upload-settings-card,.upload-done{border:1px solid #EBE1D6;border-radius:23px;background:#fff;box-shadow:0 8px 28px rgba(74,55,40,.08)}
.upload-preview-card{padding:22px;min-width:0}.upload-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.upload-card-head h2,.upload-settings-card h2{font-size:21px;color:#403442;margin:4px 0}.upload-card-head p,.upload-settings-lead{font-size:12.5px;color:var(--text-light);line-height:1.45}
.upload-change-btn{flex:0 0 auto;border:1px solid #DED2C4;border-radius:999px;background:#FAF7F3;color:#6F5C4B;padding:8px 12px;
  font-family:'Nunito',sans-serif;font-weight:700;font-size:12px;cursor:pointer;transition:all .16s}
.upload-change-btn:hover{border-color:#FF8A7A;background:#FFF1EF;color:#D95E50;transform:translateY(-1px)}
.upload-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.upload-preview-pane{min-width:0;padding:10px;border:1px solid #EDE5DC;border-radius:16px;background:#FAF8F5}
.upload-preview-pane.is-result{border-color:#BDE9E3;background:#F3FCFA}
.upload-preview-pane figcaption{display:flex;align-items:center;gap:7px;padding:0 2px 8px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:12px;color:#6B5A4C}
.preview-dot{width:8px;height:8px;border-radius:50%;background:#FFB347}.preview-dot.result{background:#4ECDC4}
.upload-canvas-wrap{height:clamp(260px,39vw,475px);padding:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px rgba(74,55,40,.06)}
.upload-canvas-wrap canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;background:#fff}

.upload-settings-card{position:sticky;top:18px;padding:23px}.upload-settings-lead{margin-bottom:14px}
.upload-mode-list{display:grid;gap:9px}.upload-mode{position:relative;display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;
  padding:12px;border:2px solid #ECE4DB;border-radius:14px;background:#FCFAF8;cursor:pointer;transition:border-color .16s,background .16s,transform .16s}
.upload-mode:hover{transform:translateY(-1px);border-color:#CFC3F3}.upload-mode:has(input:checked){border-color:#8E7BEF;background:#F5F2FF;box-shadow:0 4px 12px rgba(108,92,231,.1)}
.upload-mode input{width:17px;height:17px;accent-color:#6C5CE7}.upload-mode-icon{width:34px;height:34px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.upload-mode strong,.upload-mode small{display:block}.upload-mode strong{font-family:'Fredoka',sans-serif;font-size:13px;color:#493D42}.upload-mode small{color:var(--text-light);font-size:11px;margin-top:2px;line-height:1.3}
.upload-auto-note{min-height:18px;margin:10px 1px;color:#279F8E;font-size:11.5px;font-weight:700;line-height:1.4}
.upload-cleanup-controls{padding:14px;margin:11px 0 15px;border-radius:14px;background:#FFF8ED;border:1px solid #F4E3C8}
.upload-field-label{display:flex;justify-content:space-between;align-items:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;color:#54463C}
.upload-field-label small{font-family:'Nunito',sans-serif;color:#A18E7A;font-size:10.5px}.upload-cleanup-controls>input[type="range"]{width:100%;margin:11px 0 1px;accent-color:#FF786B}
.upload-range-labels{display:flex;justify-content:space-between;color:#A08E7D;font-size:9.5px}
.upload-check{display:flex;align-items:center;gap:9px;margin-top:13px;cursor:pointer}.upload-check input{width:18px;height:18px;accent-color:#FF6B6B;flex:none}
.upload-check strong,.upload-check small{display:block}.upload-check strong{font-size:12px;color:#57493E}.upload-check small{font-size:10.5px;color:var(--text-light);margin-top:1px}
.upload-title-field{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;color:#54463C}
.upload-title-field input,.upload-link-row input{width:100%;margin-top:6px;padding:11px 12px;border:2px solid #E9DFD4;border-radius:11px;background:#fff;
  color:var(--text);font-family:'Nunito',sans-serif;font-size:14px;outline:none;transition:border-color .16s,box-shadow .16s}
.upload-title-field input:focus,.upload-link-row input:focus{border-color:#8D7AEF;box-shadow:0 0 0 3px rgba(108,92,231,.1)}
.upload-create-btn{width:100%;justify-content:center;margin-top:16px;color:#fff;background:linear-gradient(135deg,#FF6B6B,#FF9A52);
  box-shadow:0 7px 18px rgba(255,107,107,.25)}
.upload-create-btn:hover{box-shadow:0 11px 24px rgba(255,107,107,.34)}.upload-create-btn:disabled{opacity:.58;cursor:wait;transform:none}
.upload-status{min-height:19px;margin-top:9px;color:#B45B4F;font-size:12px;font-weight:700;text-align:center}

.upload-done{display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:30px;align-items:center;padding:28px;background:linear-gradient(135deg,#F4FFFC,#FFFDF8)}
.upload-done-preview{height:270px;padding:14px;border-radius:18px;background:#fff;border:1px solid #DDEBE7;box-shadow:0 8px 22px rgba(74,55,40,.09)}
.upload-done-preview img{width:100%;height:100%;object-fit:contain}.upload-success-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#DDF7EC;color:#23835E;
  font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600}.upload-done-copy h2{font-size:29px;color:#3D3541;margin:9px 0 7px}
.upload-done-copy>p{color:var(--text-light);font-size:14px;margin-bottom:15px}.upload-link-row{display:flex;gap:8px;align-items:stretch;margin-bottom:13px}
.upload-link-row input{margin:0;min-width:0;color:#76685B;font-size:12px}.upload-link-row .btn{padding:10px 16px;white-space:nowrap}
.upload-done-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:10px}.upload-done-actions .btn{padding:11px 17px;font-size:14px}
.upload-done-copy>small{display:block;color:var(--text-light);font-size:11px;line-height:1.45}

.upload-library{margin-top:40px;padding-top:30px;border-top:1px solid #EFE5DA}.upload-library-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:17px}
.upload-library-head h2{font-size:25px;color:#403442;margin-top:4px}.upload-library-head>p{padding:7px 11px;border-radius:999px;background:#F3EFEA;color:#8A7766;font-size:11px;font-weight:700}
.upload-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.upload-library-card{min-width:0;overflow:hidden;border:1px solid #EAE0D5;border-radius:18px;background:#fff;box-shadow:0 5px 17px rgba(74,55,40,.07);
  transition:transform .18s,box-shadow .18s}.upload-library-card:hover{transform:translateY(-4px);box-shadow:0 11px 25px rgba(74,55,40,.12)}
.upload-library-preview{height:180px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(145deg,#F8F7FF,#FFF9F1)}
.upload-library-preview img{position:relative;z-index:1;width:100%;height:100%;padding:10px;object-fit:contain;transition:transform .25s}
.upload-library-card:hover .upload-library-preview img{transform:scale(1.045)}.upload-library-placeholder{position:absolute;font-size:38px;opacity:.35}
.upload-library-body{padding:12px 13px 8px}.upload-library-body h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:#493D42}
.upload-library-body p{font-size:10.5px;color:#9A8978;margin-top:3px}.upload-library-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:5px 12px 12px}
.upload-library-actions a{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:10px;text-decoration:none;font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600;transition:transform .15s,filter .15s}
.upload-library-actions a:hover{transform:translateY(-1px);filter:saturate(1.12)}.upload-library-color{background:#FFE8E3;color:#C85749}.upload-library-edit{background:#E7F7F4;color:#258778}
.upload-library-note{text-align:center;color:var(--text-light);font-size:11px;margin-top:14px;line-height:1.45}

@media(max-width:940px){
  .upload-workspace{grid-template-columns:1fr}.upload-settings-card{position:static}.upload-canvas-wrap{height:clamp(250px,52vw,430px)}
}
@media(max-width:760px){
  .upload-shell{padding:18px 13px 40px}.upload-intro{grid-template-columns:1fr;padding:25px 22px;gap:20px}.upload-intro h1{font-size:31px}.upload-privacy{width:100%;max-width:360px}
  .upload-step small{display:none}.upload-step-line{width:38px;margin:0 8px}.upload-drop{grid-template-columns:1fr;gap:13px;text-align:center;padding:28px 20px}.upload-drop-art{height:170px}.upload-drop-copy p{max-width:520px;margin-left:auto;margin-right:auto}
  .upload-done{grid-template-columns:1fr}.upload-done-preview{height:250px}.upload-done-copy{text-align:center}.upload-done-actions{justify-content:center}
}
@media(max-width:560px){
  .upload-intro h1{font-size:27px}.upload-intro-copy p{font-size:14px}.upload-steps{margin:20px auto}.upload-step{gap:0}.upload-step>div{display:none}.upload-step-line{flex:1;max-width:58px}
  .upload-preview-grid{grid-template-columns:1fr}.upload-canvas-wrap{height:330px}.upload-card-head{align-items:center}.upload-card-head h2{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .upload-link-row{flex-direction:column}.upload-link-row .btn{justify-content:center}.upload-done-actions{flex-direction:column}.upload-done-actions .btn{justify-content:center}
  .upload-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.upload-library-preview{height:145px}.upload-library-actions{grid-template-columns:1fr;padding:4px 9px 10px}.upload-library-body{padding:10px 10px 6px}
}
@media(max-width:390px){.upload-library-grid{grid-template-columns:1fr}.upload-library-preview{height:190px}}