/* Codeshed design layer. The original generator remains in codeshed-test-build.html. */
:root {
  --paper:#F8F7F3; --panel:#FFFFFF; --ink:#292C28; --muted:#6C7068;
  --line:#E5E5DD; --soft:#F1F1EA; --peg:#E5E3D9; --accent:#D9822B;
  --on-accent:#292C28; --orange-text:#98501D; --orange-soft:#FBEAD8;
  --rail:#F0F0E9; --body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Karla",system-ui,sans-serif; --rail-width:212px;
  --good:#24694F; --good-bg:#EDF5ED;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --paper:#1C1F23; --panel:#25292C; --ink:#F3EEE4; --muted:#B5B9B2;
  --line:#3C4241; --soft:#303634; --peg:#424744; --accent:#E0913F;
  --on-accent:#20231F; --orange-text:#F3BA79; --orange-soft:#443322;
  --rail:#202522; --good:#B4DDC3; --good-bg:#273B30;
  color-scheme:dark;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper:#1C1F23; --panel:#25292C; --ink:#F3EEE4; --muted:#B5B9B2;
    --line:#3C4241; --soft:#303634; --peg:#424744; --accent:#E0913F;
    --on-accent:#20231F; --orange-text:#F3BA79; --orange-soft:#443322;
    --rail:#202522; --good:#B4DDC3; --good-bg:#273B30; color-scheme:dark;
  }
}
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { padding-left:var(--rail-width); font-size:15px; line-height:1.5; overflow-x:clip; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { transition:background .16s,border-color .16s,box-shadow .16s,transform .16s; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--orange-text); outline-offset:4px; }
.step-h:focus,.studio-intro:focus,.template-section:focus,.guide:focus,.promise-strip:focus { outline:none; }
.icon-library { position:absolute;width:0;height:0;overflow:hidden; }
.ui-icon { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none; }
.skip-link { position:fixed;top:-80px;left:240px;padding:12px 20px;background:var(--ink);color:var(--paper);z-index:100;border-radius:8px; }
.skip-link:focus { top:12px; }
.top { max-width:1320px;min-height:88px;padding:16px 36px;margin:0 auto;flex-wrap:nowrap;border-bottom:1px solid var(--line);gap:16px; }
.wordmark { position:fixed;top:29px;left:25px;z-index:42;font-family:"Fredoka",system-ui,sans-serif;font-size:31px;letter-spacing:-1px;gap:1px; }
.wordmark svg { width:21px;height:21px;margin-top:4px; }
.tagline { display:flex;align-items:center;gap:16px;font-size:12px;white-space:nowrap; }
.tagline > span:first-child { font-size:10px;letter-spacing:1.5px;font-weight:700; }
.tagline b { font-size:14px;color:var(--ink);font-weight:500; }
.header-divider { color:var(--line);font-size:22px;font-weight:400; }
.private-badge { margin-left:auto;display:flex;gap:7px;align-items:center;font-size:12px;color:var(--muted);white-space:nowrap; }
.private-badge svg { width:14px;height:14px; }
.langpick { margin-left:4px; }
.langpick select { background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;font-size:13px;min-height:40px;padding:6px 12px;font-weight:500;max-width:128px; }
.icon-button { width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);background:transparent;border-radius:50%;cursor:pointer;flex:none; }
.icon-button:hover { background:var(--soft); }
/* Hidden until the language suggestion is wired up; it never floats over the studio. */
.language-suggestion { display:flex;align-items:center;gap:10px;max-width:1248px;width:calc(100% - 72px);margin:16px auto 0;padding:6px 8px 6px 14px;border:1px solid var(--line);border-radius:10px;background:var(--orange-soft);color:var(--ink); }
.language-suggestion[hidden] { display:none; }
.language-suggestion-icon { width:18px;height:18px;color:var(--orange-text); }
.language-suggestion p { flex:1;min-width:0;margin:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere; }
.language-suggestion-switch { display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:var(--orange-text);font:700 13px var(--body);cursor:pointer; }
.language-suggestion-switch:hover { background:var(--panel); }
.language-suggestion-switch .ui-icon { width:16px;height:16px; }
.language-suggestion-dismiss { width:44px;height:44px;border:0;border-radius:6px;color:var(--muted); }
.language-suggestion-dismiss:hover { background:var(--panel);color:var(--ink); }
.mobile-menu { display:none; }
.side-rail { position:fixed;inset:0 auto 0 0;width:var(--rail-width);padding:112px 17px 22px;background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40;overflow-y:auto; }
.rail-label { font-size:10px;letter-spacing:1.5px;font-weight:700;color:var(--muted);margin:0 12px 14px; }
.rail-nav { display:grid;gap:6px; }
.rail-link { display:flex;gap:11px;align-items:center;min-height:46px;border-radius:9px;padding:10px 12px;color:var(--muted);font-size:14px;text-decoration:none;font-weight:500; }
.rail-link:hover { color:var(--ink);background:var(--panel); }
.rail-link.active { background:var(--orange-soft);color:var(--orange-text);font-weight:700; }
.rail-link .ui-icon { width:18px;height:18px; }
.rail-plus { font-size:22px;font-weight:400;margin-left:auto; }
.rail-count { margin-left:auto;border:1px solid var(--line);padding:0 5px;border-radius:4px;font-size:11px; }
.rail-note { margin-top:auto;padding:24px 13px 20px; }
.mini-brand { width:33px;height:33px;border:5px solid var(--ink);border-radius:9px;display:grid;place-items:center;transform:rotate(-8deg);margin-bottom:16px; }
.mini-brand i { width:11px;height:11px;background:var(--accent);border-radius:2px; }
.rail-note h2,.rail-note .rail-title { font-size:19px;margin:0 0 7px;letter-spacing:-.5px; }
.rail-note p { font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 15px; }
.rail-note a { font-size:12px;font-weight:700;text-underline-offset:4px; }
.rail-footer { border-top:1px solid var(--line);padding:20px 12px 0;display:grid;gap:7px;color:var(--muted);font-size:10px; }
.rail-footer b { font-size:9px;font-weight:700;letter-spacing:1.7px; }
.local-preview { font-size:10px;border:1px solid var(--line);width:max-content;padding:2px 7px;border-radius:4px;margin-top:7px; }
.nav-scrim { display:none; }
.rail-close { display:none; }
.studio-intro { max-width:1320px;margin:0 auto;padding:30px 36px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px; }
.eyebrow { color:var(--muted);font-size:10px!important;letter-spacing:1.65px;font-weight:700;margin:0 0 11px!important;display:flex;gap:8px;align-items:center; }
.eyebrow > span { width:6px;height:6px;background:var(--accent);border-radius:50%; }
/* SEO review, 31 Oct 2026: the page's one H1 names the tool (small eyebrow style); the slogan below keeps its display look. */
.studio-intro .intro-h1 { font-family:inherit;text-transform:uppercase;line-height:1.35; }
.studio-intro .intro-display { margin:0;font-size:clamp(28px,3vw,42px);letter-spacing:-1.6px;line-height:1.13;font-weight:700;color:var(--ink); }
.studio-intro .intro-display span { color:var(--orange-text); }
.studio-intro p:not(.eyebrow):not(.intro-display) { margin:12px 0 0;color:var(--muted);font-size:14px; }
.intro-stamp { display:flex;align-items:center;gap:12px;transform:rotate(3deg);padding:0 10px;flex:none; }
.intro-stamp svg { height:34px;width:34px;stroke:var(--orange-text);stroke-width:1; }
.intro-stamp span { font-size:11px;line-height:1.6;color:var(--muted); }
.intro-stamp b { font-weight:500;color:var(--ink); }
.app { max-width:1320px;padding:0 36px 38px;gap:24px;grid-template-columns:minmax(0,1fr) 340px;align-items:start; }
.work { min-width:0; }
.steps { gap:0;border-bottom:1px solid var(--line);margin:0 0 20px; }
.steptab { background:none;border:0;border-radius:0;min-height:64px;align-items:center;padding:10px 8px 14px;position:relative;gap:10px; }
.steptab:first-child { padding-left:2px; }
.steptab .n { width:26px;height:26px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:50%;font-size:12px;font-weight:500; }
.steptab .t { font-size:13px;font-weight:700; }
.steptab .s { font-size:11px;margin-top:3px;max-width:136px; }
.steptab[aria-current="step"] { border:0;box-shadow:none; }
.steptab[aria-current="step"]::after { content:"";height:2px;background:var(--accent);position:absolute;bottom:-1px;left:0;right:0; }
.steptab.done .n { background:var(--soft);color:var(--muted); }
.steptab[aria-current="step"] .n { background:var(--accent);color:var(--on-accent);border-color:var(--accent); }
.panel { border-radius:14px;padding:25px 26px 18px;box-shadow:0 3px 10px #292c2803; }
.section-kicker { display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:1.4px;margin-bottom:11px; }
h2.step-h,h1.step-h { font-size:27px;line-height:1.18;font-weight:700;letter-spacing:-.8px;margin:0 0 9px; }
.lede { font-size:13px;line-height:1.6;margin-bottom:20px; }
.search { border-radius:8px;min-height:44px;background:var(--paper);font-size:13px;margin-bottom:15px;padding:11px 14px; }
.category-tabs { display:flex;gap:16px;margin:0 0 15px;border-bottom:1px solid var(--line);overflow:auto; }
.category-tab { color:var(--muted);font-size:12px;font-weight:500;border:0;background:none;padding:6px 0 12px;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;min-height:38px; }
.category-tab[aria-pressed="true"] { color:var(--orange-text);border-bottom-color:var(--accent);font-weight:700; }
.tiles { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.tile { background:var(--panel);border-radius:9px;min-height:82px;padding:15px 12px;gap:11px;align-items:center;position:relative; }
.tile:hover { background:var(--paper);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #292c2806; }
.tile[aria-pressed="true"] { background:var(--orange-soft);border-color:var(--accent);box-shadow:none; }
.tile[aria-pressed="true"]::after { content:"";position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;background:var(--accent); }
.tile > svg { width:34px;height:34px;padding:7px;border-radius:9px;background:var(--soft);stroke-width:1.7;margin:0; }
.tile[aria-pressed="true"] > svg { background:var(--panel);color:var(--orange-text); }
.tile b { font-size:14px;font-weight:700;line-height:1.3; }
.tile small { font-size:11px;margin-top:4px;line-height:1.4; }
.more-btn { width:100%;background:transparent;font-size:12px;border:0;margin-top:9px;min-height:38px;color:var(--muted); }
.more-btn::after { content:" +";font-size:17px;margin-left:6px; }
.more-btn[aria-expanded="true"]::after { content:" −"; }
.more-btn:hover { background:var(--paper);color:var(--ink); }
.panel-footnote { display:flex;gap:6px;align-items:center;justify-content:center;border-top:1px solid var(--line);padding-top:13px;margin-top:4px;font-size:11px;color:var(--muted); }
.panel-footnote svg { width:14px;height:14px;stroke:var(--good); }
.preview-card { top:22px; }
.preview-heading { display:flex;justify-content:space-between;align-items:center;min-height:64px;margin-bottom:20px; }
.preview-heading h2 { margin:0;font-size:14px;font-weight:700; }
.preview-heading > span { display:flex;gap:5px;align-items:center;font-size:8px;letter-spacing:1px;color:var(--muted); }
.preview-heading i { height:5px;width:5px;border-radius:50%;background:var(--good); }
.pcard { border-radius:14px;box-shadow:0 4px 12px #292c2804; }
.stage { background-color:var(--soft);background-image:radial-gradient(var(--peg) .8px,transparent .8px);background-size:12px 12px;padding:33px;min-height:306px; }
.stage canvas { width:min(100%,236px);border:14px solid white;border-radius:8px;box-shadow:0 8px 20px #292c2810;background:#fff; } /* white backing: when a browser scales the code, its edge pixels blend with this, not the grey stage (thin line fix, 1 Nov 2026) */
.status { padding:13px 16px;gap:8px;font-size:11px;font-weight:500;background:var(--good-bg);color:var(--good);border:0;min-height:46px; }
.status .dot { width:6px;height:6px; }
.status[data-level="warn"] { background:var(--warn-bg);color:var(--warn); }
.status[data-level="bad"] { background:var(--bad-bg);color:var(--bad); }
.fix { font-size:11px;min-height:32px;padding:4px 7px; }
.credit { padding:16px;background:var(--panel);gap:10px;border-top:1px solid var(--line); }
.credit input { width:16px;height:16px;border-radius:4px;margin-top:2px; }
.credit b { font-size:11px;font-weight:700; }
.credit small { display:block;font-size:10px;line-height:1.6;margin-top:5px; }
.actions { border-top:0;padding:0 16px 18px;gap:9px; }
.actions .promise { text-align:center;font-size:10px; }
.btn { border-radius:8px;font-size:13px;min-height:44px;padding:10px 15px; }
.btn.primary { color:var(--on-accent);background:var(--accent);border-color:var(--accent);font-weight:700; }
.btn.primary:hover { filter:none;box-shadow:0 4px 10px #D9822B28;transform:translateY(-1px); }
.btn[data-open="final"]::after { content:"↗";margin-left:12px;font-size:18px;line-height:1; }
.btn.small { min-height:40px;font-size:12px; }
.preview-note { color:var(--muted);display:flex;gap:6px;justify-content:center;align-items:center;font-size:10px;margin:15px 0; }
.preview-note svg { width:12px;height:12px; }
.field label { font-size:13px; }
.field input,.field textarea,.field select { border-radius:8px;background:var(--paper);font-size:14px;min-height:46px; }
.field input:focus,.field textarea:focus { border-color:var(--accent); }
.typehead { background:var(--soft);padding:8px 12px;border-radius:8px;font-size:13px;margin-top:18px; }
.typehead .link { font-size:12px; }
.link { font-size:12px; }
.hint,.msg { font-size:12px; }
.check { font-size:13px; }
.check input { width:18px;height:18px; }
.presets { gap:8px;grid-template-columns:repeat(4,minmax(0,1fr)); }
.preset { padding:9px 7px;border-radius:9px;background:var(--paper); }
.preset[aria-pressed="true"] { border-color:var(--accent);background:var(--orange-soft);box-shadow:none; }
.preset span { font-size:11px; }
.panel h2:not(.step-h) { font-size:13px;margin-top:24px; }
.logo-box { border-radius:9px;background:var(--paper);border-color:var(--muted);padding:14px; }
.chip { font-size:12px;border-radius:6px;min-height:38px;padding:6px 10px;background:var(--panel); }
.chip[aria-pressed="true"] { background:var(--orange-soft);color:var(--orange-text);border-color:var(--accent); }
.chips { gap:6px; }
.sw { width:30px;height:30px; }
.custom { font-size:12px;min-height:36px; }
.custom input { width:26px;height:26px; }
.range label { font-size:12px; }
.range output { font-size:12px; }
details.more { margin-top:24px; }
details.more summary { font-size:13px; }
.template-section,.guide,.foot { max-width:1320px;padding:0 36px;margin:0 auto; }
.template-section { padding-top:32px;border-top:1px solid var(--line); }
.section-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px; }
.section-heading h2 { font-size:25px;letter-spacing:-.8px;margin:0;line-height:1.2; }
.section-heading > p { color:var(--muted);font-size:12px;max-width:220px;text-align:right;margin:0 0 3px; }
.template-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px; }
.template-card { display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;border-radius:12px;align-items:stretch;text-align:left; }
.template-art { display:grid;place-items:center;height:180px;position:relative;overflow:hidden;isolation:isolate; }
.template-art::after { content:"";inset:0;position:absolute;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none; }
.art-wifi { background:#DDDCC5; }
.art-menu { background:#ECCFB9; }
.art-contact { background:#D6DFE4; }
.art-product { background:#E9DBAC; }
.wifi-paper,.menu-paper,.contact-paper,.product-box { position:relative;display:flex;flex-direction:column;align-items:center;color:#343B31;box-shadow:3px 7px 9px #343b3120; }
.wifi-paper { background:#FFFCED;width:104px;padding:15px 10px 11px;transform:rotate(-8deg);z-index:2;gap:6px; }
.art-small { font-size:4.5px;font-weight:700;letter-spacing:.7px;display:block; }
.art-title { font-weight:700;font-size:15px;letter-spacing:-.5px;line-height:1.1;display:block; }
/* Keep each phrase as one text node; these measures preserve the original artwork's line wraps. */
.wifi-paper .art-title { inline-size:80.73px;max-inline-size:100%; }
.menu-paper .art-serif { inline-size:62.64px;max-inline-size:100%; }
.product-label .art-title { inline-size:60px;max-inline-size:100%; }
.sample-code { width:33px;height:33px;display:block;background:repeating-conic-gradient(#394437 0% 25%,#fffced 0% 50%) 0 0/7px 9px;border:4px solid #FFFCED;outline:1px solid #39443733;position:relative; }
.sample-code::before,.sample-code::after { content:"";width:9px;height:9px;border:2px solid #394437;background:#fffced;box-shadow:inset 0 0 0 1px #fffced;position:absolute;top:0;left:0; }
.sample-code::after { left:auto;right:0; }
.art-disc { width:82px;height:82px;background:#AFB58D;border:8px solid #C3C7A6;position:absolute;border-radius:50%;right:-13px;bottom:-18px;z-index:-1; }
.menu-paper { background:#9D3F26;color:#FFEACF;width:90px;height:145px;padding:16px 10px;gap:7px;transform:rotate(9deg);z-index:2; }
.art-serif { font-family:Georgia,serif;font-size:23px;line-height:.93;text-align:center;letter-spacing:-.7px; }
.menu-paper .sample-code { margin-top:3px;width:27px;height:27px;border-width:3px; }
.menu-shadow { position:absolute;bottom:6px;left:50%;width:80px;height:12px;transform:rotate(-9deg);background:#A04F2528;filter:blur(6px); }
.contact-paper { width:158px;height:91px;background:#FEFCF4;transform:rotate(-9deg);align-items:flex-start;padding:14px 14px;gap:7px; }
.contact-paper .art-title { font-size:16px;inline-size:66.7px;max-inline-size:100%; }
.contact-paper .sample-code { position:absolute;right:12px;bottom:17px; }
.contact-line { height:1px;background:#475854;width:60px; }
.product-box { width:105px;height:142px;background:#B8A57C;transform:rotate(7deg);padding:20px 9px;box-shadow:6px 4px 0 #A18C68,9px 9px 10px #3C332326; }
.product-label { display:grid;gap:7px;justify-items:center;text-align:center;background:#FEF8DD;padding:12px 8px;width:85px; }
.sample-bars { display:block;width:56px;height:20px;background:repeating-linear-gradient(90deg,#3B4134 0 1px,transparent 1px 3px,#3B4134 3px 5px,transparent 5px 6px,#3B4134 6px 7px,transparent 7px 9px); }
.template-caption { display:block;position:relative;padding:14px 26px 15px 13px; }
.template-caption b { font-size:12px; }
.template-caption small { font-size:10px; }
.template-caption svg { position:absolute;right:9px;top:17px;width:14px;height:14px; }
.template-disclaimer { font-size:10px;color:var(--muted);margin:12px 0 0; }
.promise-strip { margin:37px auto;max-width:calc(1320px - 72px);padding:25px 28px;display:flex;align-items:center;gap:24px;border:1px solid var(--line);background:var(--rail);border-radius:11px;width:calc(100% - 72px); }
.promise-mark { font-size:59px;line-height:1;color:var(--orange-text);font-family:Georgia,serif;flex:none; }
.promise-strip h2 { font-size:17px;letter-spacing:-.2px;margin:0 0 6px; }
.promise-strip p { font-size:12px;color:var(--muted);margin:0;max-width:670px; }
.promise-seal { border:1px solid var(--muted);border-radius:50%;width:65px;height:65px;flex:none;display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;letter-spacing:1px;line-height:1.5;transform:rotate(12deg);margin-left:auto;color:var(--muted); }
.guide { padding-top:6px;padding-bottom:34px; }
.guide-inner { max-width:none; }
.guide h2 { font-size:25px;letter-spacing:-.7px; }
.guide-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:25px; }
.guide-number { font-size:11px;color:var(--orange-text);font-variant-numeric:tabular-nums; }
.guide h3 { font-size:14px;line-height:1.3;margin:8px 0 10px; }
.guide p { font-size:12px;color:var(--muted);line-height:1.7; }
.foot { border-top:1px solid var(--line);padding-top:22px;padding-bottom:26px;display:flex;gap:20px;align-items:center;justify-content:space-between;font-size:10px; }
.foot b { font-size:11px;font-weight:500;color:var(--ink); }
.foot p { margin:5px 0 0; }
.adtoggle { font-size:10px; }
.adtoggle input { width:14px;height:14px; }
.preview-label { font-size:10px; }
.adslot { border:1px dashed var(--muted);border-radius:8px;background:var(--soft);font-size:11px; }
.adslot b { font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--orange-text);margin-bottom:5px; }
.adslot span { max-width:80%; }
.ad-rect { min-height:250px;max-width:300px; }
.ad-wrap { max-width:1320px; }
body.no-ads .ad-wrap { display:none; }
.ad-rail { display:none; }
.guide-grid .adslot { grid-column:1/-1; }
.final-page { max-width:1080px;padding:38px 36px 50px;min-height:calc(100vh - 200px); }
.final-wrap > .link { justify-self:start;margin-bottom:18px; }
.final-wrap > .link::before { content:"← "; }
.final-wrap > #final-h { font-size:36px; }
.final-grid { grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:26px;margin-top:24px; }
.final-card { border-radius:14px; }
.final-card .stage { min-height:340px;padding:30px; }
.final-card .stage canvas { width:min(100%,280px); }
.final-side { padding:25px; }
.summary { grid-template-columns:1fr;gap:4px;margin-top:20px;font-size:13px; }
.summary dd { padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:7px; }
.summary dt { font-size:10px; }
.final-card .btnrow > button { flex:1; }
.sizepick { font-size:12px; }
.sizepick select { font-size:12px; }
body.show-final .studio-intro,body.show-final .template-section,body.show-final .promise-strip { display:none; }
.toast { font-size:13px;box-shadow:0 8px 22px #0002;border-radius:8px; }
@media(min-width:1660px) { body:not(.no-ads) { padding-right:184px; } body:not(.no-ads) .ad-rail { display:grid; } }
@media(min-width:1360px) {
  .tiles { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tile:not(.template-card) { flex-direction:column;align-items:flex-start;min-height:122px;gap:12px;padding:15px 13px; }
}
@media(min-width:981px) and (max-height:980px) {
  body:not(.no-ads) .preview-card .stage { min-height:210px;padding:17px; }
  body:not(.no-ads) .preview-card .stage canvas { width:min(100%,176px);border-width:11px; }
  body:not(.no-ads) .preview-heading { min-height:44px;margin-bottom:12px; }
}
@media(min-width:981px) and (max-height:860px) {
  .top { min-height:72px; }
  .studio-intro { padding-top:24px;padding-bottom:18px; }
  .preview-card .stage { min-height:210px;padding:17px; }
  .preview-card .stage canvas { width:min(100%,176px);border-width:11px; }
  .preview-card .credit small { display:block; }
  .preview-card .credit { padding-top:12px;padding-bottom:12px; }
}
@media(max-width:1250px) {
  :root { --rail-width:184px; }
  .wordmark { left:20px;font-size:28px; }
  .wordmark svg { width:19px;height:19px; }
  .side-rail { padding-left:12px;padding-right:12px; }
  .rail-link { font-size:13px;padding-left:10px;padding-right:10px;gap:9px; }
  .rail-note { padding-left:10px;padding-right:10px; }
  .top,.studio-intro { padding-left:26px;padding-right:26px; }
  .language-suggestion { width:calc(100% - 52px); }
  .app { padding-left:26px;padding-right:26px;grid-template-columns:minmax(0,1fr) 300px;gap:20px; }
  .panel { padding:22px 20px 17px; }
  .intro-stamp { display:none; }
  .private-badge { display:none; }
  .langpick { margin-left:auto; }
  .category-tabs { gap:12px; }
  .category-tab { font-size:11px; }
  .tile { gap:8px;padding:12px 10px; }
  .tile > svg { width:30px;height:30px;padding:6px; }
  .tile b { font-size:13px; }
  .tile small { font-size:10px; }
  .template-section,.guide,.foot { padding-left:26px;padding-right:26px; }
  .promise-strip { width:calc(100% - 52px); }
  .template-grid { gap:12px; }
  .template-art { height:162px; }
  .contact-paper { width:138px; }
  .template-caption { min-height:84px;padding:12px 20px 12px 10px; }
  .guide-grid { gap:18px; }
}
@media(max-width:1080px) and (min-width:981px) {
  :root { --rail-width:164px; }
  .wordmark { left:17px;font-size:25px; }
  .rail-link { font-size:12px; }
  .rail-plus,.rail-count { display:none; }
  .rail-note p { font-size:12px; }
  .top,.studio-intro,.app { padding-left:20px;padding-right:20px; }
  .language-suggestion { width:calc(100% - 40px); }
  .app { grid-template-columns:minmax(0,1fr) 280px;gap:16px; }
  .steptab .s { display:none; }
  .steptab .t { font-size:11px; }
  .panel { padding:20px 16px 15px; }
  .tile { align-items:flex-start; }
  .tile > svg { width:24px;height:24px;padding:3px; }
  .category-tabs { gap:10px; }
}
@media(max-width:980px) {
  .ad-leader { max-width:300px;min-height:250px; }
  .search { font-size:16px; } /* under 16px, iPhone Safari zooms in when it is tapped (Central Command #1) */
  .search::placeholder { font-size:13px; }
  body.searching .mbar { display:none; } /* the bottom bar steps aside while someone types a search */
  :root { --rail-width:0px; }
  body { padding-left:0; }
  .top { min-height:76px;padding:15px 24px;gap:10px; }
  .language-suggestion { width:calc(100% - 48px); }
  .wordmark { position:static;font-size:29px;order:1;margin-right:auto;z-index:auto; }
  .wordmark svg { width:20px;height:20px; }
  .tagline { display:none; }
  .langpick { order:2;margin:0; }
  .langpick select { border-left:0;font-size:12px;max-width:112px;padding:6px; }
  #theme-toggle { order:3;width:36px;height:36px; }
  .mobile-menu { display:grid;order:0;border:0;width:30px; }
  .side-rail { width:245px;padding:33px 18px 24px;transform:translateX(-100%);transition:transform .2s;visibility:hidden;z-index:60; }
  .rail-close { display:grid;position:absolute;top:17px;right:15px;width:32px;height:32px;font-size:22px; }
  body.nav-open .side-rail { transform:translateX(0);visibility:visible; }
  .nav-scrim:not([hidden]) { display:block;position:fixed;inset:0;background:#18201970;z-index:55;border:0; }
  .rail-label { margin-bottom:25px; }
  .rail-note { margin-top:40px; }
  .rail-footer { margin-top:auto; }
  .studio-intro { padding:29px 24px 24px; }
  .studio-intro .intro-display { font-size:36px; }
  .studio-intro p:not(.eyebrow):not(.intro-display) { font-size:13px;max-width:450px; }
  .app { display:block;padding:0 24px 30px; }
  .steps { margin-bottom:16px; }
  .steptab { flex-direction:row;align-items:center;gap:10px;min-height:58px; }
  .steptab .t { font-size:13px; }
  .steptab .s { display:block; }
  .panel { padding:25px; }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile { min-height:85px;padding:16px;gap:12px; }
  .tile b { font-size:15px; }
  .tile small { font-size:12px; }
  .tile > svg { width:36px;height:36px;padding:7px; }
  .category-tab { font-size:12px; }
  .category-tabs { gap:22px; }
  .presets { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .inline-preview { border-radius:8px;background-color:var(--soft);margin-bottom:20px; }
  .inline-preview canvas { width:115px;border:7px solid white; }
  .inline-preview p { font-size:12px; }
  .template-section,.guide,.foot { padding-left:24px;padding-right:24px; }
  .template-grid { gap:15px;grid-template-columns:repeat(2,minmax(0,1fr)); }
  .template-art { height:190px; }
  .template-caption { min-height:0;padding:16px 28px 17px 16px; }
  .template-caption b { font-size:14px; }
  .template-caption small { font-size:11px; }
  .template-caption svg { top:18px;right:14px; }
  .template-card { padding:0; }
  .promise-strip { margin:28px 24px;width:calc(100% - 48px);padding:20px;gap:18px; }
  .promise-seal { display:none; }
  .promise-strip h2 { font-size:17px; }
  .guide-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:24px; }
  .guide h3 { font-size:15px; }
  .guide p { font-size:13px; }
  .foot { flex-wrap:wrap;padding-bottom:120px;gap:15px; }
  .preview-label { margin-left:auto; }
  .mbar { gap:12px;padding:12px 24px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -3px 18px #292c2807; }
  .mbar .thumb { width:49px;height:49px;border-radius:6px; }
  .mbar .thumb canvas { width:44px;height:44px; }
  .mbar .mid b { font-size:13px; }
  .mbar .mid span { font-size:10px; }
  .mbar .mid span i { width:5px;height:5px; }
  .mbar .btn { min-height:44px;font-size:12px;padding:10px 14px; }
  .mbar .btn::after { margin-left:8px; }
  .toast { bottom:110px; }
  .sheet { max-height:85dvh;overflow-y:auto; }
  .sheet .stage canvas { width:min(100%,235px); }
  .sheet .stage { padding:25px; }
  .sheet .actions { padding:0 18px 22px; }
  .sheet-head { padding:16px 18px; }
  .sheet-head h2 { font-size:18px; }
  .final-page { padding:25px 24px 35px; }
  .final-grid { grid-template-columns:minmax(0,1fr) minmax(240px,.8fr); }
  .final-card .stage { min-height:250px;padding:20px; }
  .final-card .stage canvas { width:min(100%,240px); }
  .final-wrap > #final-h { font-size:32px; }
  .final-side { padding:20px; }
  .skip-link { left:12px; }
}
@media(max-width:600px) {
  .top { padding:13px 16px;gap:6px;min-height:68px; }
  .language-suggestion { display:grid;grid-template-columns:18px minmax(0,1fr) 44px;gap:0 8px;width:calc(100% - 32px);margin-top:12px;padding:6px 6px 6px 12px; }
  .language-suggestion-icon { grid-column:1;grid-row:1; }
  .language-suggestion p { grid-column:2;grid-row:1;padding-top:6px; }
  .language-suggestion-switch { grid-column:2;grid-row:2;justify-self:start;padding:4px 0; }
  .language-suggestion-dismiss { grid-column:3;grid-row:1 / 3;align-self:start; }
  .wordmark { font-size:26px; }
  .wordmark svg { width:18px;height:18px;margin-top:3px; }
  .langpick select { font-size:11px;max-width:88px; }
  #theme-toggle { width:32px;height:32px; }
  .studio-intro { padding:28px 18px 23px; }
  .studio-intro .intro-display { font-size:35px;letter-spacing:-1.3px;max-width:360px; }
  .studio-intro .intro-display span { display:block; }
  .studio-intro p:not(.eyebrow):not(.intro-display) { max-width:315px;font-size:13px;line-height:1.6; }
  .eyebrow { font-size:9px!important;letter-spacing:1.3px; }
  .app { padding:0 16px 27px; }
  .steptab { padding:9px 4px 13px;gap:7px;min-height:53px; }
  .steptab .t { font-size:11px;line-height:1.25; }
  .steptab .s { display:none; }
  .steptab .n { width:23px;height:23px;font-size:11px; }
  .panel { padding:21px 17px 17px;border-radius:11px; }
  h2.step-h { font-size:25px; }
  .section-kicker { font-size:8px;letter-spacing:1px; }
  .lede { font-size:12px;margin-bottom:16px; }
  .search::placeholder { font-size:12px; }
  .category-tabs { gap:16px; }
  .category-tab { font-size:10px;min-height:40px; }
  .tiles { gap:8px; }
  .tile { flex-direction:column;align-items:flex-start;min-height:121px;padding:12px;gap:9px; }
  .tile b { font-size:13px; }
  .tile small { font-size:10px;line-height:1.4; }
  .tile > svg { width:30px;height:30px;padding:5px; }
  .template-card { padding:0;display:block; }
  .template-section,.guide { padding-left:18px;padding-right:18px; }
  .template-section { padding-top:27px; }
  .section-heading { display:block;margin-bottom:18px; }
  .section-heading h2,.guide h2 { font-size:24px; }
  .section-heading > p { text-align:left;max-width:none;margin:10px 0 0;font-size:12px; }
  .template-grid { gap:11px; }
  .template-art { height:165px; }
  .contact-paper { width:125px;transform:rotate(-12deg);height:83px;padding:12px; }
  .contact-paper .art-title { font-size:13px;inline-size:53.25px; }
  .contact-paper .sample-code { width:27px;height:27px;right:9px;bottom:16px; }
  .template-caption { min-height:93px;padding:13px 12px; }
  .template-caption b { font-size:12px;padding-right:2px; }
  .template-caption small { font-size:10px;padding-right:0; }
  .template-caption svg { display:none; }
  .template-disclaimer { font-size:10px;line-height:1.5; }
  .promise-strip { margin:27px 18px;width:calc(100% - 36px);padding:20px 16px;gap:14px;align-items:flex-start; }
  .promise-mark { font-size:40px; }
  .promise-strip h2 { font-size:16px; }
  .promise-strip p { font-size:11px;line-height:1.7; }
  .guide-grid { gap:20px 17px; }
  .guide h3 { font-size:14px; }
  .guide p { font-size:12px; }
  .foot { padding-left:18px;padding-right:18px; }
  .foot > div { width:100%; }
  .mbar { padding-left:16px;padding-right:16px;gap:9px; }
  .mbar .mid span { max-width:130px;line-height:1.4; }
  .mbar .btn::after { display:none; }
  .mbar .btn { padding:10px 12px; }
  .presets { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preset { padding:12px; }
  .preset span { font-size:12px; }
  .preset canvas { max-width:100px; }
  .field input,.field select,.field textarea { font-size:16px; }
  .final-page { padding:22px 18px 35px; }
  .final-grid { grid-template-columns:minmax(0,1fr); }
  .final-card .stage { padding:25px; }
  .final-wrap > #final-h { font-size:30px; }
  .final-card .btnrow { flex-wrap:wrap; }
  .final-card .btnrow button { flex-basis:40%; }
  .final-card .actions .promise { font-size:11px; }
  .credit b { font-size:12px; }
  .credit small { font-size:11px; }
}
@media(max-width:360px) {
  .wordmark { font-size:23px; }
  .wordmark svg { width:16px;height:16px; }
  .langpick select { max-width:77px; }
  .category-tabs { gap:12px; }
  .mbar .thumb { width:42px;height:42px; }
  .mbar .thumb canvas { width:38px;height:38px; }
  .mbar .mid b { font-size:12px; }
  .mbar .btn { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important;animation:none!important; }
}
@media print {
  body { padding:0;background:white;color:black; }
  .side-rail,.top,.studio-intro,.steps,.template-section,.promise-strip,.guide,.foot,.mbar,.adslot,.toast,.preview-heading,.preview-note,.nav-scrim { display:none!important; }
  body.show-final .final-page { padding:0; }
  .final-card .actions,.final-card .credit,.final-card .status,.final-wrap>.link { display:none; }
}

/* Speed (Claude, 17 Oct 2026): scripts now load with defer, so the page paints before studio.js fills the
   popular code tiles. Hold their space until then so nothing below them jumps (layout shift). Heights match
   the filled grid at each breakpoint; once the tiles are in, :empty no longer applies. */
#popular:empty { min-height:254px; }
@media(max-width:1359px) { #popular:empty { min-height:358px; } }
@media(max-width:980px) { #popular:empty { min-height:370px; } }
@media(max-width:600px) { #popular:empty { min-height:508px; } }

/* Speed (18 Oct 2026): the language suggestion floats at the bottom instead of pushing the studio down when it
   appears after loading (layout shift). */
.language-suggestion { position:fixed;z-index:60;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;box-shadow:0 8px 28px rgba(0,0,0,.18); }
@media(max-width:980px) { .language-suggestion { bottom:calc(86px + env(safe-area-inset-bottom,0px)); } }

/* The explanation under the heading, and the guides and answers block (19 Oct 2026). */
.intro-say { max-width:62ch;margin:12px 0 0;font-size:.98em;line-height:1.6;opacity:.9 }
.learn-more .guide-wrap > p { max-width:68ch;line-height:1.65 }
.learn-links { display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;font-weight:700 }

/* UX review 25 Oct 2026: explanation below the tool, 44px tap targets */
.about-tool { max-width:1320px;margin:0 auto;padding:6px 36px 26px; }
.about-tool .intro-say { margin:0;max-width:760px;color:var(--muted);font-size:14px;line-height:1.65; }
body.show-final .about-tool { display:none; }
.rail-note .rail-title { font-weight:700; }
.icon-button { width:44px;height:44px; }
.category-tab { min-height:44px; }
.rail-note a { display:inline-block;padding:13px 0; }
@media (max-width:700px){ .about-tool { padding-left:20px;padding-right:20px; } }
#theme-toggle { position:relative; }
#theme-toggle::after { content:"";position:absolute;inset:-6px; }
.learn-links a { display:inline-block;padding:12px 0; }

/* Our own ad spaces (25 Oct 2026): size reserved before the ad loads */
body.no-ads .ad-wrap:has(.live) { display:block; }
body.no-ads .adslot.live { display:block; }
.adslot.live { border:0;background:none;margin:22px auto;min-height:250px;max-width:300px; }
.adslot.live .adsbygoogle { display:block;width:300px;height:250px;margin:0 auto; }
@media (min-width:768px) { .ad-leader.live { max-width:728px;min-height:90px; } .ad-leader.live .adsbygoogle { width:728px;height:90px; } }
/* On phones the two spaces would sit back to back (the live preview is in the bottom bar), so only the one below the steps shows */
@media (max-width:767px) { body.no-ads .ad-wrap:has(.live),.ad-leader.live { display:none!important; } }

/* UX follow-up: fluid range controls and one primary action per step. */
.langpick select { min-height:44px; }
#final .btn,#final .link,#final .png-size { min-height:44px; }
body:has(#step-2:not(.hidden)) #mbar [data-open="final"],
body:has(#step-2:not(.hidden)) #pcard [data-open="final"] {
  background:var(--panel);color:var(--ink);border-color:var(--line);box-shadow:none;
}
@media (max-width:980px) {
  #step-3 [data-open="final"] { background:var(--panel);color:var(--ink);border-color:var(--line);box-shadow:none; }
}
@media (max-width:700px) {
  #step-3 .range { display:grid;grid-template-columns:minmax(0,1fr) 4em;gap:6px 12px; }
  #step-3 .range label { grid-column:1 / -1;min-width:0; }
  #step-3 .range input { min-width:0;width:100%;margin:0; }
  #step-3 .range output { min-width:0; }
}

/* Fade controls: keep the second ink visually grouped with the code colour. */
.panel .check:has(#grad) { min-height:52px;margin-top:10px!important;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper); }
.panel #grad { flex:none;width:19px;height:19px;accent-color:var(--orange-text); }
#fade-opts { margin-top:10px;padding:13px 14px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel); }
#fade-opts h2 { margin:0 0 8px;font-size:12px;letter-spacing:0; }
#fade-opts #fade-dir-h { margin-top:14px; }
#fg2-swatches { gap:9px;min-height:38px; }
#fg2-swatches .sw { width:34px;height:34px; }
#fade-dirs { gap:6px; }
#fade-dirs .chip { min-height:35px;padding:6px 10px;font-size:11px; }
#fade-opts > p:last-child { margin:12px 0 0!important; }
#fade-swap { min-height:35px;padding:7px 11px;border-radius:7px;font-size:11px; }

/* The live preview follows the page while people work on their code (computers only; Greg, 27 Oct 2026).
   .app lines its columns up at the top, so the preview column needs the full row height for the sticky card to move.
   Windows under 600px tall are too short to keep the whole card (and "Get your code") on screen, so it scrolls there. */
@media (min-width:981px) and (min-height:600px) { .preview-col { align-self:stretch; } }