@layer components{.vignette{gap:var(--space-4);padding:var(--space-2);border-radius:var(--radius-3);background-color:var(--color-surface-alt);display:grid}@media (width>=40em){.vignette{padding:var(--space-4)}}.vignette-stage{counter-reset:step}.vignette-frame{aspect-ratio:16/10;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-2);background-color:var(--color-surface);position:relative;overflow:hidden;container-type:inline-size}.vignette-frame:has(:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.vignette-name{margin-block:var(--space-2) var(--space-5);font-size:var(--text-small)}.vignette-name:before{counter-increment:step;content:counter(step) ". "}.vignette-ring{inline-size:var(--w);block-size:var(--h);border-radius:var(--mockup-radius);box-shadow:0 0 0 var(--mockup-ring) var(--color-highlight);pointer-events:none;position:absolute;inset-block-start:var(--y);inset-inline-start:var(--x)}.vignette-tag{padding:var(--mockup-space-1) var(--mockup-space-2);background-color:var(--color-surface-dark);color:var(--color-text-on-dark);font-size:var(--mockup-text-small);font-weight:var(--weight-strong);line-height:var(--leading-heading);pointer-events:none;border-start-end-radius:var(--mockup-radius);position:absolute;inset-block-end:0;inset-inline-start:0}.vignette-controls{display:none}.vignette-steps{gap:var(--space-2);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid}.vignette-step{gap:var(--space-1);color:var(--color-text);font-size:var(--text-small);text-align:start;cursor:pointer;background:0 0;border:0;padding:0;display:grid}.vignette-step:before{content:"";block-size:var(--space-1);border-radius:var(--radius-1);background-color:var(--color-border)}.vignette-step[aria-current]{font-weight:var(--weight-strong)}.vignette-step[aria-current]:before{background-color:var(--color-accent)}.vignette-step:last-child[aria-current]:before{background-color:var(--color-highlight)}.vignette-toggle{padding:var(--space-1) var(--space-4);border:var(--border-width) solid currentcolor;border-radius:var(--radius-3);color:var(--color-text);font-size:var(--text-small);font-weight:var(--weight-strong);cursor:pointer;background:0 0}.vignette-caption{font-size:var(--text-small)}@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.vignette-stage{aspect-ratio:16/10;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-2);background-color:var(--color-surface);display:block;position:relative;overflow:hidden}.vignette-stage:has(:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.vignette-screen{opacity:0;pointer-events:none;transition:opacity .45s,translate .55s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0;translate:6%}.vignette-screen[data-past]{translate:-6%}.vignette-screen[data-on],.vignette-stage:not(:has([data-on]))>.vignette-screen:first-child{opacity:1;pointer-events:auto;translate:0}.vignette-real{translate:0}.vignette-frame{background:0 0;border:0;border-radius:0;block-size:100%}.vignette-name{display:none}.vignette-controls{gap:var(--space-3);align-items:center;display:grid}.vignette-toggle{justify-self:end}@media (width>=40em){.vignette-controls{gap:var(--space-4);grid-template-columns:minmax(0,1fr) auto}}}.mock{align-content:center;gap:var(--mockup-space-3);block-size:100%;padding:var(--mockup-space-4);font-size:var(--mockup-text);line-height:var(--leading-heading);display:grid}.mock-title{font-size:var(--mockup-text-title);font-weight:var(--weight-strong)}.mock-small{font-size:var(--mockup-text-small)}.mock-row{gap:var(--mockup-space-2);justify-content:space-between;align-items:center;display:flex}.mock-stack{gap:var(--mockup-space-2);align-content:start;display:grid}.mock-split{gap:var(--mockup-space-3);grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start;display:grid}.mock-card{gap:var(--mockup-space-2);padding:var(--mockup-space-3);border-radius:var(--mockup-radius);background-color:var(--color-surface-alt);display:grid}.mock-total{border-block-start:var(--border-width) solid var(--color-border);font-weight:var(--weight-strong);padding-block-start:var(--mockup-space-2)}.mock-tag{padding:var(--mockup-space-1) var(--mockup-space-2);border-radius:var(--mockup-radius);background-color:var(--color-surface-alt);font-size:var(--mockup-text-small);font-weight:var(--weight-strong);white-space:nowrap;justify-self:start}.mock-mark{background-color:var(--color-highlight);color:var(--color-text-on-highlight)}.mock-new{gap:var(--mockup-space-2);border-inline-start:var(--mockup-ring) solid var(--color-highlight);padding-inline-start:var(--mockup-space-2);display:grid}.mock-item{gap:var(--mockup-space-1) var(--mockup-space-3);padding:var(--mockup-space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--mockup-radius);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;display:grid}.mock-thumb{inline-size:calc(var(--mockup-space-4) * 2);aspect-ratio:1;border-radius:var(--mockup-radius);background:linear-gradient(135deg, var(--color-surface-alt) 50%, var(--color-accent) 50%);grid-row:span 2}.mock-price{font-weight:var(--weight-strong);font-variant-numeric:tabular-nums;grid-row:span 2}.mock-button{padding:var(--mockup-space-1) var(--mockup-space-3);border-radius:var(--mockup-radius);background-color:var(--color-accent);color:var(--color-surface);font-weight:var(--weight-strong);white-space:nowrap;justify-self:start}.mock-quiet{border:var(--border-width) solid currentcolor;color:inherit;background-color:#0000}.mock-dark{gap:var(--mockup-space-2);padding:var(--mockup-space-2) var(--mockup-space-3);border-radius:var(--mockup-radius);background-color:var(--color-surface-dark);color:var(--color-text-on-dark);justify-content:space-between;align-items:center;display:flex}.mock-fields{gap:var(--mockup-space-2) var(--mockup-space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.mock-field{gap:var(--mockup-space-1);font-size:var(--mockup-text-small);display:grid}.mock-wide{grid-column:1/-1}.mock-box{padding:var(--mockup-space-1) var(--mockup-space-2);border:var(--border-width) solid var(--color-border);border-radius:var(--mockup-radius);background-color:var(--color-surface);font-size:var(--mockup-text);white-space:nowrap;position:relative;overflow:hidden}.mock-box:before{content:"​"}.mock-select{padding-inline-end:var(--mockup-space-4)}.mock-select:after{content:"";inline-size:var(--mockup-space-1);aspect-ratio:1;border:solid;border-width:0 var(--border-width) var(--border-width) 0;position:absolute;inset-block-start:50%;inset-inline-end:var(--mockup-space-2);translate:0 -75%;rotate:45deg}.mock-done{gap:var(--mockup-space-2);text-align:center;justify-items:center;display:grid}.mock-tick{inline-size:calc(var(--mockup-space-4) * 2);block-size:auto}.mock-tick circle{fill:var(--color-highlight)}.mock-tick path{fill:none;stroke:var(--color-text);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.mock-paid{gap:var(--mockup-space-3);padding:var(--mockup-space-2) var(--mockup-space-3);border-radius:var(--mockup-radius);background-color:var(--color-surface-alt);font-variant-numeric:tabular-nums;display:flex}.mock-plans{gap:var(--mockup-space-2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.mock-plan{gap:var(--mockup-space-1);padding:var(--mockup-space-2);border:var(--border-width) solid var(--color-border);border-radius:var(--mockup-radius);flex-direction:column;display:flex}.mock-plan .mock-button{padding-inline:var(--mockup-space-1);text-align:center;margin-block-start:auto}.mock-big{font-size:var(--mockup-text-title);font-weight:var(--weight-strong);margin-block-start:var(--mockup-space-2)}.mock-admin{gap:var(--mockup-space-3);grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;display:grid}.mock-list{gap:var(--mockup-space-1);border-inline-end:var(--border-width) solid var(--color-border);grid-area:1/1;padding-inline-end:var(--mockup-space-3);display:grid}.mock-list-row{gap:var(--mockup-space-2);padding:var(--mockup-space-1) var(--mockup-space-2);border-radius:var(--mockup-radius);justify-content:space-between;display:flex}.mock-open{background-color:var(--color-surface-alt);font-weight:var(--weight-strong)}.mock-count{padding-inline:var(--mockup-space-1);border-radius:var(--mockup-radius);font-variant-numeric:tabular-nums}.mock-setting{gap:var(--mockup-space-2);padding-block:var(--mockup-space-1);border-block-end:var(--border-width) solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.mock-switch{padding:calc(var(--mockup-space-1) / 2);border-radius:var(--mockup-radius);background-color:var(--color-surface-alt);font-size:var(--mockup-text-small);display:flex}.mock-switch>*{padding:calc(var(--mockup-space-1) / 2) var(--mockup-space-2);border-radius:var(--mockup-radius)}.mock-switch>:last-child{background-color:var(--color-surface);font-weight:var(--weight-strong)}.mock [data-act=press]{box-shadow:0 0 0 var(--mockup-ring) var(--color-highlight)}.mock [data-act=swap]{background-color:var(--color-highlight);color:var(--color-text-on-highlight)}@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.mock [data-act=press]{box-shadow:0 0 0 0 var(--color-highlight);transition:box-shadow .25s,scale .18s}.mock [data-act=press][data-now]{box-shadow:0 0 0 var(--mockup-ring) var(--color-highlight);scale:.96}.mock-box[data-now]{border-color:var(--color-accent);box-shadow:0 0 0 var(--border-width) var(--color-accent)}.mock [data-act=reveal]{transition:opacity .4s,translate .5s cubic-bezier(.2,.8,.2,1)}.mock [data-act=reveal][data-before]{opacity:0;translate:0 var(--mockup-space-2)}.mock [data-act=swap]{transition:background-color .3s,color .3s}.mock [data-act=swap][data-before]{color:inherit;background-color:#0000}.mock-box[data-act=swap][data-before]{background-color:var(--color-surface)}.mock-tick path{stroke-dasharray:30;stroke-dashoffset:30px;transition:stroke-dashoffset .6s .3s}[data-on] .mock-tick path{stroke-dashoffset:0}}}