[hidden]{display:none!important}
:root{
  --canvas:#eef3ea; --card:#fff; --ink:#10150f; --mute:#566052; --line:#d8e0d2;
  --lime:#9fe870; --lime-d:#2e6b12; --dark:#163300; --warn:#ffd166;
  --r:20px; --r-s:12px;
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--ink);line-height:1.45;overflow-x:hidden;
 background-image:radial-gradient(circle at 1px 1px,#d3dccb 1px,transparent 0);background-size:22px 22px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px clamp(16px,4vw,48px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.mark{display:grid;gap:3px;width:26px}
.mark i{height:5px;border-radius:3px;background:var(--dark)}
.mark i:nth-child(2){background:var(--lime);width:70%}
.privacy{font-size:13px;color:var(--mute);background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:99px;white-space:nowrap}
main{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 40px}
.hero{padding:clamp(20px,5vw,56px) 0 clamp(18px,3vw,32px);max-width:820px}
h1{font-weight:900;font-size:clamp(40px,8.5vw,92px);line-height:.92;letter-spacing:-.045em}
h1 em{font-style:normal;background:var(--lime);padding:0 .12em;border-radius:.14em;display:inline-block;transform:rotate(-1.5deg)}
.lede{margin-top:18px;font-size:clamp(16px,2.2vw,20px);color:var(--mute);max-width:56ch}
.work{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
.drop{border:2px dashed #9db296;border-radius:var(--r);background:rgba(255,255,255,.7);min-height:340px;display:grid;place-items:center;padding:24px;text-align:center;transition:.15s}
.drop.over{background:#fff;border-color:var(--lime-d);transform:scale(1.01)}
.drop-inner{display:grid;gap:10px;justify-items:center;max-width:380px}
.drop-inner span{color:var(--mute);font-size:14px}
.drop-ico{width:72px;color:var(--dark);margin-bottom:4px}
.btn{font:inherit;font-weight:700;border:0;cursor:pointer;border-radius:99px;padding:13px 22px;text-decoration:none;display:inline-block;text-align:center;transition:transform .12s}
.btn:hover{transform:scale(1.03)}.btn:active{transform:scale(.97)}
.btn.primary{background:var(--lime);color:var(--dark)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.small{padding:8px 14px;font-size:14px}
.btn:focus-visible,.chip:focus-visible,.pin:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.stage{background:var(--card);border-radius:var(--r);padding:10px;box-shadow:0 1px 0 var(--line),0 12px 40px -20px rgba(22,51,0,.35)}
.canvas-wrap{position:relative;border-radius:calc(var(--r) - 8px);overflow:hidden;background:#000;line-height:0;max-height:78vh;display:flex;justify-content:center}
#photo{max-width:100%;height:auto;max-height:78vh;width:auto;display:block}
#pins{position:absolute;inset:0;pointer-events:none}
.canvas-wrap.adding{cursor:crosshair}
.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;min-width:26px;height:26px;padding:0 6px;border-radius:99px;border:2px solid #fff;background:var(--dark);color:var(--lime);font:800 12px/22px "Archivo",sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.5);animation:pop .3s both}
.pin.sel{background:var(--lime);color:var(--dark);transform:translate(-50%,-50%) scale(1.25);z-index:3}
.pin.dim{opacity:.35}
.pinbox{position:absolute;border:2px solid var(--lime);border-radius:6px;pointer-events:none;background:rgba(159,232,112,.14)}
@keyframes pop{from{transform:translate(-50%,-50%) scale(0)}}
.scan{position:absolute;inset:0;background:rgba(16,21,15,.55);display:grid;place-items:center;color:#fff;font-weight:700;line-height:1.4}
.scan::before{content:"";position:absolute;left:0;right:0;height:3px;background:var(--lime);box-shadow:0 0 24px 6px var(--lime);animation:sweep 1.4s ease-in-out infinite alternate}
@keyframes sweep{from{top:0}to{top:100%}}
.toolbar{padding:14px 6px 6px;display:grid;gap:10px;justify-items:start}
.tool-row{display:grid;gap:8px;width:100%}.tool-label{font-weight:700;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:14px;font-weight:600;padding:7px 13px;border-radius:99px;border:1.5px solid var(--line);background:#fff;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--dark);color:var(--lime);border-color:var(--dark)}
.chip.del{border-color:#c0392b;color:#c0392b}
.hint{font-size:13px;color:var(--mute)}
.plan-col{display:grid;gap:14px}
.plan-empty{background:var(--dark);color:#e8f5dc;border-radius:var(--r);padding:26px}
.plan-empty h2{font-size:26px;font-weight:900;letter-spacing:-.03em;color:#fff}
.plan-empty p{margin:8px 0 16px;color:#b9d3a6}
.rules{list-style:none;padding:0;display:grid;gap:8px;font-size:14px}
.rules li{padding-left:14px;border-left:3px solid var(--lime)}.rules b{color:var(--lime)}
.card{background:var(--card);border-radius:var(--r);padding:16px;display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:6px 14px;box-shadow:0 1px 0 var(--line);border:2px solid transparent;cursor:pointer;animation:rise .4s both}
.card.sel{border-color:var(--dark)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.card h3{font-size:20px;font-weight:900;letter-spacing:-.025em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nums{display:inline-flex;gap:4px;flex-wrap:wrap}
.nums b{background:var(--dark);color:var(--lime);font-size:11px;min-width:22px;height:22px;display:inline-grid;place-items:center;border-radius:99px;padding:0 5px}
.where{font-weight:700;color:var(--lime-d);margin-top:2px}
.how{font-size:14px;color:var(--mute);grid-column:1}
.diagram{grid-row:1/4;grid-column:2;align-self:start}
.diagram svg{width:100%;height:auto;display:block}
.unlock{background:var(--card);border-radius:var(--r);padding:20px;display:grid;gap:14px;border:2px solid var(--lime)}
.unlock h3{font-size:20px;font-weight:900;letter-spacing:-.025em}.unlock p{font-size:14px;color:var(--mute)}
.unlock-actions,.dl{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.note{padding:56px 0 8px}.note h2{font-size:28px;font-weight:900;letter-spacing:-.03em;margin-bottom:16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps div{background:rgba(255,255,255,.65);border-radius:var(--r-s);padding:16px;display:flex;gap:12px}
.steps span{flex:none;width:30px;height:30px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-weight:900}
.steps p{font-size:14px;color:var(--mute)}
footer{text-align:center;font-size:13px;color:var(--mute);padding:20px 16px 32px}
footer a{color:inherit}
@media(max-width:900px){.work{grid-template-columns:minmax(0,1fr)}.steps{grid-template-columns:1fr}.privacy{display:none}}
@media(max-width:420px){.card{grid-template-columns:minmax(0,1fr) 92px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}