← Qiki · all runs · 📊 leaderboard

r-1790763671038-hsi6w
Ecommerce website for selling toy feet
model txt2txt-boost upstream http://127.0.0.1:8080 harness 127.0.0.1 score 9 / 10
2026-09-30 10:21:11 UTC · total 11s · 1 step
3 · Landing Page
42,752 chars ↗ open as pages ↗ open full preview
view source
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toy Feet</title>
  <style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FFF5F7;--surface:#fff6f7;--elevated:#ede4e6;
  --text:#0a0a0a;--muted:#717171;--border:rgba(10,10,10,0.2);
  --accent:#FF66B2;--accent-btn:#FF66B2;--accent-text:#b74980;--ink:#0a0a0a;--glow:rgba(255,102,178,0.20);--soft:rgba(255,102,178,0.13);
  /* Foreground for anything painted on --soft. See the derivation above: a token
     computed against --bg is not valid on a tinted surface. */
  --soft-ink:#a84376;
  /* Minimum comfortable hit area. Referenced by every interactive rule so a
     tap target can never regress below the 44px WCAG/iOS floor. */
  --tap:44px;
  /* Translucent chrome derived from the direction's own background. Hardcoding
     rgba(10,10,11,.62) here put dark text on a dark nav (1.08:1) the moment a
     light direction shipped. */
  --nav-bg:rgba(255,245,247,0.72);--hairline:rgba(0,0,0,.14);
  --font:Optima,Candara,'Segoe UI','Trebuchet MS',system-ui,sans-serif;
  --font-display:Optima,Candara,'Segoe UI','Trebuchet MS',system-ui,sans-serif;
  --w-display:300;--w-body:400;
  --track-display:-.015em;
  --texture:none;
  /* Display type scale. Multiplies every heading clamp, so "giant typography"
     is one number rather than six font-size rules that can drift apart. */
  --display-scale:1.3;
  --maxw:1200px;--r:18px;--r-lg:30px;--ease:cubic-bezier(.4,0,.2,1);
  /* Derived corners. Chips, badges, focus rings and avatars used to hard-code
     999px/50%/6px, so "no rounded corners anywhere" left 14 radius rules
     standing even once --r was 0. One switch, so flat means flat. */
  --r-sm:6px;--r-pill:999px;--r-round:50%;
  color-scheme:light;
}
/* Vertical rhythm. Every seam used to be TWO stacked paddings — 96px off the
   band above plus 96px off the band below = a 192px gutter at 1440, ~8 of them
   on a page carrying ~2,400px of content. One token owns the seam now and only
   the band BELOW pays for it, so spacing can never compound, and a band with
   little to say (a one-line testimonial) is the height of its content. */
:root{--band:clamp(3rem,5vw,4.5rem)}
html{scroll-behavior:smooth}
body{background-color:var(--bg);background-image:var(--texture);background-repeat:no-repeat;background-attachment:fixed;color:var(--text);font-family:var(--font);font-weight:var(--w-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Staggered page-load reveal. Absent motion is one of the named AI-slop
   tells; 0.1s increments read as intentional rather than decorative.
   Honoured only when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  section,header{animation:qk-rise .55s var(--ease) both}
  section:nth-of-type(1){animation-delay:.05s}section:nth-of-type(2){animation-delay:.15s}
  section:nth-of-type(3){animation-delay:.25s}section:nth-of-type(4){animation-delay:.35s}
  section:nth-of-type(n+5){animation-delay:.45s}
  @keyframes qk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{color:var(--muted)}
h1,h2,h3,.nav__brand,.footer__brand{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);line-height:1.08;color:var(--text);overflow-wrap:break-word}
h1{font-size:calc(clamp(2.5rem,6vw,4.25rem)*var(--display-scale))}
h2{font-size:calc(clamp(2rem,4vw,3rem)*var(--display-scale))}
h3{font-size:calc(clamp(1.1rem,2vw,1.35rem)*var(--display-scale));letter-spacing:-.02em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
section{padding-block:var(--band) 0}
/* Visually-hidden label for the comparison matrix's empty corner cell — a <th>
   with no text is a column no screen reader can name. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}
.shead{max-width:640px;margin-bottom:calc(var(--band)*.62)}
.shead h2{margin-top:12px}
.shead p{margin-top:14px;font-size:1.1rem}
/* WCAG 2.4.7. The template shipped with no focus styles at all, so a keyboard
   user had no visible position on any generated site. --accent-text is used
   rather than --accent because the ring must clear the near-black background. */
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:var(--r-sm)}
:focus:not(:focus-visible){outline:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;min-height:var(--tap);border-radius:var(--r);font-weight:600;font-size:.95rem;transition:transform .15s var(--ease),box-shadow .2s var(--ease);cursor:pointer}
.btn--primary{background:var(--accent-btn);color:var(--ink);box-shadow:0 10px 30px -10px var(--glow)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px var(--glow)}
.btn--ghost{border:1px solid var(--border);color:var(--text)}
.btn--ghost:hover{background:var(--surface);border-color:var(--hairline)}
/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--nav-bg);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav__brand{font-weight:700;font-size:1.18rem;letter-spacing:-.03em;display:inline-flex;align-items:center;min-height:var(--tap)}
.nav__links{display:flex;gap:30px;align-items:center}
.nav__links a{color:var(--muted);font-size:.92rem;font-weight:500;transition:color .15s;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 4px}
.nav__links a:hover{color:var(--text)}
@media(max-width:760px){.nav__links{display:none}}
/* hero */
.hero{position:relative;padding-top:calc(var(--band)*1.35);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 55% at 72% 12%,var(--glow),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero__sub{font-size:1.18rem;margin:22px 0 34px;max-width:50ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
@media(max-width:840px){.hero .wrap{grid-template-columns:1fr}.hero__media{order:-1}.hero__media img{aspect-ratio:16/10}}
/* ON A PHONE, STOP OVERLAYING ALTOGETHER. h-bleed keeps the photo as a backdrop at
   every width, and at 390px the headline, sub-copy and both buttons all sit on the
   busiest part of it -- measured worst-element contrast 1.11:1, i.e. invisible.
   Scrims only got it to 2.05:1: there is not enough room to darken the plate and
   still show the photograph. Putting the image back in flow below the text makes
   the question moot -- the copy sits on the page colour, which the palette already
   guarantees, and the photo reads better as a card than as a wash. Verified by
   rendering at 390x844. */
@media(max-width:840px){
  .h-bleed .hero__media{position:relative;inset:auto;z-index:0;opacity:1;order:1;margin-top:clamp(20px,5vw,32px)}
  .h-bleed .hero__media::after{display:none}
  .h-bleed .hero__media img{aspect-ratio:16/10;border-radius:var(--r-lg)}
}
/* ── LAYOUT VARIANTS ────────────────────────────────────────────────────────
   Same skeletons, different arrangement. Without these, six directions were six
   palettes over ONE identical floorplan — which is what the "AI slop" research
   actually objects to, and no amount of colour fixes it.

   2026-09-11: this whole block was INSIDE the @media(max-width:840px) above it —
   that rule opened a brace and the closing pair only arrived at the end of
   .f-rows, ~30 rules later. So every variant applied on phones and NONE of them
   at 1440: the six directions really were one floorplan on desktop, and the fix
   for that shipped inert. Verified by brace depth, not by reading — the stray
   brace is invisible in a diff. */
.h-stacked .hero .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}
.h-stacked .hero__sub{margin-inline:auto}
.h-stacked .hero__cta{justify-content:center}
.h-stacked .hero__media{order:1;width:100%;margin-top:clamp(28px,4vw,48px)}
.h-stacked .hero__media img{width:100%}
/* editorial: headline runs the full measure, image is an inline figure beside
   the standfirst — magazine, not SaaS marketing page. */
.h-editorial .hero .wrap{grid-template-columns:1fr;gap:0}
.h-editorial .hero__copy h1{max-width:16ch;font-size:clamp(2.8rem,7.5vw,5.5rem)}
.h-editorial .hero__media{order:1;float:right;width:min(44%,460px);margin:0 0 24px 40px}
.h-editorial .hero__sub{max-width:52ch;font-size:1.24rem}
@media (max-width:720px){.h-editorial .hero__media{float:none;width:100%;margin:24px 0 0}}
/* bleed: image sits behind the copy. */
.h-bleed .hero{isolation:isolate}
.h-bleed .hero .wrap{grid-template-columns:1fr;min-height:min(78vh,640px);align-content:center}
.h-bleed .hero__media{position:absolute;inset:0;order:0;z-index:-1;opacity:.55}
/* h-bleed puts the headline ON the photo. Without a scrim the sub-copy and eyebrow
   vanish into it -- measured 2026-09-11 on a live kiln-studio build: mean local
   contrast 2.42:1, well under AA, and the body copy was unreadable over the fire.
   The scrim is the PAGE'S OWN --bg, densest under the text column and fading across
   the image, so it works on any palette light or dark and needs no colour maths
   (Lightning CSS mangles multi-argument colour functions). 2.42:1 -> 5.43:1. */
.h-bleed .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 34%,transparent 76%)}
.h-bleed .hero__media img{width:100%;height:100%;object-fit:cover}
.h-bleed .hero__copy{max-width:44ch}
/* type: a different COMPOSITION, not another skin. split/stacked/editorial/bleed
   are four dressings of one floorplan (eyebrow → headline → sub → two buttons →
   one image), so a brief that says "no hero image at all" had nowhere to land.
   This one has no media slot in the markup — the rule and the word-marks carry
   the band instead. */
.h-type .hero::before{display:none}
/* minmax(0,1fr), not 1fr: a plain fr track keeps a min-content floor, so a 62px
   headline whose longest word measures 400px silently widens the grid past a
   390 viewport. body{overflow-x:hidden} then CLIPS it, which is why a
   scrollWidth check reports the page clean while the word is cut in half. */
.h-type .hero .wrap{grid-template-columns:minmax(0,1fr);gap:0}
.h-type .hero__copy h1{font-size:calc(clamp(2.1rem,9.2vw,7.5rem)*var(--display-scale));max-width:15ch;margin-top:clamp(14px,2vw,26px)}
.h-type .hero__sub{font-size:clamp(1.1rem,1.8vw,1.4rem);max-width:46ch}
.hero__rule{height:2px;background:var(--text);opacity:.85;margin:clamp(30px,4vw,52px) 0 clamp(16px,2vw,24px)}
.hero__marks{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(12px,2.4vw,30px);font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero__marks li{white-space:nowrap}
/* panel: colour-block split. The headline sits INSIDE a painted block that runs
   to the page edge; the pitch and the buttons live in the other half. */
.h-panel .hero{padding-top:0}
.h-panel .hero::before{display:none}
.h-panel .hero .wrap{max-width:none;padding-inline:0;grid-template-columns:1.02fr .98fr;gap:0;align-items:stretch}
/* The block bleeds to the viewport edge but its TEXT lines up with the measure
   every other band uses, or the page reads as two unrelated documents. */
.h-panel .hero__block{background:var(--accent-btn);color:var(--ink);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(44px,7vw,104px) clamp(28px,4vw,56px) clamp(44px,7vw,104px) max(24px,calc((100vw - var(--maxw))/2 + 24px))}
.h-panel .hero__block h1{color:var(--ink);max-width:14ch}
.h-panel .hero__block .eyebrow{color:var(--ink);opacity:.78}
.h-panel .hero__side{display:flex;flex-direction:column;justify-content:center;gap:26px;
  padding:clamp(36px,6vw,88px) max(24px,calc((100vw - var(--maxw))/2 + 24px)) clamp(36px,6vw,88px) clamp(28px,4vw,56px)}
.h-panel .hero__side .hero__sub{margin:0}
.h-panel .hero__media img{aspect-ratio:16/10}
@media(max-width:840px){.h-panel .hero .wrap{grid-template-columns:1fr}}
/* rows: numbered editorial rows with hairlines instead of cards. */
.f-rows .features{display:block}
/* row-gap stays tight: the column gap wants to be generous, but applying the
   same figure between the h3 and its own paragraph opened a 40px hole inside
   every row. Invisible until the variants started applying at 1440. */
.f-rows .fcard{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(18px,3vw,40px);row-gap:6px;align-items:start;
  background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:clamp(22px,3vw,34px) 0}
.f-rows .fcard:last-child{border-bottom:1px solid var(--border)}
.f-rows .fcard__n{width:auto;height:auto;background:none;border-radius:0;margin:0;
  font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--accent-text);opacity:.75}
.f-rows .fcard h3{grid-column:2;margin:0 0 8px}
.f-rows .fcard p{grid-column:2;max-width:62ch}
/* products + gallery tiles.
   The count comes from the markup (.g-N, chosen by gridCols so it divides the
   item count where it can) rather than an inline style, so a media query can
   still lower it. The basis (not a max-width) is what decides where a row wraps,
   so a full row fills the measure exactly and justify-content centres whatever is
   left over instead of stranding it against the left edge. */
.products,.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;--cols:4}
.g-1{--cols:1}.g-2{--cols:2}.g-3{--cols:3}.g-4{--cols:4}.g-5{--cols:5}
.pcard,.gtile{flex:0 1 calc((100% - (var(--cols) - 1)*22px)/var(--cols))}
/* Narrow viewports step the count DOWN per class — Chromium will not divide a
   calc by a min(), so the ceiling has to be spelled out rather than computed. */
@media(max-width:1040px){.g-4{--cols:2}.g-5{--cols:3}}
@media(max-width:720px){.g-3,.g-5{--cols:2}}
@media(max-width:430px){.g-2,.g-3,.g-4,.g-5{--cols:1}}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(0,0,0,.7)}
.pcard__media{position:relative;aspect-ratio:1/1;overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover}
.pcard__badge{position:absolute;top:12px;left:12px;background:var(--accent-btn);color:var(--ink);font-size:.78rem;font-weight:700;letter-spacing:.03em;padding:5px 11px;border-radius:var(--r-pill)}
.pcard__body{padding:16px 18px 20px}
.pcard__name{font-weight:600;font-size:1.02rem}
.pcard__row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.pcard__price{font-weight:700;font-size:1.16rem}
.pcard__add{font-size:.85rem;font-weight:600;color:var(--accent-text)}
/* catalogue as ROWS. Two jobs: a tile whose image slot has been removed is a row
   with extra steps, and "a raw tracklist table" had no renderer at all — the
   nearest thing on offer was an "Add to cart" tile, which is what a record label
   asking for a tracklist got. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;border-collapse:collapse}
.ptable th{text-align:left;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 0 12px;border-bottom:2px solid var(--text)}
.ptable th:last-child{text-align:right}
.ptable td{padding:clamp(14px,2vw,20px) 0;border-bottom:1px solid var(--border);vertical-align:baseline}
.ptable th+th,.ptable td+td{padding-left:clamp(14px,3vw,40px)}
.ptable__n{width:3ch;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.92rem}
.ptable__name{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);font-size:clamp(1.05rem,2.2vw,1.5rem)}
.ptable__badge{margin-left:10px;font-family:var(--font);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--soft);color:var(--soft-ink);padding:3px 8px;border-radius:var(--r-sm);white-space:nowrap}
.ptable__price{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.glist{list-style:none;border-top:2px solid var(--text)}
.glist li{display:grid;grid-template-columns:3ch 1fr;gap:clamp(14px,3vw,34px);align-items:baseline;padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid var(--border)}
.glist__n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.92rem}
.glist__t{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);font-size:clamp(1.05rem,2.4vw,1.6rem)}
/* showcase gallery (comic pages / stills — portrait tiles) */
.gtile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.gtile:hover{transform:translateY(-5px);box-shadow:0 28px 54px -24px var(--glow)}
.gtile__media{position:relative;aspect-ratio:2/3;overflow:hidden}
.gtile__media img{width:100%;height:100%;object-fit:cover}
.gtile__cap{padding:12px 14px;font-size:.92rem;font-weight:600;letter-spacing:-.01em}
/* features */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px}
.fcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:30px}
.fcard__n{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--soft);color:var(--soft-ink);font-weight:700;font-size:.95rem;margin-bottom:18px}
.fcard h3{margin-bottom:8px}
.fcard p{font-size:.98rem}
/* quote */
.quote{text-align:center;max-width:820px;margin-inline:auto}
.quote blockquote{font-size:clamp(1.35rem,3vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.32;color:var(--text)}
.quote__a{margin-top:24px;color:var(--muted);font-size:.95rem}
/* pricing */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;max-width:1000px;margin-inline:auto}
.tier{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:16px}
.tier--featured{border-color:var(--accent);box-shadow:0 30px 60px -30px var(--glow)}
.tier__name{font-weight:600;color:var(--muted);letter-spacing:.02em}
.tier__price{font-size:2.6rem;font-weight:800;letter-spacing:-.03em}
.tier__price span{font-size:1rem;font-weight:500;color:var(--muted)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;color:var(--muted);font-size:.94rem}
.tier ul li{padding-left:22px;position:relative}
.tier ul li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.tier .btn{margin-top:auto;justify-content:center}
/* faq accordion */
.faq{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:4px 22px;transition:border-color .15s}
.faq__item[open]{border-color:var(--border)}
.faq__item summary{cursor:pointer;list-style:none;font-weight:600;font-size:1.02rem;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;letter-spacing:-.01em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--accent);font-weight:400;font-size:1.5rem;line-height:1;transition:transform .2s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{color:var(--muted);font-size:.98rem;line-height:1.6;padding:0 0 20px}
/* link-in-bio */
.bio{min-height:100vh;display:grid;place-items:center;padding:clamp(2rem,6vw,4rem) 20px;position:relative;overflow:hidden}
.bio::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 0%,var(--glow),transparent 70%);pointer-events:none}
.bio__inner{position:relative;width:100%;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bio__avatar{width:112px;height:112px;border-radius:var(--r-round);overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 50px -20px var(--glow)}
.bio__avatar img{width:100%;height:100%;object-fit:cover}
.bio__name{margin-top:22px;font-size:clamp(1.6rem,4vw,2.1rem)}
.bio__bio{color:var(--muted);margin-top:12px;max-width:40ch}
.bio__links{margin-top:32px;width:100%;display:flex;flex-direction:column;gap:12px}
.biolink{display:block;width:100%;padding:17px 22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border);font-weight:600;letter-spacing:-.01em;transition:transform .16s var(--ease),border-color .16s,background .16s}
.biolink:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--elevated)}
.bio__foot{margin-top:32px;color:var(--muted);font-size:.82rem}
/* cta band */
.ctaband{position:relative;border-radius:var(--r-lg);padding:calc(var(--band)*.85) 24px;text-align:center;overflow:hidden;background:linear-gradient(135deg,var(--surface),var(--elevated));border:1px solid var(--border)}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 90% at 50% 0%,var(--glow),transparent 70%)}
.ctaband>*{position:relative}
.ctaband h2{margin-bottom:14px}
.ctaband p{max-width:48ch;margin:0 auto 30px;font-size:1.12rem}
/* footer */
.footer{border-top:1px solid var(--border);padding-block:calc(var(--band)*.8) 36px;margin-top:var(--band)}
.footer .wrap{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.footer__brand{font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.footer__tag{color:var(--muted);margin-top:12px;font-size:.9rem;max-width:32ch}
.fcol h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:15px}
.fcol a{display:flex;align-items:center;min-height:var(--tap);color:var(--muted);font-size:.9rem;padding:5px 0;transition:color .15s}
.fcol a:hover{color:var(--text)}
.footer__bottom{border-top:1px solid var(--border);margin-top:44px;padding-top:24px;color:var(--muted);font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media(max-width:760px){.footer .wrap{grid-template-columns:1fr 1fr}}
/* logo wall — TEXT wordmarks. There are no logo assets, and inventing an <img>
   for somebody else's brand is the one thing a generated page must not do. */
.logos__t{text-align:center;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:clamp(20px,2.6vw,32px)}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(18px,3.6vw,54px)}
.logo{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:.01em;
  font-size:clamp(1rem,2vw,1.35rem);color:var(--text);opacity:.6;max-width:100%;overflow-wrap:anywhere;
  transition:opacity .2s var(--ease)}
.logo:hover{opacity:1}
/* marquee. The track is WIDER than the viewport on purpose and is clipped by
   .marq{overflow:hidden} — an element-by-element overflow probe has to skip
   descendants of a clipping ancestor or it reports this as a defect. Two
   identical halves plus padding-right on every item (not flex gap) is what makes
   translateX(-50%) land exactly one period along and loop seamlessly. */
.marq{overflow:hidden;border-block:1px solid var(--border);padding-block:clamp(14px,1.8vw,22px);--marq-gap:clamp(28px,5vw,64px)}
.marq__t{display:flex;width:max-content;animation:qk-marq 28s linear infinite}
.marq__t span{padding-right:var(--marq-gap);white-space:nowrap;font-family:var(--font-display);
  font-weight:var(--w-display);letter-spacing:var(--track-display);color:var(--text);
  font-size:calc(clamp(1.15rem,2.6vw,1.9rem)*var(--display-scale))}
.marq__t span::after{content:"\2022";margin-left:var(--marq-gap);color:var(--accent-text)}
@keyframes qk-marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq__t{animation:none}}
/* shop — a wide measure and a slightly shorter seam, so the page reads as many
   small bands rather than a few tall ones. */
body.k-shop{--maxw:1280px;--band:clamp(2.6rem,4.2vw,3.75rem)}
/* multi-page — real routes inside the ONE document. Pages are siblings of the
   top chrome, never a wrapper around it, so a kind that reaches the <body> grid
   (k-docs) keeps its sidebar column. */
.pg[hidden]{display:none}
[data-nav][aria-current]{color:var(--text)}
.side__nav [data-nav][aria-current]{background:var(--elevated);color:var(--text)}
.mast__meta a{white-space:nowrap;transition:color .15s var(--ease)}
.mast__meta a:hover,.mast__meta [aria-current]{color:var(--text)}
/* the index chrome's one text link becomes the nav; still one baseline row */
.idx__nav{display:flex;flex-wrap:wrap;gap:4px 18px;min-width:0}
.idx__nav a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:.88rem;font-weight:600;
  color:var(--muted);white-space:nowrap;border-bottom:1px solid transparent;transition:color .15s var(--ease)}
.idx__nav a:hover{color:var(--text)}
.idx__nav [aria-current]{color:var(--accent-text);border-bottom-color:currentColor}
/* The bar HIDES its links under 760px. That was harmless while every link went
   to "#top"; now it is the only way off the opening page, so they WRAP onto
   their own row instead. Not a horizontal scroller: a scroller the visitor has
   to discover is the same dead end with an extra step. */
@media(max-width:760px){
  .mp .nav .wrap{height:auto;flex-wrap:wrap;row-gap:6px;padding-block:10px}
  .mp .nav__links{display:flex;flex-wrap:wrap;order:3;flex-basis:100%;gap:4px 18px;min-width:0}
  .mp .nav__links a{font-size:.86rem;padding:0}
}
/* motion + image skeleton */
@media(prefers-reduced-motion:no-preference){
  [data-anim]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
  [data-anim].in{opacity:1;transform:none}
}
/* image slot: real photo (png) is opaque and covers the spinner; an unfilled
   placeholder (svg) is translucent so the spinner shows through = "image coming" */
/* spinner ONLY while the run is in progress (host adds .qk-loading to <body>).
   A real photo (opaque png) covers it; when the run finishes the class is gone,
   so it always terminates — an unfilled slot becomes a clean static tile, never a
   perpetual spinner. */
.pcard__media::before,.gtile__media::before{content:"";position:absolute;top:calc(50% - 17px);left:calc(50% - 17px);width:34px;height:34px;border-radius:var(--r-round);border:3px solid rgba(255,255,255,.16);border-top-color:var(--accent);z-index:0;opacity:0}
.qk-loading .pcard__media::before,.qk-loading .gtile__media::before{opacity:1;animation:qk-spin .8s linear infinite}
.pcard__media img,.gtile__media img{position:relative;z-index:1}
/* NO PER-PRODUCT PHOTOGRAPHS: present the collection as an editorial index rather
   than as tiles we cannot fill. Measured 2026-09-11 -- 15 of 19 website runs plan a
   single image, so the tile grid was almost always five empty frames. director.ts
   strips gal-noimg the moment real product images exist, so this is presentation
   only and reverses itself; the markup is unchanged either way. */
.gallery.gal-noimg{display:block;border-top:1px solid var(--border)}
.gallery.gal-noimg .gtile{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.5vw,28px);align-items:baseline;padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid var(--border)}
.gallery.gal-noimg .gtile__media{display:none}
.gallery.gal-noimg .gtile__cap{font-size:clamp(1.05rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.01em}
.gallery.gal-noimg .gtile::before{content:counter(galn,decimal-leading-zero);counter-increment:galn;font-size:.78rem;font-weight:600;letter-spacing:.16em;color:var(--muted);opacity:.75}
.gallery.gal-noimg{counter-reset:galn}
.qk-loading img[src^="data:image/svg"]{opacity:.55}
@keyframes qk-spin{to{transform:rotate(360deg)}}
</style>
</head>
<body class="h-split f-rows k-shop mp">
<nav class="nav"><div class="wrap">
  <a class="nav__brand" href="#/home">Toy Feet</a>
  <div class="nav__links"><a href="#/home" data-nav="home">Home</a><a href="#/shop" data-nav="shop">Shop</a></div>
  <a class="btn btn--primary" href="#top">Shop the Drop</a>
</div></nav>
<main class="pg" data-pg="home" data-title="Home">
<header class="hero" id="top"><div class="wrap">
  <div class="hero__copy" data-anim>
    <span class="eyebrow">New Drop: The Cloud Collection</span>
    <h1 style="margin-top:16px">Collectible feet for your collection</h1>
    <p class="hero__sub">Whimsical, high-quality novelty feet that bring a smile to every shelf.</p>
    <div class="hero__cta">
      <a class="btn btn--primary" href="#top">Shop the Drop</a>
      <a class="btn btn--ghost" href="#features">View Lookbook</a>
    </div>
  </div>
  <div class="hero__media" data-anim style="--i:1"><img data-hero-fill src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20800%20600'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.38'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(128%2C51%2C125)'%20stop-opacity%3D'.20'%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D'r'%20cx%3D'.7'%20cy%3D'.25'%20r%3D'.7'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'.55'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'800'%20height%3D'600'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'800'%20height%3D'600'%20fill%3D'url(%23g)'%2F%3E%3Cg%20transform%3D'translate(400%20300)%20scale(1.9)%20translate(-200%20-218)'%20opacity%3D'.55'%3E%3Cdefs%3E%3Cpattern%20id%3D'h58'%20width%3D'34'%20height%3D'34'%20patternUnits%3D'userSpaceOnUse'%3E%3Ccircle%20cx%3D'17'%20cy%3D'17'%20r%3D'2.4'%20fill%3D'rgba(255%2C102%2C178%2C.26)'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20x%3D'-80'%20y%3D'-80'%20width%3D'560'%20height%3D'560'%20fill%3D'url(%23h58)'%2F%3E%3C%2Fg%3E%3Crect%20width%3D'800'%20height%3D'600'%20fill%3D'url(%23r)'%2F%3E%3C%2Fsvg%3E" alt="Toy Feet"></div>
</div></header>
<section><div class="marq">
  <div class="marq__t"><span>Free Shipping Over $50</span><span>Whimsy Guaranteed</span><span>Support Small Business</span><span aria-hidden="true">Free Shipping Over $50</span><span aria-hidden="true">Whimsy Guaranteed</span><span aria-hidden="true">Support Small Business</span></div>
</div></section>
<section class="wrap" id="features"><div class="shead" data-anim>
    <span class="eyebrow">Why Toy Feet?</span><h2>Not just a foot, a feeling</h2>
    <p>We craft joy in every stitch and mold.</p>
  </div>
  <div class="features"><div class="fcard" data-anim style="--i:0">
    <div class="fcard__n">01</div><h3>Whimsical Design</h3><p>Every pair is designed to spark joy and conversation.</p>
  </div><div class="fcard" data-anim style="--i:1">
    <div class="fcard__n">02</div><h3>Premium Quality</h3><p>Durable materials built to last through years of collecting.</p>
  </div><div class="fcard" data-anim style="--i:2">
    <div class="fcard__n">03</div><h3>Fast Shipping</h3><p>We pack with care and ship quickly to your door.</p>
  </div></div>
</section>
<section class="wrap"><div class="quote" data-anim>
  <blockquote>&ldquo;I&#39;ve never seen feet so cute! They are the highlight of my office desk.&rdquo;</blockquote>
  <div class="quote__a">Sarah J., Collector</div>
</div></section>
<section class="wrap" data-anim>
  <div class="logos__t">Trusted by collectors</div>
  <div class="logos"><span class="logo">Toy Collector Monthly</span><span class="logo">Quirky Gifts Blog</span><span class="logo">The Daily Novelty</span></div>
</section>
<section class="wrap"><div class="ctaband" data-anim>
  <h2>Ready to step up your collection?</h2><p>Join our newsletter for exclusive drops and 10% off your first order.</p>
  <a class="btn btn--primary" href="#top">Get 10% Off</a>
</div></section>
</main>
<main class="pg" data-pg="shop" data-title="Shop" hidden>
<section class="wrap"><div class="shead" data-anim>
    <span class="eyebrow">The Collection</span><h2>Find your perfect pair</h2>
  </div>
  <div class="products g-4"><article class="pcard" data-anim style="--i:0">
    <div class="pcard__media"><img data-product-fill="0" src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp018'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp018)'%2F%3E%3Cg%20transform%3D'rotate(0%20200%20200)'%3E%3Cdefs%3E%3Cpattern%20id%3D'p018'%20width%3D'34'%20height%3D'34'%20patternUnits%3D'userSpaceOnUse'%3E%3Ccircle%20cx%3D'17'%20cy%3D'17'%20r%3D'2.4'%20fill%3D'rgba(255%2C102%2C178%2C.34)'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20x%3D'-80'%20y%3D'-80'%20width%3D'560'%20height%3D'560'%20fill%3D'url(%23p018)'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E" alt="The Classic Plush" loading="lazy"><span class="pcard__badge">Bestseller</span></div>
    <div class="pcard__body">
      <div class="pcard__name">The Classic Plush</div>
      <div class="pcard__row"><span class="pcard__price">$24</span><span class="pcard__add">Add to cart</span></div>
    </div>
  </article><article class="pcard" data-anim style="--i:1">
    <div class="pcard__media"><img data-product-fill="1" src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp114'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp114)'%2F%3E%3Cg%20transform%3D'rotate(2.5%20200%20200)'%3E%3Cg%20stroke%3D'rgba(255%2C102%2C178%2C.34)'%20stroke-width%3D'1.4'%3E%3Cline%20x1%3D'-80'%20y1%3D'76'%20x2%3D'480'%20y2%3D'76'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'116'%20x2%3D'480'%20y2%3D'116'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'148'%20x2%3D'480'%20y2%3D'148'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'174'%20x2%3D'480'%20y2%3D'174'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'196'%20x2%3D'480'%20y2%3D'196'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'214'%20x2%3D'480'%20y2%3D'214'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'230'%20x2%3D'480'%20y2%3D'230'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'246'%20x2%3D'480'%20y2%3D'246'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'266'%20x2%3D'480'%20y2%3D'266'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'294'%20x2%3D'480'%20y2%3D'294'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'332'%20x2%3D'480'%20y2%3D'332'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E" alt="Rubber Duck Duo" loading="lazy"></div>
    <div class="pcard__body">
      <div class="pcard__name">Rubber Duck Duo</div>
      <div class="pcard__row"><span class="pcard__price">$18</span><span class="pcard__add">Add to cart</span></div>
    </div>
  </article><article class="pcard" data-anim style="--i:2">
    <div class="pcard__media"><img data-product-fill="2" src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp295'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp295)'%2F%3E%3Cg%20transform%3D'rotate(-2.5%20200%20200)'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C102%2C178%2C.34)'%20stroke-width%3D'1.4'%3E%3Ccircle%20cx%3D'152'%20cy%3D'192'%20r%3D'104'%2F%3E%3Crect%20x%3D'152'%20y%3D'140'%20width%3D'188'%20height%3D'188'%20rx%3D'18'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E" alt="Mini Doll Set" loading="lazy"></div>
    <div class="pcard__body">
      <div class="pcard__name">Mini Doll Set</div>
      <div class="pcard__row"><span class="pcard__price">$12</span><span class="pcard__add">Add to cart</span></div>
    </div>
  </article><article class="pcard" data-anim style="--i:3">
    <div class="pcard__media"><img data-product-fill="3" src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp337'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp337)'%2F%3E%3Cg%20transform%3D'rotate(2.5%20200%20200)'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C102%2C178%2C.34)'%20stroke-width%3D'1.4'%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'58'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'106'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'154'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'202'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'250'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'298'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E" alt="Giant Cloud" loading="lazy"><span class="pcard__badge">Limited</span></div>
    <div class="pcard__body">
      <div class="pcard__name">Giant Cloud</div>
      <div class="pcard__row"><span class="pcard__price">$45</span><span class="pcard__add">Add to cart</span></div>
    </div>
  </article></div>
</section>
</main>
<footer class="footer"><div class="wrap">
  <div><div class="footer__brand">Toy Feet</div><p class="footer__tag">Toy Feet: Collecting joy, one pair at a time.</p></div>
  <div class="fcol"><h4>Shop</h4><a href="#">All Products</a><a href="#">New Arrivals</a><a href="#">Bestsellers</a><a href="#">Gift Cards</a></div><div class="fcol"><h4>Company</h4><a href="#">About Us</a><a href="#">Our Story</a><a href="#">Careers</a><a href="#">Press</a></div><div class="fcol"><h4>Support</h4><a href="#">Contact Us</a><a href="#">Shipping Info</a><a href="#">Returns</a><a href="#">FAQ</a></div>
</div><div class="wrap footer__bottom">
  <span>&copy; 2026 Toy Feet. All rights reserved.</span>
  <span>Built on Own1 &middot; Qiki</span>
</div></footer>
<script>
(()=>{const io=new IntersectionObserver(es=>es.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.12});
document.querySelectorAll('[data-anim]').forEach(el=>io.observe(el));})();
</script>
<script>
(()=>{const ps=[...document.querySelectorAll('.pg')];if(ps.length<2)return;
const ids=ps.map(p=>p.dataset.pg),base=document.title;
const go=(id,top)=>{if(ids.indexOf(id)<0)id=ids[0];
 ps.forEach(p=>{p.hidden=p.dataset.pg!==id});
 document.querySelectorAll('[data-nav]').forEach(a=>{a.dataset.nav===id?a.setAttribute('aria-current','page'):a.removeAttribute('aria-current')});
 const l=ps[ids.indexOf(id)].dataset.title;
 document.title=id===ids[0]||!l?base:base+' \u2014 '+l;
 if(top)scrollTo({top:0,behavior:'instant'})};
const route=first=>{const h=location.hash;
 if(h.slice(0,2)==='#/')return go(h.slice(2).toLowerCase().replace(/[^a-z0-9-].*/,'')||ids[0],!first);
 /* No fragment is the opening page — and this has to hold on EVERY call, not
    just the first: going Back from #/about to the bare url is a hashchange to
    "", and a first-only rule leaves the visitor staring at the page they just
    left with the Back button apparently broken. */
 if(!h||h==='#')return go(ids[0],!first);
 /* Any other fragment is an element link (#top, #features, #faq) whose target
    may sit on a hidden page. Switch to that page first, or every in-page link
    on the site is dead the moment you are not already on the page owning it. */
 const el=document.getElementById(decodeURIComponent(h.slice(1)));
 if(el){const p=el.closest('.pg');if(p&&p.hidden)go(p.dataset.pg,0);el.scrollIntoView();return}
 if(first)go(ids[0],0)};
/* Fragment links are DRIVEN, not left to the browser. Measured in Chromium: a
   srcdoc document's url is "about:srcdoc" but its BASE url is inherited from the
   parent, so <a href="#/menu"> resolves against the PARENT and the click takes
   the iframe clean off the document — QikiOverlay's preview would navigate to
   the Qiki app inside itself. Assigning location.hash is a same-document
   navigation in all three environments (file://, srcdoc, the /preview CSP) and
   still pushes the history entry Back needs. pushState is not an option at all:
   it throws SecurityError on both the opaque-origin iframe and file://. */
addEventListener('click',ev=>{
 if(ev.defaultPrevented||ev.button||ev.metaKey||ev.ctrlKey||ev.shiftKey||ev.altKey)return;
 const a=ev.target.closest&&ev.target.closest('a[href^="#"]');if(!a)return;
 const h=a.getAttribute('href');ev.preventDefault();
 if(h==='#')return;                      /* placeholder links stay inert */
 location.hash===h?route(0):location.hash=h});
addEventListener('hashchange',()=>route(0));route(1);})();
</script>
</body>
</html>
raw JSON
{
  "id": "r-1790763671038-hsi6w",
  "prompt": "Ecommerce website for selling toy feet",
  "project": {
    "name": "Toy Feet",
    "tagline": "The whimsical e-commerce store for collectible toy feet.",
    "theme": "playful and surreal minimalist design, soft pastel gradients with bold primary accents, clean sans-serif typography",
    "brandColors": [
      "#FF6B6B",
      "#4ECDC4",
      "#FFE66D",
      "#FFFFFF"
    ],
    "audience": "toy collectors, gift shoppers, and fans of quirky novelty items",
    "vibe": "whimsical, playful, colorful, inviting, quirky"
  },
  "steps": [
    {
      "id": "s1-pyg6o",
      "kind": "website",
      "params": {
        "brief": "Design and build a responsive ecommerce landing page for 'Toy Feet' — a whimsical brand selling novelty toy feet (e.g., giant plush feet, rubber duck feet, mini doll feet). The site should feature a playful, colorful aesthetic with a hero section showcasing the product, a featured products grid, a 'Why Toy Feet?' benefits section, and a footer with newsletter signup. Include a sticky header with navigation and a 'Shop Now' CTA. Use a pastel color palette (pink, blue, yellow) with bold typography. Ensure mobile-first design.",
        "project": {
          "name": "Toy Feet",
          "tagline": "The whimsical e-commerce store for collectible toy feet.",
          "theme": "playful and surreal minimalist design, soft pastel gradients with bold primary accents, clean sans-serif typography",
          "brandColors": [
            "#FF6B6B",
            "#4ECDC4",
            "#FFE66D",
            "#FFFFFF"
          ],
          "audience": "toy collectors, gift shoppers, and fans of quirky novelty items",
          "vibe": "whimsical, playful, colorful, inviting, quirky"
        },
        "heroPlanned": false
      },
      "label": "Toy Feet Ecommerce Site"
    }
  ],
  "results": {
    "s1-pyg6o": {
      "status": "done",
      "startedAt": 1790763671040,
      "attempt": 1,
      "output": {
        "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>Toy Feet</title>\n  <style>\n*{box-sizing:border-box;margin:0;padding:0}\n:root{\n  --bg:#FFF5F7;--surface:#fff6f7;--elevated:#ede4e6;\n  --text:#0a0a0a;--muted:#717171;--border:rgba(10,10,10,0.2);\n  --accent:#FF66B2;--accent-btn:#FF66B2;--accent-text:#b74980;--ink:#0a0a0a;--glow:rgba(255,102,178,0.20);--soft:rgba(255,102,178,0.13);\n  /* Foreground for anything painted on --soft. See the derivation above: a token\n     computed against --bg is not valid on a tinted surface. */\n  --soft-ink:#a84376;\n  /* Minimum comfortable hit area. Referenced by every interactive rule so a\n     tap target can never regress below the 44px WCAG/iOS floor. */\n  --tap:44px;\n  /* Translucent chrome derived from the direction's own background. Hardcoding\n     rgba(10,10,11,.62) here put dark text on a dark nav (1.08:1) the moment a\n     light direction shipped. */\n  --nav-bg:rgba(255,245,247,0.72);--hairline:rgba(0,0,0,.14);\n  --font:Optima,Candara,'Segoe UI','Trebuchet MS',system-ui,sans-serif;\n  --font-display:Optima,Candara,'Segoe UI','Trebuchet MS',system-ui,sans-serif;\n  --w-display:300;--w-body:400;\n  --track-display:-.015em;\n  --texture:none;\n  /* Display type scale. Multiplies every heading clamp, so \"giant typography\"\n     is one number rather than six font-size rules that can drift apart. */\n  --display-scale:1.3;\n  --maxw:1200px;--r:18px;--r-lg:30px;--ease:cubic-bezier(.4,0,.2,1);\n  /* Derived corners. Chips, badges, focus rings and avatars used to hard-code\n     999px/50%/6px, so \"no rounded corners anywhere\" left 14 radius rules\n     standing even once --r was 0. One switch, so flat means flat. */\n  --r-sm:6px;--r-pill:999px;--r-round:50%;\n  color-scheme:light;\n}\n/* Vertical rhythm. Every seam used to be TWO stacked paddings — 96px off the\n   band above plus 96px off the band below = a 192px gutter at 1440, ~8 of them\n   on a page carrying ~2,400px of content. One token owns the seam now and only\n   the band BELOW pays for it, so spacing can never compound, and a band with\n   little to say (a one-line testimonial) is the height of its content. */\n:root{--band:clamp(3rem,5vw,4.5rem)}\nhtml{scroll-behavior:smooth}\nbody{background-color:var(--bg);background-image:var(--texture);background-repeat:no-repeat;background-attachment:fixed;color:var(--text);font-family:var(--font);font-weight:var(--w-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}\n/* Staggered page-load reveal. Absent motion is one of the named AI-slop\n   tells; 0.1s increments read as intentional rather than decorative.\n   Honoured only when the visitor has not asked for reduced motion. */\n@media (prefers-reduced-motion:no-preference){\n  section,header{animation:qk-rise .55s var(--ease) both}\n  section:nth-of-type(1){animation-delay:.05s}section:nth-of-type(2){animation-delay:.15s}\n  section:nth-of-type(3){animation-delay:.25s}section:nth-of-type(4){animation-delay:.35s}\n  section:nth-of-type(n+5){animation-delay:.45s}\n  @keyframes qk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}\n}\nimg{max-width:100%;display:block}\na{color:inherit;text-decoration:none}\np{color:var(--muted)}\nh1,h2,h3,.nav__brand,.footer__brand{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);line-height:1.08;color:var(--text);overflow-wrap:break-word}\nh1{font-size:calc(clamp(2.5rem,6vw,4.25rem)*var(--display-scale))}\nh2{font-size:calc(clamp(2rem,4vw,3rem)*var(--display-scale))}\nh3{font-size:calc(clamp(1.1rem,2vw,1.35rem)*var(--display-scale));letter-spacing:-.02em}\n.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}\nsection{padding-block:var(--band) 0}\n/* Visually-hidden label for the comparison matrix's empty corner cell — a <th>\n   with no text is a column no screen reader can name. */\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}\n.shead{max-width:640px;margin-bottom:calc(var(--band)*.62)}\n.shead h2{margin-top:12px}\n.shead p{margin-top:14px;font-size:1.1rem}\n/* WCAG 2.4.7. The template shipped with no focus styles at all, so a keyboard\n   user had no visible position on any generated site. --accent-text is used\n   rather than --accent because the ring must clear the near-black background. */\n:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:var(--r-sm)}\n:focus:not(:focus-visible){outline:none}\n.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;min-height:var(--tap);border-radius:var(--r);font-weight:600;font-size:.95rem;transition:transform .15s var(--ease),box-shadow .2s var(--ease);cursor:pointer}\n.btn--primary{background:var(--accent-btn);color:var(--ink);box-shadow:0 10px 30px -10px var(--glow)}\n.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px var(--glow)}\n.btn--ghost{border:1px solid var(--border);color:var(--text)}\n.btn--ghost:hover{background:var(--surface);border-color:var(--hairline)}\n/* nav */\n.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--nav-bg);border-bottom:1px solid var(--border)}\n.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}\n.nav__brand{font-weight:700;font-size:1.18rem;letter-spacing:-.03em;display:inline-flex;align-items:center;min-height:var(--tap)}\n.nav__links{display:flex;gap:30px;align-items:center}\n.nav__links a{color:var(--muted);font-size:.92rem;font-weight:500;transition:color .15s;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 4px}\n.nav__links a:hover{color:var(--text)}\n@media(max-width:760px){.nav__links{display:none}}\n/* hero */\n.hero{position:relative;padding-top:calc(var(--band)*1.35);overflow:hidden}\n.hero::before{content:\"\";position:absolute;inset:0;background:radial-gradient(58% 55% at 72% 12%,var(--glow),transparent 70%);pointer-events:none}\n.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}\n.hero__sub{font-size:1.18rem;margin:22px 0 34px;max-width:50ch}\n.hero__cta{display:flex;gap:14px;flex-wrap:wrap}\n.hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}\n@media(max-width:840px){.hero .wrap{grid-template-columns:1fr}.hero__media{order:-1}.hero__media img{aspect-ratio:16/10}}\n/* ON A PHONE, STOP OVERLAYING ALTOGETHER. h-bleed keeps the photo as a backdrop at\n   every width, and at 390px the headline, sub-copy and both buttons all sit on the\n   busiest part of it -- measured worst-element contrast 1.11:1, i.e. invisible.\n   Scrims only got it to 2.05:1: there is not enough room to darken the plate and\n   still show the photograph. Putting the image back in flow below the text makes\n   the question moot -- the copy sits on the page colour, which the palette already\n   guarantees, and the photo reads better as a card than as a wash. Verified by\n   rendering at 390x844. */\n@media(max-width:840px){\n  .h-bleed .hero__media{position:relative;inset:auto;z-index:0;opacity:1;order:1;margin-top:clamp(20px,5vw,32px)}\n  .h-bleed .hero__media::after{display:none}\n  .h-bleed .hero__media img{aspect-ratio:16/10;border-radius:var(--r-lg)}\n}\n/* ── LAYOUT VARIANTS ────────────────────────────────────────────────────────\n   Same skeletons, different arrangement. Without these, six directions were six\n   palettes over ONE identical floorplan — which is what the \"AI slop\" research\n   actually objects to, and no amount of colour fixes it.\n\n   2026-09-11: this whole block was INSIDE the @media(max-width:840px) above it —\n   that rule opened a brace and the closing pair only arrived at the end of\n   .f-rows, ~30 rules later. So every variant applied on phones and NONE of them\n   at 1440: the six directions really were one floorplan on desktop, and the fix\n   for that shipped inert. Verified by brace depth, not by reading — the stray\n   brace is invisible in a diff. */\n.h-stacked .hero .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}\n.h-stacked .hero__sub{margin-inline:auto}\n.h-stacked .hero__cta{justify-content:center}\n.h-stacked .hero__media{order:1;width:100%;margin-top:clamp(28px,4vw,48px)}\n.h-stacked .hero__media img{width:100%}\n/* editorial: headline runs the full measure, image is an inline figure beside\n   the standfirst — magazine, not SaaS marketing page. */\n.h-editorial .hero .wrap{grid-template-columns:1fr;gap:0}\n.h-editorial .hero__copy h1{max-width:16ch;font-size:clamp(2.8rem,7.5vw,5.5rem)}\n.h-editorial .hero__media{order:1;float:right;width:min(44%,460px);margin:0 0 24px 40px}\n.h-editorial .hero__sub{max-width:52ch;font-size:1.24rem}\n@media (max-width:720px){.h-editorial .hero__media{float:none;width:100%;margin:24px 0 0}}\n/* bleed: image sits behind the copy. */\n.h-bleed .hero{isolation:isolate}\n.h-bleed .hero .wrap{grid-template-columns:1fr;min-height:min(78vh,640px);align-content:center}\n.h-bleed .hero__media{position:absolute;inset:0;order:0;z-index:-1;opacity:.55}\n/* h-bleed puts the headline ON the photo. Without a scrim the sub-copy and eyebrow\n   vanish into it -- measured 2026-09-11 on a live kiln-studio build: mean local\n   contrast 2.42:1, well under AA, and the body copy was unreadable over the fire.\n   The scrim is the PAGE'S OWN --bg, densest under the text column and fading across\n   the image, so it works on any palette light or dark and needs no colour maths\n   (Lightning CSS mangles multi-argument colour functions). 2.42:1 -> 5.43:1. */\n.h-bleed .hero__media::after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 34%,transparent 76%)}\n.h-bleed .hero__media img{width:100%;height:100%;object-fit:cover}\n.h-bleed .hero__copy{max-width:44ch}\n/* type: a different COMPOSITION, not another skin. split/stacked/editorial/bleed\n   are four dressings of one floorplan (eyebrow → headline → sub → two buttons →\n   one image), so a brief that says \"no hero image at all\" had nowhere to land.\n   This one has no media slot in the markup — the rule and the word-marks carry\n   the band instead. */\n.h-type .hero::before{display:none}\n/* minmax(0,1fr), not 1fr: a plain fr track keeps a min-content floor, so a 62px\n   headline whose longest word measures 400px silently widens the grid past a\n   390 viewport. body{overflow-x:hidden} then CLIPS it, which is why a\n   scrollWidth check reports the page clean while the word is cut in half. */\n.h-type .hero .wrap{grid-template-columns:minmax(0,1fr);gap:0}\n.h-type .hero__copy h1{font-size:calc(clamp(2.1rem,9.2vw,7.5rem)*var(--display-scale));max-width:15ch;margin-top:clamp(14px,2vw,26px)}\n.h-type .hero__sub{font-size:clamp(1.1rem,1.8vw,1.4rem);max-width:46ch}\n.hero__rule{height:2px;background:var(--text);opacity:.85;margin:clamp(30px,4vw,52px) 0 clamp(16px,2vw,24px)}\n.hero__marks{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(12px,2.4vw,30px);font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}\n.hero__marks li{white-space:nowrap}\n/* panel: colour-block split. The headline sits INSIDE a painted block that runs\n   to the page edge; the pitch and the buttons live in the other half. */\n.h-panel .hero{padding-top:0}\n.h-panel .hero::before{display:none}\n.h-panel .hero .wrap{max-width:none;padding-inline:0;grid-template-columns:1.02fr .98fr;gap:0;align-items:stretch}\n/* The block bleeds to the viewport edge but its TEXT lines up with the measure\n   every other band uses, or the page reads as two unrelated documents. */\n.h-panel .hero__block{background:var(--accent-btn);color:var(--ink);display:flex;flex-direction:column;justify-content:center;\n  padding:clamp(44px,7vw,104px) clamp(28px,4vw,56px) clamp(44px,7vw,104px) max(24px,calc((100vw - var(--maxw))/2 + 24px))}\n.h-panel .hero__block h1{color:var(--ink);max-width:14ch}\n.h-panel .hero__block .eyebrow{color:var(--ink);opacity:.78}\n.h-panel .hero__side{display:flex;flex-direction:column;justify-content:center;gap:26px;\n  padding:clamp(36px,6vw,88px) max(24px,calc((100vw - var(--maxw))/2 + 24px)) clamp(36px,6vw,88px) clamp(28px,4vw,56px)}\n.h-panel .hero__side .hero__sub{margin:0}\n.h-panel .hero__media img{aspect-ratio:16/10}\n@media(max-width:840px){.h-panel .hero .wrap{grid-template-columns:1fr}}\n/* rows: numbered editorial rows with hairlines instead of cards. */\n.f-rows .features{display:block}\n/* row-gap stays tight: the column gap wants to be generous, but applying the\n   same figure between the h3 and its own paragraph opened a 40px hole inside\n   every row. Invisible until the variants started applying at 1440. */\n.f-rows .fcard{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(18px,3vw,40px);row-gap:6px;align-items:start;\n  background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:clamp(22px,3vw,34px) 0}\n.f-rows .fcard:last-child{border-bottom:1px solid var(--border)}\n.f-rows .fcard__n{width:auto;height:auto;background:none;border-radius:0;margin:0;\n  font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--accent-text);opacity:.75}\n.f-rows .fcard h3{grid-column:2;margin:0 0 8px}\n.f-rows .fcard p{grid-column:2;max-width:62ch}\n/* products + gallery tiles.\n   The count comes from the markup (.g-N, chosen by gridCols so it divides the\n   item count where it can) rather than an inline style, so a media query can\n   still lower it. The basis (not a max-width) is what decides where a row wraps,\n   so a full row fills the measure exactly and justify-content centres whatever is\n   left over instead of stranding it against the left edge. */\n.products,.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;--cols:4}\n.g-1{--cols:1}.g-2{--cols:2}.g-3{--cols:3}.g-4{--cols:4}.g-5{--cols:5}\n.pcard,.gtile{flex:0 1 calc((100% - (var(--cols) - 1)*22px)/var(--cols))}\n/* Narrow viewports step the count DOWN per class — Chromium will not divide a\n   calc by a min(), so the ceiling has to be spelled out rather than computed. */\n@media(max-width:1040px){.g-4{--cols:2}.g-5{--cols:3}}\n@media(max-width:720px){.g-3,.g-5{--cols:2}}\n@media(max-width:430px){.g-2,.g-3,.g-4,.g-5{--cols:1}}\n.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}\n.pcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(0,0,0,.7)}\n.pcard__media{position:relative;aspect-ratio:1/1;overflow:hidden}\n.pcard__media img{width:100%;height:100%;object-fit:cover}\n.pcard__badge{position:absolute;top:12px;left:12px;background:var(--accent-btn);color:var(--ink);font-size:.78rem;font-weight:700;letter-spacing:.03em;padding:5px 11px;border-radius:var(--r-pill)}\n.pcard__body{padding:16px 18px 20px}\n.pcard__name{font-weight:600;font-size:1.02rem}\n.pcard__row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}\n.pcard__price{font-weight:700;font-size:1.16rem}\n.pcard__add{font-size:.85rem;font-weight:600;color:var(--accent-text)}\n/* catalogue as ROWS. Two jobs: a tile whose image slot has been removed is a row\n   with extra steps, and \"a raw tracklist table\" had no renderer at all — the\n   nearest thing on offer was an \"Add to cart\" tile, which is what a record label\n   asking for a tracklist got. */\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}\n.ptable{width:100%;border-collapse:collapse}\n.ptable th{text-align:left;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 0 12px;border-bottom:2px solid var(--text)}\n.ptable th:last-child{text-align:right}\n.ptable td{padding:clamp(14px,2vw,20px) 0;border-bottom:1px solid var(--border);vertical-align:baseline}\n.ptable th+th,.ptable td+td{padding-left:clamp(14px,3vw,40px)}\n.ptable__n{width:3ch;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.92rem}\n.ptable__name{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);font-size:clamp(1.05rem,2.2vw,1.5rem)}\n.ptable__badge{margin-left:10px;font-family:var(--font);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--soft);color:var(--soft-ink);padding:3px 8px;border-radius:var(--r-sm);white-space:nowrap}\n.ptable__price{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}\n.glist{list-style:none;border-top:2px solid var(--text)}\n.glist li{display:grid;grid-template-columns:3ch 1fr;gap:clamp(14px,3vw,34px);align-items:baseline;padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid var(--border)}\n.glist__n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.92rem}\n.glist__t{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);font-size:clamp(1.05rem,2.4vw,1.6rem)}\n/* showcase gallery (comic pages / stills — portrait tiles) */\n.gtile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}\n.gtile:hover{transform:translateY(-5px);box-shadow:0 28px 54px -24px var(--glow)}\n.gtile__media{position:relative;aspect-ratio:2/3;overflow:hidden}\n.gtile__media img{width:100%;height:100%;object-fit:cover}\n.gtile__cap{padding:12px 14px;font-size:.92rem;font-weight:600;letter-spacing:-.01em}\n/* features */\n.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px}\n.fcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:30px}\n.fcard__n{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--soft);color:var(--soft-ink);font-weight:700;font-size:.95rem;margin-bottom:18px}\n.fcard h3{margin-bottom:8px}\n.fcard p{font-size:.98rem}\n/* quote */\n.quote{text-align:center;max-width:820px;margin-inline:auto}\n.quote blockquote{font-size:clamp(1.35rem,3vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.32;color:var(--text)}\n.quote__a{margin-top:24px;color:var(--muted);font-size:.95rem}\n/* pricing */\n.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;max-width:1000px;margin-inline:auto}\n.tier{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:16px}\n.tier--featured{border-color:var(--accent);box-shadow:0 30px 60px -30px var(--glow)}\n.tier__name{font-weight:600;color:var(--muted);letter-spacing:.02em}\n.tier__price{font-size:2.6rem;font-weight:800;letter-spacing:-.03em}\n.tier__price span{font-size:1rem;font-weight:500;color:var(--muted)}\n.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;color:var(--muted);font-size:.94rem}\n.tier ul li{padding-left:22px;position:relative}\n.tier ul li::before{content:\"✓\";position:absolute;left:0;color:var(--accent);font-weight:700}\n.tier .btn{margin-top:auto;justify-content:center}\n/* faq accordion */\n.faq{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}\n.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:4px 22px;transition:border-color .15s}\n.faq__item[open]{border-color:var(--border)}\n.faq__item summary{cursor:pointer;list-style:none;font-weight:600;font-size:1.02rem;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;letter-spacing:-.01em}\n.faq__item summary::-webkit-details-marker{display:none}\n.faq__item summary::after{content:\"+\";color:var(--accent);font-weight:400;font-size:1.5rem;line-height:1;transition:transform .2s var(--ease)}\n.faq__item[open] summary::after{transform:rotate(45deg)}\n.faq__item p{color:var(--muted);font-size:.98rem;line-height:1.6;padding:0 0 20px}\n/* link-in-bio */\n.bio{min-height:100vh;display:grid;place-items:center;padding:clamp(2rem,6vw,4rem) 20px;position:relative;overflow:hidden}\n.bio::before{content:\"\";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 0%,var(--glow),transparent 70%);pointer-events:none}\n.bio__inner{position:relative;width:100%;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center}\n.bio__avatar{width:112px;height:112px;border-radius:var(--r-round);overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 50px -20px var(--glow)}\n.bio__avatar img{width:100%;height:100%;object-fit:cover}\n.bio__name{margin-top:22px;font-size:clamp(1.6rem,4vw,2.1rem)}\n.bio__bio{color:var(--muted);margin-top:12px;max-width:40ch}\n.bio__links{margin-top:32px;width:100%;display:flex;flex-direction:column;gap:12px}\n.biolink{display:block;width:100%;padding:17px 22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border);font-weight:600;letter-spacing:-.01em;transition:transform .16s var(--ease),border-color .16s,background .16s}\n.biolink:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--elevated)}\n.bio__foot{margin-top:32px;color:var(--muted);font-size:.82rem}\n/* cta band */\n.ctaband{position:relative;border-radius:var(--r-lg);padding:calc(var(--band)*.85) 24px;text-align:center;overflow:hidden;background:linear-gradient(135deg,var(--surface),var(--elevated));border:1px solid var(--border)}\n.ctaband::before{content:\"\";position:absolute;inset:0;background:radial-gradient(55% 90% at 50% 0%,var(--glow),transparent 70%)}\n.ctaband>*{position:relative}\n.ctaband h2{margin-bottom:14px}\n.ctaband p{max-width:48ch;margin:0 auto 30px;font-size:1.12rem}\n/* footer */\n.footer{border-top:1px solid var(--border);padding-block:calc(var(--band)*.8) 36px;margin-top:var(--band)}\n.footer .wrap{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}\n.footer__brand{font-weight:700;font-size:1.15rem;letter-spacing:-.02em}\n.footer__tag{color:var(--muted);margin-top:12px;font-size:.9rem;max-width:32ch}\n.fcol h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:15px}\n.fcol a{display:flex;align-items:center;min-height:var(--tap);color:var(--muted);font-size:.9rem;padding:5px 0;transition:color .15s}\n.fcol a:hover{color:var(--text)}\n.footer__bottom{border-top:1px solid var(--border);margin-top:44px;padding-top:24px;color:var(--muted);font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}\n@media(max-width:760px){.footer .wrap{grid-template-columns:1fr 1fr}}\n/* logo wall — TEXT wordmarks. There are no logo assets, and inventing an <img>\n   for somebody else's brand is the one thing a generated page must not do. */\n.logos__t{text-align:center;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.14em;\n  text-transform:uppercase;margin-bottom:clamp(20px,2.6vw,32px)}\n.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(18px,3.6vw,54px)}\n.logo{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:.01em;\n  font-size:clamp(1rem,2vw,1.35rem);color:var(--text);opacity:.6;max-width:100%;overflow-wrap:anywhere;\n  transition:opacity .2s var(--ease)}\n.logo:hover{opacity:1}\n/* marquee. The track is WIDER than the viewport on purpose and is clipped by\n   .marq{overflow:hidden} — an element-by-element overflow probe has to skip\n   descendants of a clipping ancestor or it reports this as a defect. Two\n   identical halves plus padding-right on every item (not flex gap) is what makes\n   translateX(-50%) land exactly one period along and loop seamlessly. */\n.marq{overflow:hidden;border-block:1px solid var(--border);padding-block:clamp(14px,1.8vw,22px);--marq-gap:clamp(28px,5vw,64px)}\n.marq__t{display:flex;width:max-content;animation:qk-marq 28s linear infinite}\n.marq__t span{padding-right:var(--marq-gap);white-space:nowrap;font-family:var(--font-display);\n  font-weight:var(--w-display);letter-spacing:var(--track-display);color:var(--text);\n  font-size:calc(clamp(1.15rem,2.6vw,1.9rem)*var(--display-scale))}\n.marq__t span::after{content:\"\\2022\";margin-left:var(--marq-gap);color:var(--accent-text)}\n@keyframes qk-marq{to{transform:translateX(-50%)}}\n@media(prefers-reduced-motion:reduce){.marq__t{animation:none}}\n/* shop — a wide measure and a slightly shorter seam, so the page reads as many\n   small bands rather than a few tall ones. */\nbody.k-shop{--maxw:1280px;--band:clamp(2.6rem,4.2vw,3.75rem)}\n/* multi-page — real routes inside the ONE document. Pages are siblings of the\n   top chrome, never a wrapper around it, so a kind that reaches the <body> grid\n   (k-docs) keeps its sidebar column. */\n.pg[hidden]{display:none}\n[data-nav][aria-current]{color:var(--text)}\n.side__nav [data-nav][aria-current]{background:var(--elevated);color:var(--text)}\n.mast__meta a{white-space:nowrap;transition:color .15s var(--ease)}\n.mast__meta a:hover,.mast__meta [aria-current]{color:var(--text)}\n/* the index chrome's one text link becomes the nav; still one baseline row */\n.idx__nav{display:flex;flex-wrap:wrap;gap:4px 18px;min-width:0}\n.idx__nav a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:.88rem;font-weight:600;\n  color:var(--muted);white-space:nowrap;border-bottom:1px solid transparent;transition:color .15s var(--ease)}\n.idx__nav a:hover{color:var(--text)}\n.idx__nav [aria-current]{color:var(--accent-text);border-bottom-color:currentColor}\n/* The bar HIDES its links under 760px. That was harmless while every link went\n   to \"#top\"; now it is the only way off the opening page, so they WRAP onto\n   their own row instead. Not a horizontal scroller: a scroller the visitor has\n   to discover is the same dead end with an extra step. */\n@media(max-width:760px){\n  .mp .nav .wrap{height:auto;flex-wrap:wrap;row-gap:6px;padding-block:10px}\n  .mp .nav__links{display:flex;flex-wrap:wrap;order:3;flex-basis:100%;gap:4px 18px;min-width:0}\n  .mp .nav__links a{font-size:.86rem;padding:0}\n}\n/* motion + image skeleton */\n@media(prefers-reduced-motion:no-preference){\n  [data-anim]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*70ms)}\n  [data-anim].in{opacity:1;transform:none}\n}\n/* image slot: real photo (png) is opaque and covers the spinner; an unfilled\n   placeholder (svg) is translucent so the spinner shows through = \"image coming\" */\n/* spinner ONLY while the run is in progress (host adds .qk-loading to <body>).\n   A real photo (opaque png) covers it; when the run finishes the class is gone,\n   so it always terminates — an unfilled slot becomes a clean static tile, never a\n   perpetual spinner. */\n.pcard__media::before,.gtile__media::before{content:\"\";position:absolute;top:calc(50% - 17px);left:calc(50% - 17px);width:34px;height:34px;border-radius:var(--r-round);border:3px solid rgba(255,255,255,.16);border-top-color:var(--accent);z-index:0;opacity:0}\n.qk-loading .pcard__media::before,.qk-loading .gtile__media::before{opacity:1;animation:qk-spin .8s linear infinite}\n.pcard__media img,.gtile__media img{position:relative;z-index:1}\n/* NO PER-PRODUCT PHOTOGRAPHS: present the collection as an editorial index rather\n   than as tiles we cannot fill. Measured 2026-09-11 -- 15 of 19 website runs plan a\n   single image, so the tile grid was almost always five empty frames. director.ts\n   strips gal-noimg the moment real product images exist, so this is presentation\n   only and reverses itself; the markup is unchanged either way. */\n.gallery.gal-noimg{display:block;border-top:1px solid var(--border)}\n.gallery.gal-noimg .gtile{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.5vw,28px);align-items:baseline;padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid var(--border)}\n.gallery.gal-noimg .gtile__media{display:none}\n.gallery.gal-noimg .gtile__cap{font-size:clamp(1.05rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.01em}\n.gallery.gal-noimg .gtile::before{content:counter(galn,decimal-leading-zero);counter-increment:galn;font-size:.78rem;font-weight:600;letter-spacing:.16em;color:var(--muted);opacity:.75}\n.gallery.gal-noimg{counter-reset:galn}\n.qk-loading img[src^=\"data:image/svg\"]{opacity:.55}\n@keyframes qk-spin{to{transform:rotate(360deg)}}\n</style>\n</head>\n<body class=\"h-split f-rows k-shop mp\">\n<nav class=\"nav\"><div class=\"wrap\">\n  <a class=\"nav__brand\" href=\"#/home\">Toy Feet</a>\n  <div class=\"nav__links\"><a href=\"#/home\" data-nav=\"home\">Home</a><a href=\"#/shop\" data-nav=\"shop\">Shop</a></div>\n  <a class=\"btn btn--primary\" href=\"#top\">Shop the Drop</a>\n</div></nav>\n<main class=\"pg\" data-pg=\"home\" data-title=\"Home\">\n<header class=\"hero\" id=\"top\"><div class=\"wrap\">\n  <div class=\"hero__copy\" data-anim>\n    <span class=\"eyebrow\">New Drop: The Cloud Collection</span>\n    <h1 style=\"margin-top:16px\">Collectible feet for your collection</h1>\n    <p class=\"hero__sub\">Whimsical, high-quality novelty feet that bring a smile to every shelf.</p>\n    <div class=\"hero__cta\">\n      <a class=\"btn btn--primary\" href=\"#top\">Shop the Drop</a>\n      <a class=\"btn btn--ghost\" href=\"#features\">View Lookbook</a>\n    </div>\n  </div>\n  <div class=\"hero__media\" data-anim style=\"--i:1\"><img data-hero-fill src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20800%20600'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.38'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(128%2C51%2C125)'%20stop-opacity%3D'.20'%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D'r'%20cx%3D'.7'%20cy%3D'.25'%20r%3D'.7'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'.55'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'800'%20height%3D'600'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'800'%20height%3D'600'%20fill%3D'url(%23g)'%2F%3E%3Cg%20transform%3D'translate(400%20300)%20scale(1.9)%20translate(-200%20-218)'%20opacity%3D'.55'%3E%3Cdefs%3E%3Cpattern%20id%3D'h58'%20width%3D'34'%20height%3D'34'%20patternUnits%3D'userSpaceOnUse'%3E%3Ccircle%20cx%3D'17'%20cy%3D'17'%20r%3D'2.4'%20fill%3D'rgba(255%2C102%2C178%2C.26)'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20x%3D'-80'%20y%3D'-80'%20width%3D'560'%20height%3D'560'%20fill%3D'url(%23h58)'%2F%3E%3C%2Fg%3E%3Crect%20width%3D'800'%20height%3D'600'%20fill%3D'url(%23r)'%2F%3E%3C%2Fsvg%3E\" alt=\"Toy Feet\"></div>\n</div></header>\n<section><div class=\"marq\">\n  <div class=\"marq__t\"><span>Free Shipping Over $50</span><span>Whimsy Guaranteed</span><span>Support Small Business</span><span aria-hidden=\"true\">Free Shipping Over $50</span><span aria-hidden=\"true\">Whimsy Guaranteed</span><span aria-hidden=\"true\">Support Small Business</span></div>\n</div></section>\n<section class=\"wrap\" id=\"features\"><div class=\"shead\" data-anim>\n    <span class=\"eyebrow\">Why Toy Feet?</span><h2>Not just a foot, a feeling</h2>\n    <p>We craft joy in every stitch and mold.</p>\n  </div>\n  <div class=\"features\"><div class=\"fcard\" data-anim style=\"--i:0\">\n    <div class=\"fcard__n\">01</div><h3>Whimsical Design</h3><p>Every pair is designed to spark joy and conversation.</p>\n  </div><div class=\"fcard\" data-anim style=\"--i:1\">\n    <div class=\"fcard__n\">02</div><h3>Premium Quality</h3><p>Durable materials built to last through years of collecting.</p>\n  </div><div class=\"fcard\" data-anim style=\"--i:2\">\n    <div class=\"fcard__n\">03</div><h3>Fast Shipping</h3><p>We pack with care and ship quickly to your door.</p>\n  </div></div>\n</section>\n<section class=\"wrap\"><div class=\"quote\" data-anim>\n  <blockquote>&ldquo;I&#39;ve never seen feet so cute! They are the highlight of my office desk.&rdquo;</blockquote>\n  <div class=\"quote__a\">Sarah J., Collector</div>\n</div></section>\n<section class=\"wrap\" data-anim>\n  <div class=\"logos__t\">Trusted by collectors</div>\n  <div class=\"logos\"><span class=\"logo\">Toy Collector Monthly</span><span class=\"logo\">Quirky Gifts Blog</span><span class=\"logo\">The Daily Novelty</span></div>\n</section>\n<section class=\"wrap\"><div class=\"ctaband\" data-anim>\n  <h2>Ready to step up your collection?</h2><p>Join our newsletter for exclusive drops and 10% off your first order.</p>\n  <a class=\"btn btn--primary\" href=\"#top\">Get 10% Off</a>\n</div></section>\n</main>\n<main class=\"pg\" data-pg=\"shop\" data-title=\"Shop\" hidden>\n<section class=\"wrap\"><div class=\"shead\" data-anim>\n    <span class=\"eyebrow\">The Collection</span><h2>Find your perfect pair</h2>\n  </div>\n  <div class=\"products g-4\"><article class=\"pcard\" data-anim style=\"--i:0\">\n    <div class=\"pcard__media\"><img data-product-fill=\"0\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp018'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp018)'%2F%3E%3Cg%20transform%3D'rotate(0%20200%20200)'%3E%3Cdefs%3E%3Cpattern%20id%3D'p018'%20width%3D'34'%20height%3D'34'%20patternUnits%3D'userSpaceOnUse'%3E%3Ccircle%20cx%3D'17'%20cy%3D'17'%20r%3D'2.4'%20fill%3D'rgba(255%2C102%2C178%2C.34)'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20x%3D'-80'%20y%3D'-80'%20width%3D'560'%20height%3D'560'%20fill%3D'url(%23p018)'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E\" alt=\"The Classic Plush\" loading=\"lazy\"><span class=\"pcard__badge\">Bestseller</span></div>\n    <div class=\"pcard__body\">\n      <div class=\"pcard__name\">The Classic Plush</div>\n      <div class=\"pcard__row\"><span class=\"pcard__price\">$24</span><span class=\"pcard__add\">Add to cart</span></div>\n    </div>\n  </article><article class=\"pcard\" data-anim style=\"--i:1\">\n    <div class=\"pcard__media\"><img data-product-fill=\"1\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp114'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp114)'%2F%3E%3Cg%20transform%3D'rotate(2.5%20200%20200)'%3E%3Cg%20stroke%3D'rgba(255%2C102%2C178%2C.34)'%20stroke-width%3D'1.4'%3E%3Cline%20x1%3D'-80'%20y1%3D'76'%20x2%3D'480'%20y2%3D'76'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'116'%20x2%3D'480'%20y2%3D'116'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'148'%20x2%3D'480'%20y2%3D'148'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'174'%20x2%3D'480'%20y2%3D'174'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'196'%20x2%3D'480'%20y2%3D'196'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'214'%20x2%3D'480'%20y2%3D'214'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'230'%20x2%3D'480'%20y2%3D'230'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'246'%20x2%3D'480'%20y2%3D'246'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'266'%20x2%3D'480'%20y2%3D'266'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'294'%20x2%3D'480'%20y2%3D'294'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'332'%20x2%3D'480'%20y2%3D'332'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E\" alt=\"Rubber Duck Duo\" loading=\"lazy\"></div>\n    <div class=\"pcard__body\">\n      <div class=\"pcard__name\">Rubber Duck Duo</div>\n      <div class=\"pcard__row\"><span class=\"pcard__price\">$18</span><span class=\"pcard__add\">Add to cart</span></div>\n    </div>\n  </article><article class=\"pcard\" data-anim style=\"--i:2\">\n    <div class=\"pcard__media\"><img data-product-fill=\"2\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp295'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp295)'%2F%3E%3Cg%20transform%3D'rotate(-2.5%20200%20200)'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C102%2C178%2C.34)'%20stroke-width%3D'1.4'%3E%3Ccircle%20cx%3D'152'%20cy%3D'192'%20r%3D'104'%2F%3E%3Crect%20x%3D'152'%20y%3D'140'%20width%3D'188'%20height%3D'188'%20rx%3D'18'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E\" alt=\"Mini Doll Set\" loading=\"lazy\"></div>\n    <div class=\"pcard__body\">\n      <div class=\"pcard__name\">Mini Doll Set</div>\n      <div class=\"pcard__row\"><span class=\"pcard__price\">$12</span><span class=\"pcard__add\">Add to cart</span></div>\n    </div>\n  </article><article class=\"pcard\" data-anim style=\"--i:3\">\n    <div class=\"pcard__media\"><img data-product-fill=\"3\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp337'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp337)'%2F%3E%3Cg%20transform%3D'rotate(2.5%20200%20200)'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C102%2C178%2C.34)'%20stroke-width%3D'1.4'%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'58'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'106'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'154'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'202'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'250'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'298'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E\" alt=\"Giant Cloud\" loading=\"lazy\"><span class=\"pcard__badge\">Limited</span></div>\n    <div class=\"pcard__body\">\n      <div class=\"pcard__name\">Giant Cloud</div>\n      <div class=\"pcard__row\"><span class=\"pcard__price\">$45</span><span class=\"pcard__add\">Add to cart</span></div>\n    </div>\n  </article></div>\n</section>\n</main>\n<footer class=\"footer\"><div class=\"wrap\">\n  <div><div class=\"footer__brand\">Toy Feet</div><p class=\"footer__tag\">Toy Feet: Collecting joy, one pair at a time.</p></div>\n  <div class=\"fcol\"><h4>Shop</h4><a href=\"#\">All Products</a><a href=\"#\">New Arrivals</a><a href=\"#\">Bestsellers</a><a href=\"#\">Gift Cards</a></div><div class=\"fcol\"><h4>Company</h4><a href=\"#\">About Us</a><a href=\"#\">Our Story</a><a href=\"#\">Careers</a><a href=\"#\">Press</a></div><div class=\"fcol\"><h4>Support</h4><a href=\"#\">Contact Us</a><a href=\"#\">Shipping Info</a><a href=\"#\">Returns</a><a href=\"#\">FAQ</a></div>\n</div><div class=\"wrap footer__bottom\">\n  <span>&copy; 2026 Toy Feet. All rights reserved.</span>\n  <span>Built on Own1 &middot; Qiki</span>\n</div></footer>\n<script>\n(()=>{const io=new IntersectionObserver(es=>es.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.12});\ndocument.querySelectorAll('[data-anim]').forEach(el=>io.observe(el));})();\n</script>\n<script>\n(()=>{const ps=[...document.querySelectorAll('.pg')];if(ps.length<2)return;\nconst ids=ps.map(p=>p.dataset.pg),base=document.title;\nconst go=(id,top)=>{if(ids.indexOf(id)<0)id=ids[0];\n ps.forEach(p=>{p.hidden=p.dataset.pg!==id});\n document.querySelectorAll('[data-nav]').forEach(a=>{a.dataset.nav===id?a.setAttribute('aria-current','page'):a.removeAttribute('aria-current')});\n const l=ps[ids.indexOf(id)].dataset.title;\n document.title=id===ids[0]||!l?base:base+' \\u2014 '+l;\n if(top)scrollTo({top:0,behavior:'instant'})};\nconst route=first=>{const h=location.hash;\n if(h.slice(0,2)==='#/')return go(h.slice(2).toLowerCase().replace(/[^a-z0-9-].*/,'')||ids[0],!first);\n /* No fragment is the opening page — and this has to hold on EVERY call, not\n    just the first: going Back from #/about to the bare url is a hashchange to\n    \"\", and a first-only rule leaves the visitor staring at the page they just\n    left with the Back button apparently broken. */\n if(!h||h==='#')return go(ids[0],!first);\n /* Any other fragment is an element link (#top, #features, #faq) whose target\n    may sit on a hidden page. Switch to that page first, or every in-page link\n    on the site is dead the moment you are not already on the page owning it. */\n const el=document.getElementById(decodeURIComponent(h.slice(1)));\n if(el){const p=el.closest('.pg');if(p&&p.hidden)go(p.dataset.pg,0);el.scrollIntoView();return}\n if(first)go(ids[0],0)};\n/* Fragment links are DRIVEN, not left to the browser. Measured in Chromium: a\n   srcdoc document's url is \"about:srcdoc\" but its BASE url is inherited from the\n   parent, so <a href=\"#/menu\"> resolves against the PARENT and the click takes\n   the iframe clean off the document — QikiOverlay's preview would navigate to\n   the Qiki app inside itself. Assigning location.hash is a same-document\n   navigation in all three environments (file://, srcdoc, the /preview CSP) and\n   still pushes the history entry Back needs. pushState is not an option at all:\n   it throws SecurityError on both the opaque-origin iframe and file://. */\naddEventListener('click',ev=>{\n if(ev.defaultPrevented||ev.button||ev.metaKey||ev.ctrlKey||ev.shiftKey||ev.altKey)return;\n const a=ev.target.closest&&ev.target.closest('a[href^=\"#\"]');if(!a)return;\n const h=a.getAttribute('href');ev.preventDefault();\n if(h==='#')return;                      /* placeholder links stay inert */\n location.hash===h?route(0):location.hash=h});\naddEventListener('hashchange',()=>route(0));route(1);})();\n</script>\n</body>\n</html>",
        "fromFallback": false,
        "llmAuthored": true,
        "charCount": 42752,
        "accent": "#FF66B2",
        "brand": "Toy Feet",
        "isShop": true,
        "isShowcase": false,
        "wantsPricing": false,
        "mode": "shop",
        "kind": "shop",
        "compositionMode": "skeleton",
        "content": {
          "brand": "Toy Feet",
          "stats": [
            {
              "value": "10,000+",
              "label": "Feet shipped worldwide"
            },
            {
              "value": "500+",
              "label": "Unique designs created"
            }
          ],
          "logos": [
            {
              "name": "Toy Collector Monthly"
            },
            {
              "name": "Quirky Gifts Blog"
            },
            {
              "name": "The Daily Novelty"
            }
          ],
          "steps": [],
          "team": [],
          "menu": [],
          "schedule": [],
          "compare": {
            "plans": [],
            "rows": []
          },
          "bento": [],
          "tabs": [],
          "location": {
            "address": [],
            "hours": []
          },
          "cases": [],
          "marquee": [
            "Free Shipping Over $50",
            "Whimsy Guaranteed",
            "Support Small Business"
          ],
          "accent": "#FF66B2",
          "nav": [
            "Shop",
            "About",
            "FAQ"
          ],
          "hero": {
            "eyebrow": "New Drop: The Cloud Collection",
            "headline": "Collectible feet for your collection",
            "sub": "Whimsical, high-quality novelty feet that bring a smile to every shelf.",
            "primaryCta": "Shop the Drop",
            "secondaryCta": "View Lookbook"
          },
          "products": [
            {
              "name": "The Classic Plush",
              "price": "$24",
              "badge": "Bestseller"
            },
            {
              "name": "Rubber Duck Duo",
              "price": "$18"
            },
            {
              "name": "Mini Doll Set",
              "price": "$12"
            },
            {
              "name": "Giant Cloud",
              "price": "$45",
              "badge": "Limited"
            }
          ],
          "gallery": [],
          "links": [],
          "faqs": [
            {
              "q": "Are these safe for kids?",
              "a": "Yes, our plush and rubber products are non-toxic and tested for safety."
            },
            {
              "q": "Do you ship internationally?",
              "a": "We ship to over 50 countries with tracking included on all orders."
            },
            {
              "q": "Can I return a defective item?",
              "a": "Absolutely. Contact us within 30 days for a free replacement or refund."
            }
          ],
          "tiers": [],
          "featuresHead": {
            "eyebrow": "Why Toy Feet?",
            "title": "Not just a foot, a feeling",
            "sub": "We craft joy in every stitch and mold."
          },
          "heads": {
            "products": {
              "eyebrow": "The Collection",
              "title": "Find your perfect pair"
            },
            "faq": {
              "eyebrow": "Got Questions?",
              "title": "We have answers"
            },
            "logos": {
              "eyebrow": "As seen in",
              "title": "Trusted by collectors"
            }
          },
          "plan": [
            "hero",
            "products",
            "marquee",
            "features",
            "quote",
            "logos",
            "cta"
          ],
          "kind": "shop",
          "pages": [
            {
              "id": "home",
              "label": "Home"
            },
            {
              "id": "shop",
              "label": "Shop"
            },
            {
              "id": "about",
              "label": "About"
            }
          ],
          "design": {
            "font": "humanist",
            "scheme": "light",
            "radius": "round",
            "hero": "split",
            "products": "tiles",
            "typeScale": "normal",
            "paper": "#FFF5F7"
          },
          "constraints": {
            "images": true
          },
          "features": [
            {
              "title": "Whimsical Design",
              "body": "Every pair is designed to spark joy and conversation."
            },
            {
              "title": "Premium Quality",
              "body": "Durable materials built to last through years of collecting."
            },
            {
              "title": "Fast Shipping",
              "body": "We pack with care and ship quickly to your door."
            }
          ],
          "testimonial": {
            "quote": "I've never seen feet so cute! They are the highlight of my office desk.",
            "author": "Sarah J., Collector"
          },
          "cta": {
            "headline": "Ready to step up your collection?",
            "sub": "Join our newsletter for exclusive drops and 10% off your first order.",
            "button": "Get 10% Off"
          },
          "footer": {
            "tagline": "Toy Feet: Collecting joy, one pair at a time.",
            "columns": [
              {
                "title": "Shop",
                "links": [
                  "All Products",
                  "New Arrivals",
                  "Bestsellers",
                  "Gift Cards"
                ]
              },
              {
                "title": "Company",
                "links": [
                  "About Us",
                  "Our Story",
                  "Careers",
                  "Press"
                ]
              },
              {
                "title": "Support",
                "links": [
                  "Contact Us",
                  "Shipping Info",
                  "Returns",
                  "FAQ"
                ]
              }
            ]
          }
        }
      },
      "produces": {
        "siteHtml": "<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>Toy Feet</title>\n  <style>\n*{box-sizing:border-box;margin:0;padding:0}\n:root{\n  --bg:#FFF5F7;--surface:#fff6f7;--elevated:#ede4e6;\n  --text:#0a0a0a;--muted:#717171;--border:rgba(10,10,10,0.2);\n  --accent:#FF66B2;--accent-btn:#FF66B2;--accent-text:#b74980;--ink:#0a0a0a;--glow:rgba(255,102,178,0.20);--soft:rgba(255,102,178,0.13);\n  /* Foreground for anything painted on --soft. See the derivation above: a token\n     computed against --bg is not valid on a tinted surface. */\n  --soft-ink:#a84376;\n  /* Minimum comfortable hit area. Referenced by every interactive rule so a\n     tap target can never regress below the 44px WCAG/iOS floor. */\n  --tap:44px;\n  /* Translucent chrome derived from the direction's own background. Hardcoding\n     rgba(10,10,11,.62) here put dark text on a dark nav (1.08:1) the moment a\n     light direction shipped. */\n  --nav-bg:rgba(255,245,247,0.72);--hairline:rgba(0,0,0,.14);\n  --font:Optima,Candara,'Segoe UI','Trebuchet MS',system-ui,sans-serif;\n  --font-display:Optima,Candara,'Segoe UI','Trebuchet MS',system-ui,sans-serif;\n  --w-display:300;--w-body:400;\n  --track-display:-.015em;\n  --texture:none;\n  /* Display type scale. Multiplies every heading clamp, so \"giant typography\"\n     is one number rather than six font-size rules that can drift apart. */\n  --display-scale:1.3;\n  --maxw:1200px;--r:18px;--r-lg:30px;--ease:cubic-bezier(.4,0,.2,1);\n  /* Derived corners. Chips, badges, focus rings and avatars used to hard-code\n     999px/50%/6px, so \"no rounded corners anywhere\" left 14 radius rules\n     standing even once --r was 0. One switch, so flat means flat. */\n  --r-sm:6px;--r-pill:999px;--r-round:50%;\n  color-scheme:light;\n}\n/* Vertical rhythm. Every seam used to be TWO stacked paddings — 96px off the\n   band above plus 96px off the band below = a 192px gutter at 1440, ~8 of them\n   on a page carrying ~2,400px of content. One token owns the seam now and only\n   the band BELOW pays for it, so spacing can never compound, and a band with\n   little to say (a one-line testimonial) is the height of its content. */\n:root{--band:clamp(3rem,5vw,4.5rem)}\nhtml{scroll-behavior:smooth}\nbody{background-color:var(--bg);background-image:var(--texture);background-repeat:no-repeat;background-attachment:fixed;color:var(--text);font-family:var(--font);font-weight:var(--w-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}\n/* Staggered page-load reveal. Absent motion is one of the named AI-slop\n   tells; 0.1s increments read as intentional rather than decorative.\n   Honoured only when the visitor has not asked for reduced motion. */\n@media (prefers-reduced-motion:no-preference){\n  section,header{animation:qk-rise .55s var(--ease) both}\n  section:nth-of-type(1){animation-delay:.05s}section:nth-of-type(2){animation-delay:.15s}\n  section:nth-of-type(3){animation-delay:.25s}section:nth-of-type(4){animation-delay:.35s}\n  section:nth-of-type(n+5){animation-delay:.45s}\n  @keyframes qk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}\n}\nimg{max-width:100%;display:block}\na{color:inherit;text-decoration:none}\np{color:var(--muted)}\nh1,h2,h3,.nav__brand,.footer__brand{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);line-height:1.08;color:var(--text);overflow-wrap:break-word}\nh1{font-size:calc(clamp(2.5rem,6vw,4.25rem)*var(--display-scale))}\nh2{font-size:calc(clamp(2rem,4vw,3rem)*var(--display-scale))}\nh3{font-size:calc(clamp(1.1rem,2vw,1.35rem)*var(--display-scale));letter-spacing:-.02em}\n.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}\nsection{padding-block:var(--band) 0}\n/* Visually-hidden label for the comparison matrix's empty corner cell — a <th>\n   with no text is a column no screen reader can name. */\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}\n.shead{max-width:640px;margin-bottom:calc(var(--band)*.62)}\n.shead h2{margin-top:12px}\n.shead p{margin-top:14px;font-size:1.1rem}\n/* WCAG 2.4.7. The template shipped with no focus styles at all, so a keyboard\n   user had no visible position on any generated site. --accent-text is used\n   rather than --accent because the ring must clear the near-black background. */\n:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:var(--r-sm)}\n:focus:not(:focus-visible){outline:none}\n.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;min-height:var(--tap);border-radius:var(--r);font-weight:600;font-size:.95rem;transition:transform .15s var(--ease),box-shadow .2s var(--ease);cursor:pointer}\n.btn--primary{background:var(--accent-btn);color:var(--ink);box-shadow:0 10px 30px -10px var(--glow)}\n.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px var(--glow)}\n.btn--ghost{border:1px solid var(--border);color:var(--text)}\n.btn--ghost:hover{background:var(--surface);border-color:var(--hairline)}\n/* nav */\n.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--nav-bg);border-bottom:1px solid var(--border)}\n.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}\n.nav__brand{font-weight:700;font-size:1.18rem;letter-spacing:-.03em;display:inline-flex;align-items:center;min-height:var(--tap)}\n.nav__links{display:flex;gap:30px;align-items:center}\n.nav__links a{color:var(--muted);font-size:.92rem;font-weight:500;transition:color .15s;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 4px}\n.nav__links a:hover{color:var(--text)}\n@media(max-width:760px){.nav__links{display:none}}\n/* hero */\n.hero{position:relative;padding-top:calc(var(--band)*1.35);overflow:hidden}\n.hero::before{content:\"\";position:absolute;inset:0;background:radial-gradient(58% 55% at 72% 12%,var(--glow),transparent 70%);pointer-events:none}\n.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}\n.hero__sub{font-size:1.18rem;margin:22px 0 34px;max-width:50ch}\n.hero__cta{display:flex;gap:14px;flex-wrap:wrap}\n.hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}\n@media(max-width:840px){.hero .wrap{grid-template-columns:1fr}.hero__media{order:-1}.hero__media img{aspect-ratio:16/10}}\n/* ON A PHONE, STOP OVERLAYING ALTOGETHER. h-bleed keeps the photo as a backdrop at\n   every width, and at 390px the headline, sub-copy and both buttons all sit on the\n   busiest part of it -- measured worst-element contrast 1.11:1, i.e. invisible.\n   Scrims only got it to 2.05:1: there is not enough room to darken the plate and\n   still show the photograph. Putting the image back in flow below the text makes\n   the question moot -- the copy sits on the page colour, which the palette already\n   guarantees, and the photo reads better as a card than as a wash. Verified by\n   rendering at 390x844. */\n@media(max-width:840px){\n  .h-bleed .hero__media{position:relative;inset:auto;z-index:0;opacity:1;order:1;margin-top:clamp(20px,5vw,32px)}\n  .h-bleed .hero__media::after{display:none}\n  .h-bleed .hero__media img{aspect-ratio:16/10;border-radius:var(--r-lg)}\n}\n/* ── LAYOUT VARIANTS ────────────────────────────────────────────────────────\n   Same skeletons, different arrangement. Without these, six directions were six\n   palettes over ONE identical floorplan — which is what the \"AI slop\" research\n   actually objects to, and no amount of colour fixes it.\n\n   2026-09-11: this whole block was INSIDE the @media(max-width:840px) above it —\n   that rule opened a brace and the closing pair only arrived at the end of\n   .f-rows, ~30 rules later. So every variant applied on phones and NONE of them\n   at 1440: the six directions really were one floorplan on desktop, and the fix\n   for that shipped inert. Verified by brace depth, not by reading — the stray\n   brace is invisible in a diff. */\n.h-stacked .hero .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}\n.h-stacked .hero__sub{margin-inline:auto}\n.h-stacked .hero__cta{justify-content:center}\n.h-stacked .hero__media{order:1;width:100%;margin-top:clamp(28px,4vw,48px)}\n.h-stacked .hero__media img{width:100%}\n/* editorial: headline runs the full measure, image is an inline figure beside\n   the standfirst — magazine, not SaaS marketing page. */\n.h-editorial .hero .wrap{grid-template-columns:1fr;gap:0}\n.h-editorial .hero__copy h1{max-width:16ch;font-size:clamp(2.8rem,7.5vw,5.5rem)}\n.h-editorial .hero__media{order:1;float:right;width:min(44%,460px);margin:0 0 24px 40px}\n.h-editorial .hero__sub{max-width:52ch;font-size:1.24rem}\n@media (max-width:720px){.h-editorial .hero__media{float:none;width:100%;margin:24px 0 0}}\n/* bleed: image sits behind the copy. */\n.h-bleed .hero{isolation:isolate}\n.h-bleed .hero .wrap{grid-template-columns:1fr;min-height:min(78vh,640px);align-content:center}\n.h-bleed .hero__media{position:absolute;inset:0;order:0;z-index:-1;opacity:.55}\n/* h-bleed puts the headline ON the photo. Without a scrim the sub-copy and eyebrow\n   vanish into it -- measured 2026-09-11 on a live kiln-studio build: mean local\n   contrast 2.42:1, well under AA, and the body copy was unreadable over the fire.\n   The scrim is the PAGE'S OWN --bg, densest under the text column and fading across\n   the image, so it works on any palette light or dark and needs no colour maths\n   (Lightning CSS mangles multi-argument colour functions). 2.42:1 -> 5.43:1. */\n.h-bleed .hero__media::after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 34%,transparent 76%)}\n.h-bleed .hero__media img{width:100%;height:100%;object-fit:cover}\n.h-bleed .hero__copy{max-width:44ch}\n/* type: a different COMPOSITION, not another skin. split/stacked/editorial/bleed\n   are four dressings of one floorplan (eyebrow → headline → sub → two buttons →\n   one image), so a brief that says \"no hero image at all\" had nowhere to land.\n   This one has no media slot in the markup — the rule and the word-marks carry\n   the band instead. */\n.h-type .hero::before{display:none}\n/* minmax(0,1fr), not 1fr: a plain fr track keeps a min-content floor, so a 62px\n   headline whose longest word measures 400px silently widens the grid past a\n   390 viewport. body{overflow-x:hidden} then CLIPS it, which is why a\n   scrollWidth check reports the page clean while the word is cut in half. */\n.h-type .hero .wrap{grid-template-columns:minmax(0,1fr);gap:0}\n.h-type .hero__copy h1{font-size:calc(clamp(2.1rem,9.2vw,7.5rem)*var(--display-scale));max-width:15ch;margin-top:clamp(14px,2vw,26px)}\n.h-type .hero__sub{font-size:clamp(1.1rem,1.8vw,1.4rem);max-width:46ch}\n.hero__rule{height:2px;background:var(--text);opacity:.85;margin:clamp(30px,4vw,52px) 0 clamp(16px,2vw,24px)}\n.hero__marks{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(12px,2.4vw,30px);font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}\n.hero__marks li{white-space:nowrap}\n/* panel: colour-block split. The headline sits INSIDE a painted block that runs\n   to the page edge; the pitch and the buttons live in the other half. */\n.h-panel .hero{padding-top:0}\n.h-panel .hero::before{display:none}\n.h-panel .hero .wrap{max-width:none;padding-inline:0;grid-template-columns:1.02fr .98fr;gap:0;align-items:stretch}\n/* The block bleeds to the viewport edge but its TEXT lines up with the measure\n   every other band uses, or the page reads as two unrelated documents. */\n.h-panel .hero__block{background:var(--accent-btn);color:var(--ink);display:flex;flex-direction:column;justify-content:center;\n  padding:clamp(44px,7vw,104px) clamp(28px,4vw,56px) clamp(44px,7vw,104px) max(24px,calc((100vw - var(--maxw))/2 + 24px))}\n.h-panel .hero__block h1{color:var(--ink);max-width:14ch}\n.h-panel .hero__block .eyebrow{color:var(--ink);opacity:.78}\n.h-panel .hero__side{display:flex;flex-direction:column;justify-content:center;gap:26px;\n  padding:clamp(36px,6vw,88px) max(24px,calc((100vw - var(--maxw))/2 + 24px)) clamp(36px,6vw,88px) clamp(28px,4vw,56px)}\n.h-panel .hero__side .hero__sub{margin:0}\n.h-panel .hero__media img{aspect-ratio:16/10}\n@media(max-width:840px){.h-panel .hero .wrap{grid-template-columns:1fr}}\n/* rows: numbered editorial rows with hairlines instead of cards. */\n.f-rows .features{display:block}\n/* row-gap stays tight: the column gap wants to be generous, but applying the\n   same figure between the h3 and its own paragraph opened a 40px hole inside\n   every row. Invisible until the variants started applying at 1440. */\n.f-rows .fcard{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(18px,3vw,40px);row-gap:6px;align-items:start;\n  background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:clamp(22px,3vw,34px) 0}\n.f-rows .fcard:last-child{border-bottom:1px solid var(--border)}\n.f-rows .fcard__n{width:auto;height:auto;background:none;border-radius:0;margin:0;\n  font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--accent-text);opacity:.75}\n.f-rows .fcard h3{grid-column:2;margin:0 0 8px}\n.f-rows .fcard p{grid-column:2;max-width:62ch}\n/* products + gallery tiles.\n   The count comes from the markup (.g-N, chosen by gridCols so it divides the\n   item count where it can) rather than an inline style, so a media query can\n   still lower it. The basis (not a max-width) is what decides where a row wraps,\n   so a full row fills the measure exactly and justify-content centres whatever is\n   left over instead of stranding it against the left edge. */\n.products,.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;--cols:4}\n.g-1{--cols:1}.g-2{--cols:2}.g-3{--cols:3}.g-4{--cols:4}.g-5{--cols:5}\n.pcard,.gtile{flex:0 1 calc((100% - (var(--cols) - 1)*22px)/var(--cols))}\n/* Narrow viewports step the count DOWN per class — Chromium will not divide a\n   calc by a min(), so the ceiling has to be spelled out rather than computed. */\n@media(max-width:1040px){.g-4{--cols:2}.g-5{--cols:3}}\n@media(max-width:720px){.g-3,.g-5{--cols:2}}\n@media(max-width:430px){.g-2,.g-3,.g-4,.g-5{--cols:1}}\n.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}\n.pcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(0,0,0,.7)}\n.pcard__media{position:relative;aspect-ratio:1/1;overflow:hidden}\n.pcard__media img{width:100%;height:100%;object-fit:cover}\n.pcard__badge{position:absolute;top:12px;left:12px;background:var(--accent-btn);color:var(--ink);font-size:.78rem;font-weight:700;letter-spacing:.03em;padding:5px 11px;border-radius:var(--r-pill)}\n.pcard__body{padding:16px 18px 20px}\n.pcard__name{font-weight:600;font-size:1.02rem}\n.pcard__row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}\n.pcard__price{font-weight:700;font-size:1.16rem}\n.pcard__add{font-size:.85rem;font-weight:600;color:var(--accent-text)}\n/* catalogue as ROWS. Two jobs: a tile whose image slot has been removed is a row\n   with extra steps, and \"a raw tracklist table\" had no renderer at all — the\n   nearest thing on offer was an \"Add to cart\" tile, which is what a record label\n   asking for a tracklist got. */\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}\n.ptable{width:100%;border-collapse:collapse}\n.ptable th{text-align:left;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 0 12px;border-bottom:2px solid var(--text)}\n.ptable th:last-child{text-align:right}\n.ptable td{padding:clamp(14px,2vw,20px) 0;border-bottom:1px solid var(--border);vertical-align:baseline}\n.ptable th+th,.ptable td+td{padding-left:clamp(14px,3vw,40px)}\n.ptable__n{width:3ch;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.92rem}\n.ptable__name{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);font-size:clamp(1.05rem,2.2vw,1.5rem)}\n.ptable__badge{margin-left:10px;font-family:var(--font);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--soft);color:var(--soft-ink);padding:3px 8px;border-radius:var(--r-sm);white-space:nowrap}\n.ptable__price{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}\n.glist{list-style:none;border-top:2px solid var(--text)}\n.glist li{display:grid;grid-template-columns:3ch 1fr;gap:clamp(14px,3vw,34px);align-items:baseline;padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid var(--border)}\n.glist__n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.92rem}\n.glist__t{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);font-size:clamp(1.05rem,2.4vw,1.6rem)}\n/* showcase gallery (comic pages / stills — portrait tiles) */\n.gtile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}\n.gtile:hover{transform:translateY(-5px);box-shadow:0 28px 54px -24px var(--glow)}\n.gtile__media{position:relative;aspect-ratio:2/3;overflow:hidden}\n.gtile__media img{width:100%;height:100%;object-fit:cover}\n.gtile__cap{padding:12px 14px;font-size:.92rem;font-weight:600;letter-spacing:-.01em}\n/* features */\n.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px}\n.fcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:30px}\n.fcard__n{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--soft);color:var(--soft-ink);font-weight:700;font-size:.95rem;margin-bottom:18px}\n.fcard h3{margin-bottom:8px}\n.fcard p{font-size:.98rem}\n/* quote */\n.quote{text-align:center;max-width:820px;margin-inline:auto}\n.quote blockquote{font-size:clamp(1.35rem,3vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.32;color:var(--text)}\n.quote__a{margin-top:24px;color:var(--muted);font-size:.95rem}\n/* pricing */\n.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;max-width:1000px;margin-inline:auto}\n.tier{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:16px}\n.tier--featured{border-color:var(--accent);box-shadow:0 30px 60px -30px var(--glow)}\n.tier__name{font-weight:600;color:var(--muted);letter-spacing:.02em}\n.tier__price{font-size:2.6rem;font-weight:800;letter-spacing:-.03em}\n.tier__price span{font-size:1rem;font-weight:500;color:var(--muted)}\n.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;color:var(--muted);font-size:.94rem}\n.tier ul li{padding-left:22px;position:relative}\n.tier ul li::before{content:\"✓\";position:absolute;left:0;color:var(--accent);font-weight:700}\n.tier .btn{margin-top:auto;justify-content:center}\n/* faq accordion */\n.faq{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}\n.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:4px 22px;transition:border-color .15s}\n.faq__item[open]{border-color:var(--border)}\n.faq__item summary{cursor:pointer;list-style:none;font-weight:600;font-size:1.02rem;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;letter-spacing:-.01em}\n.faq__item summary::-webkit-details-marker{display:none}\n.faq__item summary::after{content:\"+\";color:var(--accent);font-weight:400;font-size:1.5rem;line-height:1;transition:transform .2s var(--ease)}\n.faq__item[open] summary::after{transform:rotate(45deg)}\n.faq__item p{color:var(--muted);font-size:.98rem;line-height:1.6;padding:0 0 20px}\n/* link-in-bio */\n.bio{min-height:100vh;display:grid;place-items:center;padding:clamp(2rem,6vw,4rem) 20px;position:relative;overflow:hidden}\n.bio::before{content:\"\";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 0%,var(--glow),transparent 70%);pointer-events:none}\n.bio__inner{position:relative;width:100%;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center}\n.bio__avatar{width:112px;height:112px;border-radius:var(--r-round);overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 50px -20px var(--glow)}\n.bio__avatar img{width:100%;height:100%;object-fit:cover}\n.bio__name{margin-top:22px;font-size:clamp(1.6rem,4vw,2.1rem)}\n.bio__bio{color:var(--muted);margin-top:12px;max-width:40ch}\n.bio__links{margin-top:32px;width:100%;display:flex;flex-direction:column;gap:12px}\n.biolink{display:block;width:100%;padding:17px 22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border);font-weight:600;letter-spacing:-.01em;transition:transform .16s var(--ease),border-color .16s,background .16s}\n.biolink:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--elevated)}\n.bio__foot{margin-top:32px;color:var(--muted);font-size:.82rem}\n/* cta band */\n.ctaband{position:relative;border-radius:var(--r-lg);padding:calc(var(--band)*.85) 24px;text-align:center;overflow:hidden;background:linear-gradient(135deg,var(--surface),var(--elevated));border:1px solid var(--border)}\n.ctaband::before{content:\"\";position:absolute;inset:0;background:radial-gradient(55% 90% at 50% 0%,var(--glow),transparent 70%)}\n.ctaband>*{position:relative}\n.ctaband h2{margin-bottom:14px}\n.ctaband p{max-width:48ch;margin:0 auto 30px;font-size:1.12rem}\n/* footer */\n.footer{border-top:1px solid var(--border);padding-block:calc(var(--band)*.8) 36px;margin-top:var(--band)}\n.footer .wrap{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}\n.footer__brand{font-weight:700;font-size:1.15rem;letter-spacing:-.02em}\n.footer__tag{color:var(--muted);margin-top:12px;font-size:.9rem;max-width:32ch}\n.fcol h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:15px}\n.fcol a{display:flex;align-items:center;min-height:var(--tap);color:var(--muted);font-size:.9rem;padding:5px 0;transition:color .15s}\n.fcol a:hover{color:var(--text)}\n.footer__bottom{border-top:1px solid var(--border);margin-top:44px;padding-top:24px;color:var(--muted);font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}\n@media(max-width:760px){.footer .wrap{grid-template-columns:1fr 1fr}}\n/* logo wall — TEXT wordmarks. There are no logo assets, and inventing an <img>\n   for somebody else's brand is the one thing a generated page must not do. */\n.logos__t{text-align:center;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.14em;\n  text-transform:uppercase;margin-bottom:clamp(20px,2.6vw,32px)}\n.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(18px,3.6vw,54px)}\n.logo{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:.01em;\n  font-size:clamp(1rem,2vw,1.35rem);color:var(--text);opacity:.6;max-width:100%;overflow-wrap:anywhere;\n  transition:opacity .2s var(--ease)}\n.logo:hover{opacity:1}\n/* marquee. The track is WIDER than the viewport on purpose and is clipped by\n   .marq{overflow:hidden} — an element-by-element overflow probe has to skip\n   descendants of a clipping ancestor or it reports this as a defect. Two\n   identical halves plus padding-right on every item (not flex gap) is what makes\n   translateX(-50%) land exactly one period along and loop seamlessly. */\n.marq{overflow:hidden;border-block:1px solid var(--border);padding-block:clamp(14px,1.8vw,22px);--marq-gap:clamp(28px,5vw,64px)}\n.marq__t{display:flex;width:max-content;animation:qk-marq 28s linear infinite}\n.marq__t span{padding-right:var(--marq-gap);white-space:nowrap;font-family:var(--font-display);\n  font-weight:var(--w-display);letter-spacing:var(--track-display);color:var(--text);\n  font-size:calc(clamp(1.15rem,2.6vw,1.9rem)*var(--display-scale))}\n.marq__t span::after{content:\"\\2022\";margin-left:var(--marq-gap);color:var(--accent-text)}\n@keyframes qk-marq{to{transform:translateX(-50%)}}\n@media(prefers-reduced-motion:reduce){.marq__t{animation:none}}\n/* shop — a wide measure and a slightly shorter seam, so the page reads as many\n   small bands rather than a few tall ones. */\nbody.k-shop{--maxw:1280px;--band:clamp(2.6rem,4.2vw,3.75rem)}\n/* multi-page — real routes inside the ONE document. Pages are siblings of the\n   top chrome, never a wrapper around it, so a kind that reaches the <body> grid\n   (k-docs) keeps its sidebar column. */\n.pg[hidden]{display:none}\n[data-nav][aria-current]{color:var(--text)}\n.side__nav [data-nav][aria-current]{background:var(--elevated);color:var(--text)}\n.mast__meta a{white-space:nowrap;transition:color .15s var(--ease)}\n.mast__meta a:hover,.mast__meta [aria-current]{color:var(--text)}\n/* the index chrome's one text link becomes the nav; still one baseline row */\n.idx__nav{display:flex;flex-wrap:wrap;gap:4px 18px;min-width:0}\n.idx__nav a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:.88rem;font-weight:600;\n  color:var(--muted);white-space:nowrap;border-bottom:1px solid transparent;transition:color .15s var(--ease)}\n.idx__nav a:hover{color:var(--text)}\n.idx__nav [aria-current]{color:var(--accent-text);border-bottom-color:currentColor}\n/* The bar HIDES its links under 760px. That was harmless while every link went\n   to \"#top\"; now it is the only way off the opening page, so they WRAP onto\n   their own row instead. Not a horizontal scroller: a scroller the visitor has\n   to discover is the same dead end with an extra step. */\n@media(max-width:760px){\n  .mp .nav .wrap{height:auto;flex-wrap:wrap;row-gap:6px;padding-block:10px}\n  .mp .nav__links{display:flex;flex-wrap:wrap;order:3;flex-basis:100%;gap:4px 18px;min-width:0}\n  .mp .nav__links a{font-size:.86rem;padding:0}\n}\n/* motion + image skeleton */\n@media(prefers-reduced-motion:no-preference){\n  [data-anim]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*70ms)}\n  [data-anim].in{opacity:1;transform:none}\n}\n/* image slot: real photo (png) is opaque and covers the spinner; an unfilled\n   placeholder (svg) is translucent so the spinner shows through = \"image coming\" */\n/* spinner ONLY while the run is in progress (host adds .qk-loading to <body>).\n   A real photo (opaque png) covers it; when the run finishes the class is gone,\n   so it always terminates — an unfilled slot becomes a clean static tile, never a\n   perpetual spinner. */\n.pcard__media::before,.gtile__media::before{content:\"\";position:absolute;top:calc(50% - 17px);left:calc(50% - 17px);width:34px;height:34px;border-radius:var(--r-round);border:3px solid rgba(255,255,255,.16);border-top-color:var(--accent);z-index:0;opacity:0}\n.qk-loading .pcard__media::before,.qk-loading .gtile__media::before{opacity:1;animation:qk-spin .8s linear infinite}\n.pcard__media img,.gtile__media img{position:relative;z-index:1}\n/* NO PER-PRODUCT PHOTOGRAPHS: present the collection as an editorial index rather\n   than as tiles we cannot fill. Measured 2026-09-11 -- 15 of 19 website runs plan a\n   single image, so the tile grid was almost always five empty frames. director.ts\n   strips gal-noimg the moment real product images exist, so this is presentation\n   only and reverses itself; the markup is unchanged either way. */\n.gallery.gal-noimg{display:block;border-top:1px solid var(--border)}\n.gallery.gal-noimg .gtile{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.5vw,28px);align-items:baseline;padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid var(--border)}\n.gallery.gal-noimg .gtile__media{display:none}\n.gallery.gal-noimg .gtile__cap{font-size:clamp(1.05rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.01em}\n.gallery.gal-noimg .gtile::before{content:counter(galn,decimal-leading-zero);counter-increment:galn;font-size:.78rem;font-weight:600;letter-spacing:.16em;color:var(--muted);opacity:.75}\n.gallery.gal-noimg{counter-reset:galn}\n.qk-loading img[src^=\"data:image/svg\"]{opacity:.55}\n@keyframes qk-spin{to{transform:rotate(360deg)}}\n</style>\n</head>\n<body class=\"h-split f-rows k-shop mp\">\n<nav class=\"nav\"><div class=\"wrap\">\n  <a class=\"nav__brand\" href=\"#/home\">Toy Feet</a>\n  <div class=\"nav__links\"><a href=\"#/home\" data-nav=\"home\">Home</a><a href=\"#/shop\" data-nav=\"shop\">Shop</a></div>\n  <a class=\"btn btn--primary\" href=\"#top\">Shop the Drop</a>\n</div></nav>\n<main class=\"pg\" data-pg=\"home\" data-title=\"Home\">\n<header class=\"hero\" id=\"top\"><div class=\"wrap\">\n  <div class=\"hero__copy\" data-anim>\n    <span class=\"eyebrow\">New Drop: The Cloud Collection</span>\n    <h1 style=\"margin-top:16px\">Collectible feet for your collection</h1>\n    <p class=\"hero__sub\">Whimsical, high-quality novelty feet that bring a smile to every shelf.</p>\n    <div class=\"hero__cta\">\n      <a class=\"btn btn--primary\" href=\"#top\">Shop the Drop</a>\n      <a class=\"btn btn--ghost\" href=\"#features\">View Lookbook</a>\n    </div>\n  </div>\n  <div class=\"hero__media\" data-anim style=\"--i:1\"><img data-hero-fill src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20800%20600'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.38'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(128%2C51%2C125)'%20stop-opacity%3D'.20'%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D'r'%20cx%3D'.7'%20cy%3D'.25'%20r%3D'.7'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'.55'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'800'%20height%3D'600'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'800'%20height%3D'600'%20fill%3D'url(%23g)'%2F%3E%3Cg%20transform%3D'translate(400%20300)%20scale(1.9)%20translate(-200%20-218)'%20opacity%3D'.55'%3E%3Cdefs%3E%3Cpattern%20id%3D'h58'%20width%3D'34'%20height%3D'34'%20patternUnits%3D'userSpaceOnUse'%3E%3Ccircle%20cx%3D'17'%20cy%3D'17'%20r%3D'2.4'%20fill%3D'rgba(255%2C102%2C178%2C.26)'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20x%3D'-80'%20y%3D'-80'%20width%3D'560'%20height%3D'560'%20fill%3D'url(%23h58)'%2F%3E%3C%2Fg%3E%3Crect%20width%3D'800'%20height%3D'600'%20fill%3D'url(%23r)'%2F%3E%3C%2Fsvg%3E\" alt=\"Toy Feet\"></div>\n</div></header>\n<section><div class=\"marq\">\n  <div class=\"marq__t\"><span>Free Shipping Over $50</span><span>Whimsy Guaranteed</span><span>Support Small Business</span><span aria-hidden=\"true\">Free Shipping Over $50</span><span aria-hidden=\"true\">Whimsy Guaranteed</span><span aria-hidden=\"true\">Support Small Business</span></div>\n</div></section>\n<section class=\"wrap\" id=\"features\"><div class=\"shead\" data-anim>\n    <span class=\"eyebrow\">Why Toy Feet?</span><h2>Not just a foot, a feeling</h2>\n    <p>We craft joy in every stitch and mold.</p>\n  </div>\n  <div class=\"features\"><div class=\"fcard\" data-anim style=\"--i:0\">\n    <div class=\"fcard__n\">01</div><h3>Whimsical Design</h3><p>Every pair is designed to spark joy and conversation.</p>\n  </div><div class=\"fcard\" data-anim style=\"--i:1\">\n    <div class=\"fcard__n\">02</div><h3>Premium Quality</h3><p>Durable materials built to last through years of collecting.</p>\n  </div><div class=\"fcard\" data-anim style=\"--i:2\">\n    <div class=\"fcard__n\">03</div><h3>Fast Shipping</h3><p>We pack with care and ship quickly to your door.</p>\n  </div></div>\n</section>\n<section class=\"wrap\"><div class=\"quote\" data-anim>\n  <blockquote>&ldquo;I&#39;ve never seen feet so cute! They are the highlight of my office desk.&rdquo;</blockquote>\n  <div class=\"quote__a\">Sarah J., Collector</div>\n</div></section>\n<section class=\"wrap\" data-anim>\n  <div class=\"logos__t\">Trusted by collectors</div>\n  <div class=\"logos\"><span class=\"logo\">Toy Collector Monthly</span><span class=\"logo\">Quirky Gifts Blog</span><span class=\"logo\">The Daily Novelty</span></div>\n</section>\n<section class=\"wrap\"><div class=\"ctaband\" data-anim>\n  <h2>Ready to step up your collection?</h2><p>Join our newsletter for exclusive drops and 10% off your first order.</p>\n  <a class=\"btn btn--primary\" href=\"#top\">Get 10% Off</a>\n</div></section>\n</main>\n<main class=\"pg\" data-pg=\"shop\" data-title=\"Shop\" hidden>\n<section class=\"wrap\"><div class=\"shead\" data-anim>\n    <span class=\"eyebrow\">The Collection</span><h2>Find your perfect pair</h2>\n  </div>\n  <div class=\"products g-4\"><article class=\"pcard\" data-anim style=\"--i:0\">\n    <div class=\"pcard__media\"><img data-product-fill=\"0\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp018'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp018)'%2F%3E%3Cg%20transform%3D'rotate(0%20200%20200)'%3E%3Cdefs%3E%3Cpattern%20id%3D'p018'%20width%3D'34'%20height%3D'34'%20patternUnits%3D'userSpaceOnUse'%3E%3Ccircle%20cx%3D'17'%20cy%3D'17'%20r%3D'2.4'%20fill%3D'rgba(255%2C102%2C178%2C.34)'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20x%3D'-80'%20y%3D'-80'%20width%3D'560'%20height%3D'560'%20fill%3D'url(%23p018)'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E\" alt=\"The Classic Plush\" loading=\"lazy\"><span class=\"pcard__badge\">Bestseller</span></div>\n    <div class=\"pcard__body\">\n      <div class=\"pcard__name\">The Classic Plush</div>\n      <div class=\"pcard__row\"><span class=\"pcard__price\">$24</span><span class=\"pcard__add\">Add to cart</span></div>\n    </div>\n  </article><article class=\"pcard\" data-anim style=\"--i:1\">\n    <div class=\"pcard__media\"><img data-product-fill=\"1\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp114'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp114)'%2F%3E%3Cg%20transform%3D'rotate(2.5%20200%20200)'%3E%3Cg%20stroke%3D'rgba(255%2C102%2C178%2C.34)'%20stroke-width%3D'1.4'%3E%3Cline%20x1%3D'-80'%20y1%3D'76'%20x2%3D'480'%20y2%3D'76'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'116'%20x2%3D'480'%20y2%3D'116'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'148'%20x2%3D'480'%20y2%3D'148'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'174'%20x2%3D'480'%20y2%3D'174'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'196'%20x2%3D'480'%20y2%3D'196'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'214'%20x2%3D'480'%20y2%3D'214'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'230'%20x2%3D'480'%20y2%3D'230'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'246'%20x2%3D'480'%20y2%3D'246'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'266'%20x2%3D'480'%20y2%3D'266'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'294'%20x2%3D'480'%20y2%3D'294'%2F%3E%3Cline%20x1%3D'-80'%20y1%3D'332'%20x2%3D'480'%20y2%3D'332'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E\" alt=\"Rubber Duck Duo\" loading=\"lazy\"></div>\n    <div class=\"pcard__body\">\n      <div class=\"pcard__name\">Rubber Duck Duo</div>\n      <div class=\"pcard__row\"><span class=\"pcard__price\">$18</span><span class=\"pcard__add\">Add to cart</span></div>\n    </div>\n  </article><article class=\"pcard\" data-anim style=\"--i:2\">\n    <div class=\"pcard__media\"><img data-product-fill=\"2\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp295'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp295)'%2F%3E%3Cg%20transform%3D'rotate(-2.5%20200%20200)'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C102%2C178%2C.34)'%20stroke-width%3D'1.4'%3E%3Ccircle%20cx%3D'152'%20cy%3D'192'%20r%3D'104'%2F%3E%3Crect%20x%3D'152'%20y%3D'140'%20width%3D'188'%20height%3D'188'%20rx%3D'18'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E\" alt=\"Mini Doll Set\" loading=\"lazy\"></div>\n    <div class=\"pcard__body\">\n      <div class=\"pcard__name\">Mini Doll Set</div>\n      <div class=\"pcard__row\"><span class=\"pcard__price\">$12</span><span class=\"pcard__add\">Add to cart</span></div>\n    </div>\n  </article><article class=\"pcard\" data-anim style=\"--i:3\">\n    <div class=\"pcard__media\"><img data-product-fill=\"3\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20400'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'wp337'%20x1%3D'0'%20y1%3D'0'%20x2%3D'.55'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(255%2C102%2C178)'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'%23ede4e6'%2F%3E%3Crect%20width%3D'400'%20height%3D'400'%20fill%3D'url(%23wp337)'%2F%3E%3Cg%20transform%3D'rotate(2.5%20200%20200)'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C102%2C178%2C.34)'%20stroke-width%3D'1.4'%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'58'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'106'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'154'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'202'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'250'%2F%3E%3Ccircle%20cx%3D'200'%20cy%3D'218'%20r%3D'298'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Crect%20x%3D'16.5'%20y%3D'16.5'%20width%3D'367'%20height%3D'367'%20rx%3D'12'%20fill%3D'none'%20stroke%3D'rgba(0%2C0%2C0%2C.09)'%2F%3E%3C%2Fsvg%3E\" alt=\"Giant Cloud\" loading=\"lazy\"><span class=\"pcard__badge\">Limited</span></div>\n    <div class=\"pcard__body\">\n      <div class=\"pcard__name\">Giant Cloud</div>\n      <div class=\"pcard__row\"><span class=\"pcard__price\">$45</span><span class=\"pcard__add\">Add to cart</span></div>\n    </div>\n  </article></div>\n</section>\n</main>\n<footer class=\"footer\"><div class=\"wrap\">\n  <div><div class=\"footer__brand\">Toy Feet</div><p class=\"footer__tag\">Toy Feet: Collecting joy, one pair at a time.</p></div>\n  <div class=\"fcol\"><h4>Shop</h4><a href=\"#\">All Products</a><a href=\"#\">New Arrivals</a><a href=\"#\">Bestsellers</a><a href=\"#\">Gift Cards</a></div><div class=\"fcol\"><h4>Company</h4><a href=\"#\">About Us</a><a href=\"#\">Our Story</a><a href=\"#\">Careers</a><a href=\"#\">Press</a></div><div class=\"fcol\"><h4>Support</h4><a href=\"#\">Contact Us</a><a href=\"#\">Shipping Info</a><a href=\"#\">Returns</a><a href=\"#\">FAQ</a></div>\n</div><div class=\"wrap footer__bottom\">\n  <span>&copy; 2026 Toy Feet. All rights reserved.</span>\n  <span>Built on Own1 &middot; Qiki</span>\n</div></footer>\n<script>\n(()=>{const io=new IntersectionObserver(es=>es.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.12});\ndocument.querySelectorAll('[data-anim]').forEach(el=>io.observe(el));})();\n</script>\n<script>\n(()=>{const ps=[...document.querySelectorAll('.pg')];if(ps.length<2)return;\nconst ids=ps.map(p=>p.dataset.pg),base=document.title;\nconst go=(id,top)=>{if(ids.indexOf(id)<0)id=ids[0];\n ps.forEach(p=>{p.hidden=p.dataset.pg!==id});\n document.querySelectorAll('[data-nav]').forEach(a=>{a.dataset.nav===id?a.setAttribute('aria-current','page'):a.removeAttribute('aria-current')});\n const l=ps[ids.indexOf(id)].dataset.title;\n document.title=id===ids[0]||!l?base:base+' \\u2014 '+l;\n if(top)scrollTo({top:0,behavior:'instant'})};\nconst route=first=>{const h=location.hash;\n if(h.slice(0,2)==='#/')return go(h.slice(2).toLowerCase().replace(/[^a-z0-9-].*/,'')||ids[0],!first);\n /* No fragment is the opening page — and this has to hold on EVERY call, not\n    just the first: going Back from #/about to the bare url is a hashchange to\n    \"\", and a first-only rule leaves the visitor staring at the page they just\n    left with the Back button apparently broken. */\n if(!h||h==='#')return go(ids[0],!first);\n /* Any other fragment is an element link (#top, #features, #faq) whose target\n    may sit on a hidden page. Switch to that page first, or every in-page link\n    on the site is dead the moment you are not already on the page owning it. */\n const el=document.getElementById(decodeURIComponent(h.slice(1)));\n if(el){const p=el.closest('.pg');if(p&&p.hidden)go(p.dataset.pg,0);el.scrollIntoView();return}\n if(first)go(ids[0],0)};\n/* Fragment links are DRIVEN, not left to the browser. Measured in Chromium: a\n   srcdoc document's url is \"about:srcdoc\" but its BASE url is inherited from the\n   parent, so <a href=\"#/menu\"> resolves against the PARENT and the click takes\n   the iframe clean off the document — QikiOverlay's preview would navigate to\n   the Qiki app inside itself. Assigning location.hash is a same-document\n   navigation in all three environments (file://, srcdoc, the /preview CSP) and\n   still pushes the history entry Back needs. pushState is not an option at all:\n   it throws SecurityError on both the opaque-origin iframe and file://. */\naddEventListener('click',ev=>{\n if(ev.defaultPrevented||ev.button||ev.metaKey||ev.ctrlKey||ev.shiftKey||ev.altKey)return;\n const a=ev.target.closest&&ev.target.closest('a[href^=\"#\"]');if(!a)return;\n const h=a.getAttribute('href');ev.preventDefault();\n if(h==='#')return;                      /* placeholder links stay inert */\n location.hash===h?route(0):location.hash=h});\naddEventListener('hashchange',()=>route(0));route(1);})();\n</script>\n</body>\n</html>",
        "siteTitle": "Toy Feet"
      },
      "finishedAt": 1790763681756,
      "llmCalls": [
        {
          "upstream": "http://127.0.0.1:8080",
          "modelRequested": "router/router:txt2txt",
          "temperature": 0.6,
          "maxTokens": 3000,
          "timeoutMs": 180000,
          "startedAt": 1790763671041,
          "finishedAt": 1790763681752,
          "ok": true,
          "promptChars": 15729,
          "responseChars": 4550,
          "modelServed": "txt2txt-boost"
        }
      ]
    }
  },
  "startedAt": 1790763671038,
  "fingerprint": {
    "ownAiUrl": "http://127.0.0.1:8080",
    "harnessHost": "127.0.0.1",
    "modelServed": "qwen-image",
    "nodeVersion": "v24.20.0",
    "capturedAt": 1790763671038
  },
  "finishedAt": 1790763681759,
  "scores": {
    "perStep": {
      "s1-pyg6o": {
        "validity": 2,
        "fidelity": 2,
        "structure": 2,
        "depth": 1,
        "cleanliness": 2,
        "total": 9,
        "notes": [
          "filler/placeholder copy detected"
        ],
        "fromFallback": false
      }
    },
    "total": 9,
    "perKind": {
      "website": 9
    },
    "failedSteps": {},
    "axes": [
      "validity",
      "fidelity",
      "structure",
      "depth",
      "cleanliness"
    ]
  }
}