:root{--paper:#eeeee8;--ink:#171817;--orange:#f86624;--muted:#62665c;--mono:"Courier New",monospace;--sans:Arial,Helvetica,sans-serif;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
.skip-link{position:absolute;top:-80px;left:20px;z-index:10;background:var(--ink);color:white;padding:14px}
.skip-link:focus{top:12px}
.site-shell{min-height:100svh;overflow:hidden;background:var(--paper) url('/assets/glitch-paper-background.png') center/cover;display:flex;flex-direction:column}
.header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px clamp(20px,4vw,64px);position:relative;z-index:2}
.identity{font:12px/1.5 var(--mono);letter-spacing:.7px;color:var(--muted)}
.identity span{color:var(--ink)}
.motion-button{background:transparent;color:var(--ink);border:1px solid #979b8e;padding:9px 12px;min-height:40px;display:flex;align-items:center;gap:9px;font:12px var(--mono);cursor:pointer}
.motion-button:hover{border-color:var(--orange)}
.motion-button:disabled{cursor:default;color:var(--muted)}
.error-page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 20px 32px}
h1{display:flex;align-items:center;justify-content:center;gap:24px;margin:0 0 6px;position:relative;z-index:1}
.error-code{font-size:clamp(80px,10vw,144px);font-weight:900;line-height:.85;letter-spacing:-.095em;padding-right:.08em}
.error-code>span{color:var(--orange)}
.error-name{font-family:var(--mono);font-size:clamp(20px,2.4vw,34px);line-height:1.15;letter-spacing:-.055em;text-align:left;font-weight:700}
.period{color:var(--orange)}
.glitch-word{display:inline-block;position:relative}
.glitch-word:before,.glitch-word:after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0;clip-path:inset(38% 0 45% 0)}
.glitch-word:before{color:var(--orange);animation:text-glitch 5.2s infinite steps(1,end)}
.glitch-word:after{color:#171817;animation:text-glitch 5.2s .09s infinite steps(1,end);clip-path:inset(69% 0 19% 0)}
.dog-art{position:relative;isolation:isolate;width:min(640px,64svh,100%);aspect-ratio:1;flex-shrink:0}
.dog-image{display:block;width:100%;height:100%;object-fit:cover}
.dog-image,.dog-slice{-webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 95%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 95%,transparent);mask-composite:intersect}
.dog-slice{position:absolute;inset:0;background:url('/assets/404-dog.jpg') center/cover;opacity:0;mix-blend-mode:multiply;pointer-events:none}
.slice-one{clip-path:inset(28% 0 65% 0);animation:dog-glitch 5.2s infinite steps(1,end)}
.slice-two{clip-path:inset(63% 0 31% 0);animation:dog-glitch 5.2s .09s infinite steps(1,end)}
.terminal{font:14px/1.6 var(--mono);margin:4px 0 0;letter-spacing:.3px}
.terminal>span:first-child{color:var(--orange);margin-right:7px;font-weight:bold}
.cursor{animation:blink 1.8s step-end infinite}
.privacy{color:var(--muted);font:14px/1.6 var(--mono);margin:8px 0 0}
@keyframes text-glitch{0%,89%,96%,100%{opacity:0;transform:none}90%{opacity:1;transform:translateX(-5px)}92%{opacity:1;transform:translateX(5px)}94%{opacity:1;transform:translateX(-3px)}}
@keyframes dog-glitch{0%,89%,96%,100%{opacity:0;transform:none}90%{opacity:1;transform:translateX(9px)}92%{opacity:1;transform:translateX(-7px)}94%{opacity:1;transform:translateX(4px)}}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after{animation:none!important}
@media(max-width:600px){.site-shell{background-size:auto 100%;background-position:center}.header{padding:16px 20px}.identity{font-size:12px;letter-spacing:0}.motion-button{padding:8px 9px}.error-page{padding:18px 16px 32px}h1{gap:18px;margin-bottom:16px}.dog-art{width:min(480px,110%);max-width:110%}.error-code{font-size:clamp(72px,21vw,116px)}.error-name{font-size:clamp(18px,5.5vw,28px)}.terminal{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.trade-controls{display:flex;justify-content:center;align-items:stretch;gap:10px;flex-wrap:wrap;width:100%;margin-top:22px}
.buy-button,.contract-button{position:relative;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:13px 18px;font:700 14px/1.3 var(--mono);cursor:pointer;transition:background .16s,border-color .16s;max-width:100%}
.buy-button{background:var(--orange);border:1px solid var(--orange);color:var(--ink);min-width:145px}
.buy-button:hover{background:#ff7a3c;border-color:#ff7a3c}
.contract-button{background:rgba(238,238,232,.7);border:1px solid #8a8e82;color:var(--ink)}
.contract-button:hover,.contract-button.is-copied{border-color:var(--orange)}
.contract-prefix{color:var(--muted);font-size:12px;font-weight:400}
.contract-value{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.copy-state{font-size:12px;min-width:65px;text-align:right}
.is-copied .copy-state{color:#9b3000}
.trade-status{font:12px/1.5 var(--mono);color:var(--muted);margin:10px 0 0;min-height:18px;max-width:100%}
.copy-fallback{margin-top:10px;width:min(100%,380px);padding:10px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:14px var(--mono);text-align:center}
.feedback-glitch{animation:click-glitch .28s steps(1,end)}
@keyframes click-glitch{0%,100%{transform:none;text-shadow:none}20%{transform:translateX(-2px);text-shadow:2px 0 #26a9b7,-2px 0 #f86624}45%{transform:translateX(2px);text-shadow:-2px 0 #26a9b7,2px 0 #f86624}70%{transform:translateX(-1px);text-shadow:1px 0 #f86624}}
@media(max-width:480px){.trade-controls{width:min(100%,350px);gap:8px}.buy-button{width:100%}.contract-button{width:100%;gap:12px}.contract-value{flex:1;text-align:left}.trade-status{font-size:12px}}
@media(prefers-reduced-motion:reduce){.feedback-glitch{animation:none}}