← 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
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>“I've never seen feet so cute! They are the highlight of my office desk.”</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>© 2026 Toy Feet. All rights reserved.</span>
<span>Built on Own1 · 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>“I've never seen feet so cute! They are the highlight of my office desk.”</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>© 2026 Toy Feet. All rights reserved.</span>\n <span>Built on Own1 · 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>“I've never seen feet so cute! They are the highlight of my office desk.”</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>© 2026 Toy Feet. All rights reserved.</span>\n <span>Built on Own1 · 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"
]
}
}