@font-face{font-family:"Martian Mono";font-weight:100 800;font-stretch:87.5% 112.5%;font-display:swap;src:url(/mm-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Martian Mono";font-weight:100 800;font-stretch:87.5% 112.5%;font-display:swap;src:url(/mm-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-weight:400 900;font-display:swap;src:url(/gt-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-weight:400 900;font-display:swap;src:url(/gt-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--paper:#ece6d6;--ink:#0b0b0b;--red:#d7261e;--display:"Martian Mono",ui-monospace,"Courier New",monospace;--text:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.45 var(--text)}
.wrap{overflow-x:clip;display:flex;flex-direction:column;gap:1rem;max-width:96rem;margin:0 auto;padding:1.2rem 1.1rem 3rem}
/* the phone is one column in its own order: the sample and what the scan found, the claim, the door, the price */
.work,.side,#sample:not([hidden]){display:contents}
header{order:0;border-top:.5rem solid var(--ink);padding-top:.8rem}
/* the tape: a black strip stuck across the page, edge past edge, the scan's numbers running along it */
.tape{order:-1;position:relative;z-index:1;width:calc(100vw + 6vw);margin:.2rem 0 .6rem calc(50% - 53vw);overflow:hidden;background:var(--ink);color:var(--paper);transform:rotate(-1.6deg);box-shadow:0 3px 0 var(--red)}
.tape .run{display:flex;width:max-content;animation:tape 40s linear infinite}
.tape span{padding:.55rem 0;font:800 1.15rem/1.2 var(--display);font-stretch:112.5%;letter-spacing:-.03em;white-space:nowrap}
.tape span:after{content:"■";margin:0 1.1rem;color:var(--red)}
@keyframes tape{to{transform:translateX(-50%)}}
.tape+header{border-top:0;padding-top:.4rem}
#demo,#readout,#edit{order:1}
#readout,#drop{margin-top:-1rem}
#drop,#dock,#note{order:2}
.claim{order:3}
.proof{order:4}
.buy{order:5}
h1{margin:0;font:800 clamp(1.6rem,10vw,13rem)/1 var(--display);font-stretch:112.5%;letter-spacing:-.06em;white-space:nowrap}
/* the brand redacts itself: a bar slides over the name and away, in step with the sample */
h1 .z{position:relative}
h1 .z:after{content:"";position:absolute;left:-.03em;right:-.03em;top:.02em;bottom:.04em;background:var(--ink);transform:scaleX(0);transform-origin:left;animation:redact 7.2s 1s infinite}
/* a hard cut: the bar slams on with a red flash, holds, then is torn off */
@keyframes redact{0%,8%{transform:scaleX(0);background:var(--red)}8.01%,9.5%{transform:scaleX(1);background:var(--red)}9.51%,84%{transform:scaleX(1);background:var(--ink);transform-origin:right}90%,100%{transform:scaleX(0);transform-origin:right}}
.tag{margin:.6rem 0 .2rem;font-size:1.15rem;font-weight:500}
#sample[hidden],#edit[hidden]{display:none}
#sample canvas,#out{display:block;max-width:100%;height:auto;border:2px solid var(--ink);background:#fff}
#sample canvas{width:100%}
#out{max-height:72svh;width:auto;touch-action:none;cursor:crosshair}
#stage{position:relative;width:fit-content;max-width:100%;touch-action:none;user-select:none}
#draft{display:none;position:absolute;pointer-events:none;background:rgba(11,11,11,.55);outline:2px dashed var(--paper)}
/* the scanner's protocol: what came back from each row; rows keep their height while they type */
#readout{margin:-1rem 0 0;padding:0;list-style:none;border:2px solid var(--ink);border-top:0;background:var(--ink);color:var(--paper);cursor:help}
#readout li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"k n" "o o";align-items:center;gap:0 .8rem;padding:.45rem .8rem .35rem}
#readout li+li{border-top:1px solid #3a3a3a}
#readout span{font:500 1.15rem var(--display);font-stretch:100%;letter-spacing:-.02em;color:#d9d2c2;white-space:nowrap}
#readout output{display:block;height:1.5em;font:800 1.05rem/1.5em var(--display);font-stretch:112.5%;letter-spacing:-.03em;white-space:nowrap;overflow:hidden}
#readout [data-k=blur] output{color:#ff5a4f}
#readout span{grid-area:k}
#readout output{grid-area:o}
#readout em{grid-area:n;font:800 1.05rem var(--display);font-style:normal;font-stretch:100%;letter-spacing:-.04em;white-space:nowrap}
#readout em.hot{color:#fff;background:var(--red);padding:0 .3rem}
#readout em{opacity:0;transition:opacity .15s}
#readout li.read em{opacity:1}
#readout output:empty:before{content:"сканирую…";color:#8d877a;font-weight:500;font-stretch:100%}
html[lang=en] #readout output:empty:before{content:"scanning…"}
#readout output:not(:empty):after{content:"";display:inline-block;width:.55em;height:1em;margin-left:.15em;vertical-align:-.12em;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.proof{margin:0;font-size:1rem;max-width:30em}
.claim{margin:0;font:800 clamp(1.45rem,6.4vw,3.6rem)/1.08 var(--display);font-stretch:112.5%;letter-spacing:-.05em}
.hint{margin:.6rem 0}
.bar{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.6rem 0;background:var(--paper)}
.bar #save{grid-column:1/-1}
.editing #drop,.editing #dock{display:none}
.bar span{grid-column:1/-1;font-family:var(--display)}
button,#drop{font:inherit}
button{min-height:54px;padding:0 1.3rem;white-space:nowrap;border:2px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;cursor:pointer}
button:disabled{opacity:.35;cursor:default}
button.go,#join{background:var(--ink);color:var(--paper)}
button:hover:not(:disabled),#drop:hover,#drop.over{background:var(--red);border-color:var(--red);color:#fff}
/* the drop zone is the tool's door: a solid block, its stripes marching */
#drop{position:relative;display:grid;gap:.25rem;padding:1.1rem 1.2rem;text-align:center;cursor:pointer;border:3px solid var(--ink);color:var(--paper);background:var(--ink) repeating-linear-gradient(135deg,transparent 0 12px,rgba(236,230,214,.09) 12px 24px);background-size:34px 34px;animation:march 1.4s linear infinite}
#drop:focus-visible,button:focus-visible,#dock:focus-visible{outline:3px solid var(--red);outline-offset:3px}
input:focus,input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
#drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
#drop b{justify-self:center;padding:.55rem 1.1rem;background:var(--paper);color:var(--ink);font:800 1.3rem/1.2 var(--display);font-stretch:112.5%;letter-spacing:-.04em;box-shadow:4px 4px 0 var(--red)}
#drop:hover b,#drop.over b{background:#fff}
#drop span{font-size:1.15rem;font-weight:500}
#drop i{font-style:normal}
#drop .wide{display:none}
@keyframes march{to{background-position:34px 0}}
/* the phone's way to the price: one outlined bar under the door */
#dock{display:block;align-self:stretch;min-height:52px;padding:.85rem .6rem;margin-top:-.4rem;text-align:center;border:0;color:var(--ink);font:500 1rem var(--display);font-stretch:100%;letter-spacing:-.045em;white-space:nowrap;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
#dock b{color:var(--red);font-weight:800;font-size:1.7rem;font-stretch:112.5%;letter-spacing:-.06em;vertical-align:-.12em;margin:0 .1em}
#note,#msg{margin:0;font:500 1rem var(--display);font-stretch:100%}
#note:empty,#msg:empty{display:none}
.buy{margin-top:.8rem;padding-top:1rem;border-top:.3rem solid var(--ink)}
.lead{margin:0 0 .9rem;font-size:1.2rem;line-height:1.3}
form{display:flex;flex-direction:column;gap:.6rem}
input[type=email]::placeholder{color:#5f5a50;opacity:1}
input[type=email]{min-height:54px;padding:0 .8rem;border:2px solid var(--ink);background:#fff;font:inherit;border-radius:0}
.facts{margin:1rem 0 0;font-size:1.1rem;max-width:34em}
@media(min-width:60rem){
 html{font-size:112.5%}
 /* desktop: the sample on the left; on the right the claim, the door (large, high) and the price under it */
 .wrap{display:grid;grid-template-areas:"tape tape" "head head" "sample claim" "sample drop" "sample note" "sample buy" "sample .";grid-template-rows:repeat(6,auto) 1fr;grid-template-columns:minmax(0,1.36fr) minmax(0,1fr);column-gap:clamp(2rem,4vw,4.5rem);row-gap:0;padding:.6rem clamp(1.5rem,4vw,4rem) .4rem;align-items:start}
 .tape{grid-area:tape;margin-bottom:1rem;transform:rotate(-1.1deg)}
 .tape span{font-size:1.3rem}
 header{grid-area:head;margin-bottom:1rem;padding-top:1.1rem}
 #sample:not([hidden]){display:block;grid-area:sample}
 #edit{grid-area:sample}
 #drop{grid-area:drop}
 #note{grid-area:note}
 .claim{grid-area:claim}
 .buy{grid-area:buy}
 #readout,#drop{margin-top:0}
 .proof{margin:1rem 0 0;font-size:1.3rem;line-height:1.35;max-width:none}
 .claim{font-size:clamp(2rem,2.6vw,3.2rem);margin:0 0 .6rem}
 #drop{min-height:14.5rem;align-content:center;gap:1rem;padding:2rem 1.4rem;margin-bottom:1rem}
 #drop b{font-size:2.05rem;line-height:1.05;white-space:normal;padding:.9rem 1.5rem;box-shadow:7px 7px 0 var(--red)}
 #drop span{font-size:1.2rem}
 #drop .wide{display:inline}
 #drop .narrow{display:none}
 .buy{margin-top:0;padding-top:.8rem;border-top-width:.2rem}
 .facts{margin-top:.6rem}
 #note{margin-top:.8rem}
 #dock{display:none}
 /* the editor fits the first screen beside the price: the picture capped, its controls in one row under it */
 #out{max-height:calc(100svh - 22rem)}
 .hint{margin:.5rem 0 0}
 .bar{grid-template-columns:auto auto auto 1fr;align-items:center}
 .bar span{grid-column:auto;margin-right:.6rem}
 .bar #save{grid-column:auto}
 h1{font-size:min(10.15vw,12.5rem);margin-top:-.05em}
 .tag{margin:1.1rem 0 0;font-size:1.75rem;line-height:1.1;font-weight:600;letter-spacing:-.02em}
 .lead{font-size:1.2rem}
 #join{background:transparent;color:var(--ink)}
 .lead{margin-bottom:.8rem}
 form{flex-direction:row;flex-wrap:wrap}
 button,input[type=email]{min-height:58px}
 input[type=email]{flex:1 1 12rem}
 #readout li{grid-template-columns:10rem 1fr auto;grid-template-areas:"k o n";padding:.35rem 1rem}
 #readout em{font-size:1.3rem}
 #readout output{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){.tape .run,#drop,#readout output:after,h1 .z:after{animation:none}}