@layer theme,base;@layer components{.studio-stage{gap:calc(var(--spacing) * 4);grid-template-areas:"brief""device""controls";display:grid}.studio-stage>.studio-brief{grid-area:brief}.studio-device{padding-top:calc(var(--spacing) * 3);--device-crop-height:calc(var(--spacing) * 92);grid-area:device}.studio-controls{align-content:start;gap:calc(var(--spacing) * 3);grid-area:controls;min-width:0;display:grid}@media (min-width:48rem){.studio-stage{column-gap:calc(var(--spacing) * 8);row-gap:calc(var(--spacing) * 5);grid-template:"brief device""controls device"1fr/minmax(0,1fr) auto;align-items:start}.studio-device{--device-crop-height:calc(var(--spacing) * 112);padding-inline:calc(var(--spacing) * 6)}}@media (min-width:80rem){.studio-device{--device-crop-height:calc(var(--spacing) * 118)}}.studio-brief{border-radius:var(--radius-md);background:var(--color-paper);padding:calc(var(--spacing) * 5);box-shadow:var(--shadow-soft)}.studio-brief__label{color:var(--color-text-3);font-size:var(--text-label);letter-spacing:var(--text-label--letter-spacing);font-weight:600;line-height:var(--text-label--line-height);text-transform:uppercase}.studio-brief__text{margin-top:calc(var(--spacing) * 2.5);color:var(--color-ink);font-size:var(--text-title);letter-spacing:var(--text-title--letter-spacing);font-weight:500;line-height:var(--text-title--line-height);text-wrap:balance}.studio-chips{gap:calc(var(--spacing) * 2) calc(var(--spacing) * 4);margin-top:calc(var(--spacing) * 4);flex-wrap:wrap;display:flex}.studio-chip{height:calc(var(--spacing) * 6);align-items:center;gap:calc(var(--spacing) * 1.5);color:var(--color-ink);font-size:var(--text-caption);white-space:nowrap;font-weight:500;display:inline-flex}.studio-chip__mark{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5);border:1px solid var(--color-line-strong);background:var(--color-paper);border-radius:999px;flex:none;place-items:center;display:grid}.studio-chip__check{background:var(--color-violet-soft);width:100%;height:100%;color:var(--color-violet-ink);border-radius:999px;place-items:center;display:grid}.studio-worlds{border:0;min-width:0;margin:0;padding:0}.studio-worlds__row{gap:var(--spacing);border:1px solid var(--color-line-strong);border-radius:var(--radius-md);padding:var(--spacing);grid-template-columns:repeat(3,auto);display:grid}.studio-world{min-height:calc(var(--spacing) * 11);border-radius:var(--radius-sm);padding-inline:calc(var(--spacing) * 1.5);color:var(--color-text-2);font-size:var(--text-caption);font-weight:500;line-height:var(--text-caption--line-height);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-ui) var(--ease-out-expo), box-shadow var(--duration-ui) var(--ease-out-expo), color var(--duration-micro) var(--ease-out-expo);place-items:center;display:grid;position:relative}.studio-world:hover{color:var(--color-ink)}.studio-world:has(:checked){background:var(--color-paper);box-shadow:var(--shadow-soft);color:var(--color-ink)}.studio-world:has(:focus-visible){outline:2px solid var(--color-violet-ink);outline-offset:2px}.studio-actions{justify-content:space-between;align-items:center;gap:calc(var(--spacing) * 2) calc(var(--spacing) * 4);flex-wrap:wrap;display:flex}.studio-noscript{color:var(--color-text-2);font-size:var(--text-caption)}.studio-screen{min-height:100%;position:relative}.studio-pan{min-height:100%}.studio-order{align-items:center;gap:calc(var(--spacing) * 3);display:flex}.studio-order__thumb{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10);border-radius:var(--radius-sm);background:var(--color-cloud);color:var(--color-text-2);flex:none;place-items:center;display:grid;overflow:hidden}.studio-order__thumb img{object-fit:cover;width:100%;height:100%}.studio-order__text{gap:calc(var(--spacing) * .5);min-width:0;display:grid}.studio-order__title{align-items:center;gap:calc(var(--spacing) * 1);color:var(--color-text-2);font-size:var(--text-note);font-weight:600;line-height:var(--text-note--line-height);display:inline-flex}.studio-order__check{color:var(--color-positive)}.studio-order__mark{margin-top:calc(var(--spacing) * 1);background:var(--color-cloud);padding:calc(var(--spacing) * .5) calc(var(--spacing) * 2);color:var(--color-text-2);font-size:var(--text-note);letter-spacing:var(--text-label--letter-spacing);font-weight:600;line-height:var(--text-note--line-height);text-transform:uppercase;border-radius:999px;justify-self:start}.studio-order__line{color:var(--color-ink);font-size:var(--text-caption);font-weight:600;line-height:var(--text-caption--line-height);white-space:nowrap}.studio-phone{width:fit-content;margin-inline:auto;position:relative}.studio-float{z-index:2;border-radius:var(--radius-md);background:var(--color-paper);padding:calc(var(--spacing) * 3) calc(var(--spacing) * 4);box-shadow:var(--shadow-float);position:absolute}.studio-float--order{right:calc(var(--spacing) * -6);bottom:calc(var(--spacing) * 3);max-width:calc(var(--spacing) * 60)}@media (max-width:47.99rem){.studio-float--order .studio-order__thumb{display:none}}.studio-float--live{top:calc(var(--spacing) * -3);left:calc(var(--spacing) * -6);padding:calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);border-radius:999px}.studio-live{align-items:center;gap:calc(var(--spacing) * 2);color:var(--color-ink);font-size:var(--text-caption);white-space:nowrap;font-weight:600;display:inline-flex}.studio-live__dot{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2);background:var(--color-positive);border-radius:999px}.studio-replay{display:contents}html:not([data-motion=on]) .studio-replay{display:none}html[data-motion=on] .studio-frame:not([data-tour-state=done]) .studio-replay>*{visibility:hidden}}@layer utilities;html[data-motion=on] .studio[data-scene]:not([data-ready]) :is([data-float=order],[data-float=live]){opacity:0}@media (prefers-reduced-motion:reduce){.studio [data-float]{opacity:1!important}}
@layer components{.hero-visual{--hv-ink:var(--color-ink);--hv-offbeat:#c23a22;width:100%;max-width:27.5rem;padding-bottom:calc(var(--spacing) * 10);margin:0 auto;position:relative}.hero-visual__photo{border-radius:var(--radius-xl);aspect-ratio:1;background:var(--color-cloud);display:block;overflow:hidden}.hero-visual__photo img{object-fit:cover;object-position:50% 42%;width:100%;height:100%;display:block}.hero-visual__layers{pointer-events:none;position:absolute;inset:0}.hero-visual__sticker{align-items:center;gap:calc(var(--spacing) * 1.5);background:var(--color-paper);padding:calc(var(--spacing) * 2) calc(var(--spacing) * 3.5) calc(var(--spacing) * 2) calc(var(--spacing) * 2.5);color:var(--hv-ink);font-size:var(--text-caption);white-space:nowrap;box-shadow:var(--shadow-raised);border-radius:999px;font-weight:600;line-height:1.2;display:inline-flex;position:absolute;top:6%;left:6%;rotate:-4deg}.hero-visual__sticker svg{color:var(--color-violet-ink)}.hero-visual__phone{aspect-ratio:9/17.5;border-radius:calc(var(--spacing) * 6.5);background:var(--hv-ink);width:34%;padding:calc(var(--spacing) * 1.25);box-shadow:0 32px 64px -24px #14141773, var(--shadow-raised);position:absolute;bottom:0;left:4%}.hero-visual__screen{border-radius:calc(var(--spacing) * 5.25);background:var(--color-paper);grid-template-rows:auto auto 1fr;height:100%;display:grid;overflow:hidden}.hero-visual__shop{padding:calc(var(--spacing) * 5) calc(var(--spacing) * 3) calc(var(--spacing) * 2);color:var(--hv-ink);letter-spacing:.08em;text-align:center;font-size:.6875rem;font-weight:800}.hero-visual__product{aspect-ratio:1;background:var(--color-cloud);position:relative;overflow:hidden}.hero-visual__product-image,.hero-visual__product-image img{object-fit:cover;width:100%;height:100%;display:block}.hero-visual__shine{background:linear-gradient(105deg,#0000 30%,#ffffff8c 50%,#0000 70%);position:absolute;inset:0;transform:translate(-120%)}.hero-visual__meta{align-content:start;gap:calc(var(--spacing) * .75);padding:calc(var(--spacing) * 2.5) calc(var(--spacing) * 2.5) 0;display:grid}.hero-visual__name{color:var(--hv-ink);font-size:.6875rem;font-weight:600;line-height:1.25}.hero-visual__price{color:var(--color-text-2);font-variant-numeric:tabular-nums;font-size:.6875rem}.hero-visual__sizes{gap:calc(var(--spacing) * 1);margin-top:calc(var(--spacing) * 1);display:flex}.hero-visual__sizes span{min-width:calc(var(--spacing) * 5);border-radius:calc(var(--spacing) * 1);box-shadow:inset 0 0 0 1px var(--color-line);padding:calc(var(--spacing) * .5) calc(var(--spacing) * 1);color:var(--hv-ink);place-items:center;font-size:.5625rem;font-weight:600;display:grid}.hero-visual__sizes [data-selected]{background:var(--hv-ink);box-shadow:none;color:var(--color-paper)}.hero-visual__cart{margin-top:calc(var(--spacing) * 2);border-radius:calc(var(--spacing) * 1.5);background:var(--hv-offbeat);padding:calc(var(--spacing) * 1.5);color:var(--color-paper);text-align:center;font-size:.625rem;font-weight:600}.hero-visual__engine{align-items:center;gap:calc(var(--spacing) * 2.5);border-radius:var(--radius-lg);width:min(15.5rem,64%);padding:calc(var(--spacing) * 3);box-shadow:0 24px 48px -24px #5b21b659, var(--shadow-raised);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:translate var(--duration-ui) var(--ease-out-expo);background:#fffffff2;display:flex;position:absolute;top:12%;right:4%}.hero-visual__logo{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9);flex:none}.hero-visual__engine-text{gap:calc(var(--spacing) * 1);flex:1;min-width:0;display:grid}.hero-visual__brand{color:var(--hv-ink);font-size:var(--text-caption);font-weight:700;line-height:1.2}.hero-visual__states{display:grid}.hero-visual__state{align-items:center;gap:calc(var(--spacing) * 1);color:var(--color-text-2);font-size:var(--text-caption);white-space:normal;grid-area:1/1;line-height:1.3;display:inline-flex}.hero-visual__state--1,.hero-visual__state--2{opacity:0}.hero-visual__state--3{color:var(--hv-ink);font-weight:600}.hero-visual__state--3 svg{color:var(--color-violet-ink)}.hero-visual__bar{background:var(--color-fog);border-radius:999px;height:3px;display:block;overflow:hidden}.hero-visual__bar-fill{border-radius:inherit;background:var(--color-violet);transform-origin:0;height:100%;display:block}.hero-visual__toast{align-items:center;gap:calc(var(--spacing) * .5) calc(var(--spacing) * 2.5);border-radius:var(--radius-lg);max-width:56%;padding:calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5) calc(var(--spacing) * 2.5) calc(var(--spacing) * 2.5);box-shadow:var(--shadow-raised);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff0;grid-template-columns:auto minmax(0,1fr);display:grid;position:absolute;bottom:16%;right:4%}.hero-visual__check{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8);background:var(--color-violet-soft);color:var(--color-violet-ink);border-radius:999px;place-items:center;display:grid}.hero-visual__toast-text{min-width:0;display:grid}.hero-visual__toast-title{color:var(--hv-ink);font-size:var(--text-caption);font-weight:600;line-height:1.3}.hero-visual__toast-line{color:var(--color-text-2);font-size:var(--text-note);text-overflow:ellipsis;white-space:nowrap;line-height:1.35;overflow:hidden}.hero-visual__mark{background:var(--color-paper);box-shadow:inset 0 0 0 1px var(--color-line);padding:0 calc(var(--spacing) * 1.5);color:var(--color-text-2);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;grid-column:2;justify-self:start;font-size:.625rem;font-weight:600;line-height:1.6}@media (min-width:64rem){.hero-visual{max-width:30rem;padding-bottom:calc(var(--spacing) * 12);margin-right:0}.hero-visual__photo{aspect-ratio:4/5}.hero-visual__photo img{object-position:50% 38%}.hero-visual__engine{top:24%}.hero-visual__sticker{left:-7%}.hero-visual__phone{width:36%;left:-14%}.hero-visual__engine{right:-8%}.hero-visual__toast{max-width:60%;bottom:14%;right:-8%}}html[data-motion=on] .hero-visual__photo{animation:hv-open 1.1s var(--ease-out-expo) both}html[data-motion=on] .hero-visual__sticker{animation:.7s cubic-bezier(.34,1.4,.64,1) .45s both hv-pop}html[data-motion=on] .hero-visual__engine{animation:hv-fade-up .7s var(--ease-out-expo) .7s both}html[data-motion=on] .hero-visual__state--1{animation:2.7s linear both hv-state-1}html[data-motion=on] .hero-visual__state--2{animation:2.7s linear both hv-state-2}html[data-motion=on] .hero-visual__state--3{animation:2.7s linear both hv-state-3}html[data-motion=on] .hero-visual__bar-fill{animation:hv-progress 2.7s var(--ease-out-expo) both}html[data-motion=on] .hero-visual__phone{animation:hv-rise .9s var(--ease-out-expo) 1.2s both}html[data-motion=on] .hero-visual__shine{animation:hv-shine 1s var(--ease-out-expo) 1.85s both}html[data-motion=on] .hero-visual__toast{animation:.8s cubic-bezier(.34,1.3,.64,1) 2.9s both hv-drop}html[data-motion=on] .hero-visual__check svg{animation:hv-wipe .5s var(--ease-out-expo) 3.35s both}@media (hover:hover) and (pointer:fine){.hero-visual__phone{transition:translate var(--duration-ui) var(--ease-out-expo)}.hero-visual:hover .hero-visual__phone{translate:0 -8px}.hero-visual:hover .hero-visual__engine{translate:0 -4px}}}@keyframes hv-state-1{0%,26%{opacity:0;transform:translateY(6px)}32%,52%{opacity:1;transform:none}58%,to{opacity:0;transform:translateY(-6px)}}@keyframes hv-state-2{0%,52%{opacity:0;transform:translateY(6px)}58%,80%{opacity:1;transform:none}86%,to{opacity:0;transform:translateY(-6px)}}@keyframes hv-state-3{0%,80%{opacity:0;transform:translateY(6px)}86%,to{opacity:1;transform:none}}@keyframes hv-progress{0%,26%{transform:scaleX(0)}52%{transform:scaleX(.45)}80%{transform:scaleX(.85)}86%,to{transform:scaleX(1)}}@keyframes hv-open{0%{clip-path:inset(7% round 40px);transform:scale(1.04)}to{clip-path:inset(0 round 32px);transform:none}}@keyframes hv-pop{0%{opacity:0;transform:scale(.7)rotate(-6deg)}to{opacity:1;transform:none}}@keyframes hv-rise{0%{opacity:0;transform:translateY(28%)}to{opacity:1;transform:none}}@keyframes hv-shine{0%{transform:translate(-120%)}to{transform:translate(120%)}}@keyframes hv-fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes hv-drop{0%{opacity:0;transform:translateY(-16px)scale(.96)}to{opacity:1;transform:none}}@keyframes hv-wipe{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}