html[data-stage] body>:not(.stage){display:none!important}html[data-stage] body{margin:0;overflow-x:hidden}html[data-stage]:has(.stage[data-stage-app=plumber]){background:#0a1620}html[data-stage]:has(.stage[data-stage-app=cafe]){background:#f6f1e6}.stage,.stage *{box-sizing:border-box}.stage[data-stage-app=plumber]{--text:#e8f1f5;--mute:#a9bfcb;--soft:#cfe0ea;--lit:#6fd6ea;--acc:#1fb5d3;--hot:#cfe0ea;--line:#6fd6ea47;--plate:#091621db;--plate-top:#1fb5d31f;--disp:"Poppins", "DM Sans", system-ui, sans-serif;--disp-w:700;--focus:#6fd6ea;--glow:0 0 .6em #1fb5d38c, 0 0 1.6em #1fb5d340;--bezel:#22323f;--bezel-hi:#7f9bb0;--bezel-lo:#0b141b;--btn:#31434f;background:radial-gradient(42% 62% at 36% 48%,#1fb5d32b,#0000 72%),radial-gradient(50% 40% at 92% 6%,#8fa6b821,#0000 70%),radial-gradient(60% 36% at 50% 112%,#1fb5d31f,#0000 70%),linear-gradient(#0c1b27 0%,#0a1620 46%,#07111a 100%)}.stage[data-stage-app=cafe]{--text:#231c15;--mute:#574e43;--soft:#574e43;--lit:#1d4a3a;--acc:#1d4a3a;--hot:#a3213a;--line:#d7d1c3;--plate:#fffcf5;--plate-top:#1d4a3a0f;--disp:"Playfair Display", Georgia, serif;--disp-w:700;--focus:#1d4a3a;--glow:none;--bezel:#1b2a24;--bezel-hi:#7a8f84;--bezel-lo:#0a110e;--btn:#2b3b34;background:radial-gradient(40% 60% at 36% 48%,#a3213a17,#0000 72%),radial-gradient(52% 46% at 4% 100%,#1d4a3a21,#0000 70%),radial-gradient(46% 40% at 96% 2%,#fffcf5e6,#0000 70%),linear-gradient(#f8f3e9 0%,#f3ecdd 52%,#ebe3d2 100%)}.stage[data-stage-app=cafe]:before{content:"";z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,#231c1507 0 1px,#0000 1px 4px),repeating-linear-gradient(90deg,#231c1507 0 1px,#0000 1px 4px);position:absolute;inset:0}.stage{--screen-w:396px;--screen-h:clamp(520px, calc(100dvh - 5.5rem), 844px);--bz:14px;--qr:150px;isolation:isolate;min-height:100dvh;color:var(--text);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;justify-content:center;align-items:center;padding:1.5rem 2rem;font:400 1rem/1.55 DM Sans,system-ui,sans-serif;display:flex;position:relative;overflow:clip}.stage__grain{z-index:-1;pointer-events:none;opacity:.7;background-size:128px 128px;position:absolute;inset:0}.stage[data-stage-app=cafe] .stage__grain{opacity:.45}.stage__set{justify-content:center;align-items:center;gap:clamp(2.5rem,5vw,4.5rem);width:100%;display:flex}.stage__device{flex:none;position:relative}.stage__halo{z-index:-1;pointer-events:none;position:absolute;inset:-14% -42% -10%;-webkit-mask-image:radial-gradient(closest-side,#000 22%,#0000 100%);mask-image:radial-gradient(closest-side,#000 22%,#0000 100%)}.stage[data-stage-app=plumber] .stage__halo{background:repeating-radial-gradient(circle at 50% 56%,#0000 0 46px,#6fd6ea13 46px 47px)}.stage[data-stage-app=cafe] .stage__halo{background:repeating-radial-gradient(circle at 50% 56%,#0000 0 46px,#a3213a0f 46px 47px)}.stage__phone{padding:var(--bz);width:calc(var(--screen-w) + var(--bz) * 2);height:calc(var(--screen-h) + var(--bz) * 2);background:conic-gradient(from 200deg at 50% 50%, var(--bezel-hi) 0deg, var(--bezel) 38deg, var(--bezel-lo) 110deg, var(--bezel) 172deg, var(--bezel-hi) 214deg, var(--bezel) 262deg, var(--bezel-lo) 318deg, var(--bezel-hi) 360deg);border-radius:56px;position:relative;box-shadow:inset 0 0 0 1px #ffffff57,inset 0 0 0 2px #00000059,inset 0 2px 1px #ffffff73,inset 0 -2px 2px #00000080,0 0 0 1px #0000008c,0 2px 3px #00000059,0 18px 24px -10px #0000008c,0 46px 70px -22px #0009}.stage[data-stage-app=cafe] .stage__phone{box-shadow:inset 0 0 0 1px #ffffff4d,inset 0 0 0 2px #00000059,inset 0 2px 1px #fff6,inset 0 -2px 2px #00000080,0 0 0 1px #140e0880,0 2px 3px #231c154d,0 20px 26px -12px #231c1580,0 50px 70px -26px #3c281480}.stage__phone:before,.stage__phone:after{content:"";background:linear-gradient(90deg, var(--bezel-lo), var(--btn) 45%, var(--bezel-hi));border-radius:2px;width:4px;position:absolute;box-shadow:inset 0 1px #ffffff4d}.stage__phone:before{height:74px;top:17%;left:-3px;transform:scaleX(-1)}.stage__phone:after{height:104px;top:24%;right:-3px}.stage__glass{border-radius:calc(56px - var(--bz) + 1px);background:#05080a;width:100%;height:100%;padding:3px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #000c,0 0 0 2px #ffffff12}.stage__glass:after{content:"";z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(112deg,#ffffff13 0%,#ffffff05 22%,#0000 34%),linear-gradient(#ffffff0d,#0000 9%);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff0f}.stage__screen{border-radius:calc(56px - var(--bz) - 2px);background:#05080a;border:0;width:100%;height:100%;display:block}.stage[data-stage-app=cafe] .stage__screen{background:#f6f1e6}.stage[data-stage-app=plumber] .stage__screen{background:#0a1620}.stage__note{flex:0 29rem;min-width:0}.stage__kicker{letter-spacing:.16em;text-transform:uppercase;color:var(--lit);align-items:center;gap:.7rem;margin:0 0 .9rem;font:600 .78rem/1 DM Sans,system-ui,sans-serif;display:flex}.stage[data-stage-app=cafe] .stage__kicker{color:var(--hot)}.stage__kicker:after{content:"";opacity:.8;width:2.2rem;height:2px;box-shadow:var(--glow);background:currentColor}.stage__title{font:var(--disp-w) clamp(2.8rem, 4.6vw, 4.2rem)/1 var(--disp);letter-spacing:-.015em;text-wrap:balance;color:var(--text);margin:0}.stage[data-stage-app=plumber] .stage__title{text-shadow:0 0 .45em #1fb5d366}.stage__tag{color:var(--soft);text-wrap:balance;margin:.5rem 0 0;font:500 1.28rem/1.3 DM Sans,system-ui,sans-serif}.stage__what{max-width:32em;color:var(--mute);text-wrap:pretty;margin:1.1rem 0 0}.stage__plate{border:1px solid var(--line);background:linear-gradient(180deg, var(--plate-top), transparent 55%), var(--plate);border-radius:3px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.1rem;margin:1.5rem 0 0;padding:1.1rem;display:grid;position:relative}.stage[data-stage-app=plumber] .stage__plate{box-shadow:0 1.5rem 3rem -1.5rem #000000b3}.stage[data-stage-app=cafe] .stage__plate{box-shadow:inset 0 1px #fffc,0 1.2rem 2rem -1.4rem #3c281473}.stage__plate:before{content:"";pointer-events:none;background:linear-gradient(90deg, var(--lit), transparent 78%);height:2px;box-shadow:var(--glow);opacity:.9;position:absolute;top:-1px;left:-1px;right:-1px}.stage__plate:after{content:"";pointer-events:none;background:linear-gradient(var(--hot), var(--hot)) top left / 16px 2px no-repeat, linear-gradient(var(--hot), var(--hot)) top left / 2px 16px no-repeat, linear-gradient(var(--hot), var(--hot)) top right / 16px 2px no-repeat, linear-gradient(var(--hot), var(--hot)) top right / 2px 16px no-repeat, linear-gradient(var(--lit), var(--lit)) bottom left / 16px 2px no-repeat, linear-gradient(var(--lit), var(--lit)) bottom left / 2px 16px no-repeat, linear-gradient(var(--lit), var(--lit)) bottom right / 16px 2px no-repeat, linear-gradient(var(--lit), var(--lit)) bottom right / 2px 16px no-repeat;position:absolute;inset:-1px}.stage__qr{margin:0}.stage__code{width:var(--qr);height:var(--qr);color:#0a1620;background:#fff;border-radius:3px;display:block}.stage[data-stage-app=plumber] .stage__code{box-shadow:0 0 0 1px #ffffff80,0 0 1.4rem #6fd6ea59}.stage[data-stage-app=cafe] .stage__code{color:#231c15;box-shadow:0 0 0 1px #d7d1c3,0 .5rem 1.2rem -.5rem #3c281466}.stage__steps{counter-reset:step;gap:1rem;margin:0;padding:0;list-style:none;display:grid}.stage__steps li{counter-increment:step;color:var(--text);text-wrap:pretty;padding-top:1.7rem;font-size:.97rem;line-height:1.45;position:relative}.stage__steps li:before{content:counter(step, decimal-leading-zero);font:var(--disp-w) 1.15rem/1 var(--disp);color:var(--lit);text-shadow:var(--glow);position:absolute;top:0;left:0}.stage[data-stage-app=cafe] .stage__steps li:before{color:var(--hot)}.stage__url{letter-spacing:.01em;color:var(--mute);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;margin:.9rem 0 0;font-size:.82rem;line-height:1.4}.stage__back{border:1px solid var(--lit);min-height:2.75rem;color:var(--lit);border-radius:999px;align-items:center;margin-top:1.1rem;padding:0 1.35rem;font:600 .95rem/1 DM Sans,system-ui,sans-serif;text-decoration:none;transition:background-color .16s ease-out,transform .16s ease-out;display:inline-flex}.stage__back:before{content:"←";margin-right:.55rem;font-weight:500}.stage__back:hover{background:color-mix(in srgb, var(--lit) 14%, transparent)}.stage__back:active{transform:scale(.97)}.stage__back:focus-visible{outline:3px solid var(--focus);outline-offset:3px}@keyframes stage-in{0%{opacity:0;transform:translateY(10px)}}@media (prefers-reduced-motion:no-preference){.stage__device{animation:.22s cubic-bezier(.23,1,.32,1) both stage-in}.stage__note{animation:.22s cubic-bezier(.23,1,.32,1) 50ms both stage-in}}@media (min-width:1320px){.stage__set{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;display:grid}.stage__device{grid-column:2}.stage__note{--lead:clamp(2.5rem, 3.4vw, 4rem);width:min(29rem, calc(100% - var(--lead)));margin-left:var(--lead);flex:none;grid-column:3;justify-self:start}}@media (min-width:1500px){.stage{--qr:176px}}@media (max-width:900px){.stage{align-items:flex-start}.stage__set{flex-direction:column;gap:2rem}.stage__note{flex:none;width:min(100%,29rem)}}@media (min-width:1800px) and (min-height:1000px){html[data-stage]{font-size:18px}.stage{--screen-w:418px;--screen-h:clamp(520px, calc(100dvh - 7rem), 900px);--qr:200px}.stage__note{width:min(33rem, calc(100% - var(--lead)))}}@media (forced-colors:active){.stage__phone{background:canvas;border:3px solid canvastext}.stage__glass,.stage__plate{border:1px solid canvastext}.stage__plate:before,.stage__plate:after,.stage__halo,.stage__grain{display:none}.stage__back{color:linktext;border:2px solid linktext}}