/* ========================================================================== The HOOBZONE — chaos mode Site layer on top of the design tokens (styles.css). Square corners only. ========================================================================== */ /* No background on : body's background must propagate to the canvas, otherwise body paints over the fixed z-index:-1 .bg layer. */ body{margin:0;min-height:100vh} *,*::before,*::after{box-sizing:border-box} button{font:inherit} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} :focus-visible{outline:2px dashed var(--sage-100);outline-offset:2px} /* Links that are really cards/buttons: no highlight, no underline */ a.bare,a.bare:hover{background:none;text-decoration:none;color:inherit} /* ---------- type helpers ---------- */ .px{font-family:var(--font-pixel);letter-spacing:0.05em} .mono{font-family:var(--font-mono)} .serif{font-family:var(--font-serif);color:var(--text-body);font-size:15px;line-height:1.6} .prose{font-family:var(--font-serif);color:var(--text-body);font-size:15px;line-height:1.7} .hi{color:var(--sage-300)} .faint{color:var(--ink-faint)} .px-link{background:none;font-family:var(--font-pixel);font-size:13px;letter-spacing:0.05em} /* ========================================================================== Background: stars, drifting clouds, thunder, vignette ========================================================================== */ .bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#000;pointer-events:none} .bg__flash{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity 0.1s} .bg__stars{position:absolute;inset:0;background:url('../assets/gifs/spacebg.gif') repeat;mix-blend-mode:screen} .bg__cloud{position:absolute;left:0;right:0;height:362px;opacity:0.1;overflow:hidden} .bg__cloud>div{width:2505px;height:100%;background:url('../assets/images/cloud.png');animation:hz-clouds var(--dur,15s) linear infinite} .bg__vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0%,#000 100%);opacity:0.6} /* ========================================================================== Splash / ENTER ========================================================================== */ .splash{position:fixed;inset:0;z-index:50;overflow:hidden;transition:opacity 0.4s ease-out} .splash.is-leaving{opacity:0} .splash.is-rising{pointer-events:none} /* Own sky layer so it can scroll + fade into the site .bg independently of the ground */ .splash__sky{position:absolute;inset:0;background:#050505 url('../assets/gifs/spacebg.gif') repeat} .splash__vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0%,rgba(0,0,0,0.85) 100%);pointer-events:none} .splash__skyline{position:absolute;left:0;right:0;bottom:0;height:240px;background:url('../assets/images/skyline-dither.png') repeat-x bottom;image-rendering:pixelated;pointer-events:none} .splash__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px} /* Content spacing follows the live site's splash card */ .splash__box{border:1px dashed var(--sage-600);background:rgba(5,5,5,0.9);padding:32px;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center} .splash__box p{margin:0} .splash__wordmark{font-family:var(--font-hand);font-weight:400;font-size:60px;line-height:1;color:#fff;margin:0;filter:drop-shadow(0 0 5px #fff);transform:rotate(-2deg);animation:hz-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite} .splash__rule{height:1px;width:75%;background:linear-gradient(to right,transparent,var(--sage-300),transparent)} .splash__version{display:flex;align-items:center;gap:12px} .splash__version img{width:24px;height:24px;opacity:0.7} .splash__version p{font-family:var(--font-pixel);font-size:20px;color:var(--sage-300);letter-spacing:0.1em;white-space:nowrap} .splash__text{font-family:var(--font-serif);font-size:14px;line-height:1.625;color:var(--ink-body);max-width:320px} .splash__text span{color:#fff} .splash__text .splash__quote{margin-top:16px;font-style:italic;color:var(--sage-600)} @keyframes hz-pulse{50%{opacity:0.5}} @media (max-width:767px){.splash__wordmark{font-size:48px}.splash__box{padding:24px}} @media (max-width:400px){.splash__version{gap:8px}.splash__version p{font-size:16px;letter-spacing:0.05em}} /* ENTER (msx.horse-style): a solid, tilted label that inverts against the info box. Static at rest. On hover it takes the box's colors, grows a marching-ants border, and jitters — skewing, shifting and squashing/stretching through 11 stepped poses. */ .splash__enter{position:relative;margin-top:-1px;font-family:var(--font-mono);font-weight:bold;font-size:34px;letter-spacing:0.35em;padding:8px 26px 8px 34px;line-height:1;color:#000;background:var(--sage-100);border:2px solid var(--sage-100);transform:rotate(2deg)} .splash__enter:hover,.splash__enter:focus-visible,.splash.is-rising .splash__enter{ outline:none; color:var(--sage-100); text-shadow:2px 2px 0 var(--sage-800); border-color:transparent; background: linear-gradient(90deg,var(--sage-300) 50%,transparent 50%) repeat-x 0 0/8px 2px, linear-gradient(90deg,var(--sage-300) 50%,transparent 50%) repeat-x 0 100%/8px 2px, linear-gradient(0deg,var(--sage-300) 50%,transparent 50%) repeat-y 0 0/2px 8px, linear-gradient(0deg,var(--sage-300) 50%,transparent 50%) repeat-y 100% 0/2px 8px, rgba(5,5,5,0.9); background-origin:border-box; animation:hz-enter-jitter 0.9s steps(1) infinite,hz-ants 0.4s linear infinite; } @keyframes hz-enter-jitter{ 0%{transform:skew(-7deg) translate(0,0) scale(1,1.03)} 10%{transform:skew(0.3deg) translate(-1px,0) scale(1.07,1)} 20%{transform:skew(2deg) translate(3px,0) scale(1,1)} 30%{transform:skew(0deg) translate(0,2px) scale(1.08,1)} 40%{transform:skew(-0.5deg) translate(1px,-5px) scale(1,1.004)} 50%{transform:skew(-0.5deg) translate(0,0) scale(1.1,1)} 60%{transform:skew(0deg) translate(-3px,0) scale(1,1)} 70%{transform:skew(0.5deg) translate(-1px,-4px) scale(0.95,1)} 80%{transform:skew(3deg) translate(3px,0) scale(1,1.03)} 90%{transform:skew(1deg) translate(0,0) scale(1.08,1)} 100%{transform:skew(-0.5deg) translate(1px,5px) scale(1,1.12)} } @keyframes hz-ants{ from{background-position:0 0,0 100%,0 0,100% 0,0 0} to{background-position:8px 0,-8px 100%,0 -8px,100% 8px,0 0} } .splash__foot{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--font-pixel);font-size:13px;color:var(--ink-faint);padding:0 12px} /* ========================================================================== App chrome ========================================================================== */ .app{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;padding-bottom:40px} .main{margin:0 auto;padding:8px 16px 0;max-width:900px;width:100%;flex-grow:1} .main:focus{outline:none} /* Header wordmark with layered slice glitch */ .header{padding:36px 0 8px;text-align:center;position:relative} .header__tilt{display:inline-block;transform:rotate(-2deg)} .header__kicker{display:block;font-family:var(--font-pixel);font-size:clamp(18px,3vw,30px);color:var(--ink-dim);transform:rotate(2deg);letter-spacing:var(--tracking-wide);margin-bottom:-6px} .header__title{margin:0;font-size:inherit;font-weight:inherit} /* Glow as a drop-shadow filter on the whole word (like the live site), so the glitch slices glow too */ .glitch-word{position:relative;display:inline-block;filter:drop-shadow(0 0 10px rgba(255,255,255,0.8))} .glitch-word__base,.glitch-word__layer{font-family:var(--font-hand);font-weight:700;font-size:clamp(48px,10vw,96px);line-height:1;white-space:nowrap} .glitch-word__base{display:inline-block;color:#fff} .glitch-word__layer{position:absolute;clip-path:inset(0 0 100% 0);pointer-events:none} .glitch-word__layer--a{left:-4px;top:3px;color:var(--sage-300);opacity:0.9;animation:hz-glitch-a 6s steps(1) infinite} .glitch-word__layer--b{left:4px;top:-3px;color:#fff;opacity:0.75;animation:hz-glitch-b 8.5s steps(1) infinite} /* Crooked sticker nav */ .nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:20px 0 8px;padding:0 8px} .nav__link{font-family:var(--font-pixel);font-size:20px;letter-spacing:0.1em;padding:4px 14px;cursor:pointer;transform:rotate(var(--tilt));background:rgba(5,5,5,0.85);color:var(--sage-300);border:2px dashed var(--sage-600);box-shadow:3px 3px 0 #000;transition:all 0.15s;text-decoration:none} .nav__link:hover{background:var(--sage-800);color:#fff;text-decoration:none;transform:rotate(calc(var(--tilt) * -1)) scale(1.08)} .nav__link.is-active,.nav__link.is-active:hover{background:var(--sage-300);color:#000;border:3px solid #fff;box-shadow:0 0 15px rgba(178,191,184,0.6),4px 4px 0 #000;transform:rotate(var(--tilt))} /* Footer */ .footer{margin-top:56px;text-align:center;padding:20px 16px 60px;border-top:2px dashed var(--sage-800)} .footer__row{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;opacity:0.85} .footer__row img{width:20px;height:20px} .footer__copy{font-family:var(--font-pixel);color:#fff;font-size:17px} .footer__dont{display:inline-block;border:1px dashed var(--sage-800);color:var(--ink-faint);font-family:var(--font-pixel);font-size:13px;transform:rotate(-1deg);padding:2px 8px} .footer__dont:hover{color:var(--sage-100)} /* Fixed bottom marquee */ .ticker{position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(47,56,51,0.92);border-top:2px solid var(--sage-300);overflow:hidden;padding:2px 0} .ticker__text{white-space:nowrap;animation:hz-marquee 18s linear infinite;font-family:var(--font-pixel);font-size:16px;color:var(--sage-100);letter-spacing:0.15em} /* Floating music player — only when there's room */ .float-player{position:fixed;bottom:32px;right:12px;z-index:40;width:250px} @media (max-width:1279px){.float-player{display:none}} @media (max-width:768px){.hide-mobile{display:none!important}} /* ========================================================================== Core components ========================================================================== */ /* GlitchTitle */ .gtitle{text-align:center;position:relative} .gtitle__h{font-family:var(--font-hand);font-weight:700;font-size:var(--size,48px);color:#fff;text-shadow:0 0 10px rgba(255,255,255,0.8);transform:rotate(-2deg);display:inline-block;margin:0;line-height:1} .gtitle__h>span{display:inline-block} .page-title{text-align:center;margin-bottom:24px} .page-title__sub{font-family:var(--font-pixel);font-size:15px;color:var(--sage-600);margin:4px 0 0;letter-spacing:0.15em} /* Divider */ .hz-divider{margin:var(--space-6) 0} .hz-divider span{letter-spacing:var(--tracking-widest)} /* PixelCard */ .pcard{background-color:var(--surface-card);border:var(--frame-dashed);padding:4px;position:relative} .pcard--space{background:rgba(0,0,0,0.6) url('../assets/gifs/spacebg.gif')} .pcard--space2{background:rgba(0,0,0,0.6) url('../assets/gifs/space_bg.2.gif')} .pcard__inner{border:var(--frame-inner);padding:16px;position:relative;height:100%} .pcard__star{position:absolute;color:var(--sage-300);font-size:12px;line-height:1} .pcard__star--tl{top:-5px;left:-5px}.pcard__star--tr{top:-5px;right:-5px} .pcard__star--bl{bottom:-5px;left:-5px}.pcard__star--br{bottom:-5px;right:-5px} .pcard__title{background:var(--sage-800);color:var(--sage-300);font-family:var(--font-pixel);font-size:var(--text-xl);padding:2px 8px;margin:0 0 var(--space-4);display:inline-block;border:1px solid var(--sage-300);font-weight:normal} /* Clickable card lift */ .lift{display:block;cursor:pointer;transition:transform 0.2s ease} .lift:hover{transform:translateY(-2px)} .lift:hover .more{color:#fff} /* Win95Button */ .w95{display:inline-block;background-color:var(--sage-800);color:var(--sage-100);font-family:var(--font-pixel);font-size:var(--text-lg);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:4px 12px;cursor:pointer;line-height:1.2;border:2px solid;border-color:var(--sage-300) #000 #000 var(--sage-300);box-shadow:1px 1px 0 #000;text-decoration:none;transition:filter 0.2s ease} .w95:hover{color:#fff;background:var(--sage-800);text-decoration:none;filter:brightness(1.25)} .w95:not([disabled]):active{border-color:#000 var(--sage-300) var(--sage-300) #000;box-shadow:none;transform:translate(1px,1px)} .w95[disabled]{opacity:0.5;cursor:not-allowed;filter:none} .back-bar{margin-bottom:16px} /* WebButton (88x31) */ .webbtn-link{display:inline-block;background:none} .webbtn-link:hover{background:none} .webbtn{display:flex;width:var(--webbtn-w);height:var(--webbtn-h);border:1px solid var(--sage-300);background-image:linear-gradient(to bottom right,var(--from,var(--sage-600)),#000);position:relative;overflow:hidden;align-items:center;justify-content:center;transition:all 0.2s ease} .webbtn__label{font-family:var(--font-pixel);font-size:12px;color:#fff;line-height:1;text-align:center;padding:0 4px;text-shadow:1px 1px 0 #000} .webbtn__scan{position:absolute;inset:0;pointer-events:none;opacity:0.5} .webbtn-img{width:var(--webbtn-w);height:var(--webbtn-h);image-rendering:pixelated;display:block} .webbtn-link:hover .webbtn,.webbtn-link:hover .webbtn-img{filter:brightness(1.25);box-shadow:var(--glow-sage)} .btn-wall{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .btn-wall--space{padding:16px;background:url('../assets/gifs/spacebg.gif')} /* ScoreCard */ .score__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px} .score__title{font-family:var(--font-pixel);font-size:var(--text-xl);color:var(--sage-300);letter-spacing:var(--tracking-wide);border-bottom:1px solid var(--sage-600);padding-bottom:2px;margin:0;font-weight:normal} .score__cat{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:4px;text-transform:uppercase} .score__badge{text-align:center;background:#000;border:2px solid var(--sage-300);padding:4px 10px;flex-shrink:0;box-shadow:var(--glow-sage-soft)} .score__num{font-family:var(--font-pixel);font-size:28px;color:#fff;line-height:1;text-shadow:var(--glow-sage)} .score__max{font-family:var(--font-mono);font-size:9px;color:var(--sage-600)} .score__img{width:100%;max-height:160px;object-fit:cover;border:4px solid var(--sage-800);opacity:0.9;display:block;margin-bottom:12px} .score__verdict{font-style:italic;text-align:center;padding:8px;background:var(--surface-card-tint);border:1px solid var(--sage-600);font-family:var(--font-serif);color:var(--text-body);font-size:14px;margin-bottom:12px} .score__body{font-family:var(--font-serif);color:var(--text-body);font-size:14px;line-height:var(--leading-body);text-align:justify;text-indent:16px} .score__verdict:last-child,.score__img:last-child{margin-bottom:0} /* Star rating */ .stars{color:var(--sage-300);letter-spacing:2px;white-space:nowrap} .stars__off{opacity:0.25} /* Guestbook */ .gbook{background:var(--surface-card);border:var(--frame-double);padding:16px;width:100%} .gbook__title{color:var(--sage-300);font-family:var(--font-pixel);font-size:var(--text-2xl);margin:0 0 16px;text-align:center;font-weight:normal} .gbook__form{margin-bottom:24px;border-bottom:1px solid var(--border-hairline);padding-bottom:16px} .field-row{margin-bottom:8px} .field-label{color:#fff;font-family:var(--font-pixel);font-size:14px;display:block;margin-bottom:4px} .field{width:100%;background:var(--surface-well);border:1px solid var(--sage-600);color:var(--sage-300);font-family:var(--font-mono);font-size:13px;padding:4px;outline:none;border-radius:0} .field:focus{border-color:var(--sage-300);box-shadow:var(--glow-sage)} textarea.field{height:80px;resize:none} .gbook__submit{background:var(--sage-800);color:var(--sage-300);font-family:var(--font-pixel);font-size:var(--text-base);padding:4px 16px;border:2px solid var(--sage-300);cursor:pointer;transition:all 0.2s ease} .gbook__submit:hover{color:#fff;box-shadow:var(--glow-sage)} .gbook__list{display:flex;flex-direction:column;gap:12px;max-height:240px;overflow-y:auto;padding-right:8px;margin:0;list-style:none;padding-left:0} .gbook__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .gbook__status{margin:8px 0 0;min-height:1em;font-family:var(--font-pixel);font-size:var(--text-base);color:var(--sage-300)} .gbook__status:empty{display:none} .gbook__empty{font-family:var(--font-pixel);font-size:var(--text-lg);color:var(--text-muted);text-align:center;padding:16px 8px;letter-spacing:0.1em} .gbook__entry{border:1px solid var(--border-hairline);background:rgba(17,24,39,0.5);padding:8px} .gbook__meta{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;border-bottom:1px solid #1f2937;padding-bottom:4px;margin-bottom:4px} .gbook__name{font-weight:bold;color:var(--sage-300);font-family:var(--font-pixel);font-size:var(--text-lg)} .gbook__date{font-size:10px;color:var(--text-muted);font-family:var(--font-mono);text-align:right} .gbook__msg{color:var(--text-body);font-family:var(--font-serif);font-size:14px;margin:0;overflow-wrap:anywhere} /* MusicPlayer */ .player{border:var(--frame-double);background:#000;padding:14px 16px;box-shadow:var(--shadow-panel);text-align:center;position:relative;overflow:hidden} .player__corner{position:absolute;color:var(--sage-800);font-size:12px} .player__corner--tl{top:4px;left:4px}.player__corner--bl{bottom:4px;left:4px}.player__corner--br{bottom:4px;right:4px} .player__btn{background:none;border:none;color:var(--sage-300);font-family:var(--font-pixel);font-size:var(--text-lg);cursor:pointer;transition:all 0.2s ease;padding:0} .player__btn:hover{color:#fff;text-shadow:var(--glow-sage)} .player__min{position:absolute;top:2px;right:6px;font-size:15px;color:var(--sage-600)} .player__min:hover{color:var(--sage-100)} .player__title{font-family:var(--font-pixel);color:var(--sage-300);font-size:var(--text-xl);margin-bottom:10px;border-bottom:1px solid var(--sage-800);padding-bottom:4px;letter-spacing:var(--tracking-widest)} .player__track{display:flex;align-items:center;gap:10px;margin-bottom:12px;text-align:left} .player__art{position:relative;width:56px;height:56px;flex-shrink:0;border:2px solid var(--sage-800);background:var(--sage-900);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--sage-600);font-size:22px} .player__art img{width:100%;height:100%;object-fit:cover;display:block;opacity:0.85;transition:opacity var(--dur-fast) ease} .player:hover .player__art img{opacity:1} .player__art-scan{position:absolute;inset:0;opacity:0.35;pointer-events:none} .player__meta{min-width:0;flex:1} .player__song{font-family:var(--font-serif);font-style:italic;font-size:14px;line-height:1.3;color:var(--text-body);overflow-wrap:anywhere} .player__artist{font-family:var(--font-pixel);font-size:15px;letter-spacing:0.05em;color:var(--sage-300);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .player__album{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .player__bar{width:100%;height:10px;background:var(--surface-well);border:1px solid var(--border-hairline);margin-bottom:12px;cursor:pointer} .player__fill{height:100%;background:var(--sage-600);width:0;position:relative} .player__fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:#fff;opacity:0.5} .player__controls{display:flex;justify-content:space-between;align-items:center;padding:0 8px;margin-bottom:12px} .player__foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--sage-800);padding-top:8px;gap:8px} .player__time{font-family:var(--font-mono);font-size:12px;color:var(--sage-600)} .player__vol{display:flex;align-items:center;gap:6px;flex:1;max-width:110px;min-width:0} .player__vol span{font-size:10px;color:var(--sage-600);font-family:var(--font-pixel)} .player__vol input{flex:1;width:100%;min-width:0;height:4px;accent-color:var(--sage-300);background:var(--sage-800);cursor:pointer;margin:0} .player--mini{padding:4px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left} .player__mini-label{font-family:var(--font-pixel);font-size:14px;color:var(--sage-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.05em} /* ========================================================================== HOME ========================================================================== */ .stack{display:flex;flex-direction:column;gap:24px} .stack--28{gap:28px} .stack--20{gap:20px} .narrow{max-width:var(--w,640px);margin:0 auto;width:100%} .construction{text-align:center;padding:10px 8px;border:3px dashed rgba(133,100,4,0.9);background:rgba(113,63,18,0.15)} .construction span{color:#ca8a04;font-family:var(--font-pixel);font-size:20px;letter-spacing:0.1em} .welcome{display:flex;gap:16px} .welcome__img{width:130px;height:130px;object-fit:cover;border:2px dashed var(--sage-300);flex-shrink:0} .welcome p{margin:0 0 8px} .welcome .welcome__note{font-size:12px;color:var(--sage-300);background:#000;display:inline-block;padding:0 4px;margin:0} .home-cols{display:flex;gap:24px;flex-wrap:wrap} .home-cols__main{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:24px} .home-cols__aside{flex:0 1 240px;min-width:220px;display:flex;flex-direction:column;gap:16px} @media (max-width:700px){.home-cols__aside{flex-basis:100%}} .wire{display:flex;flex-direction:column;list-style:none;margin:0;padding:0} .wire__item{display:block;padding:7px 4px;border-bottom:1px dashed var(--sage-800)} .wire li:last-child .wire__item{border-bottom:none} .wire__item:hover{background:rgba(47,56,51,0.35)} .wire__item:hover .wire__title{color:#fff} .tag{font-family:var(--font-pixel);font-size:12px;letter-spacing:0.05em;color:#000;background:var(--sage-300);padding:0 5px;margin-right:8px;vertical-align:middle} .wire__title{font-family:var(--font-serif);font-size:14px;line-height:1.6;color:var(--sage-100)} .wire__meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin-top:2px} .changelog__updated{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin-bottom:10px} .changelog{display:flex;flex-direction:column;gap:12px;font-size:14px} .changelog__entry{border-bottom:1px solid #1f2937;padding-bottom:8px} .changelog__entry:last-child{border-bottom:none;padding-bottom:0} .changelog h4{font-family:var(--font-pixel);font-size:16px;letter-spacing:0.05em;color:var(--sage-300);margin:0 0 4px;font-weight:normal} .changelog p{margin:0} .shrine{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .shrine__img{width:110px;height:74px;object-fit:cover;border:3px solid var(--sage-800);opacity:0.9;flex-shrink:0} .shrine__body{flex:1;min-width:180px} .shrine__name{font-family:var(--font-pixel);font-size:17px;letter-spacing:0.05em;color:var(--sage-100);margin-bottom:4px} .shrine__quote{font-size:13px;font-style:italic;color:var(--sage-300);margin-bottom:6px} .sidebox{border:2px solid var(--sage-600);background:rgba(5,5,5,0.85);padding:10px} .sidebox__label{font-family:var(--font-pixel);font-size:14px;color:var(--sage-300);text-align:center;margin:0 0 8px;letter-spacing:0.12em;border-bottom:1px solid var(--sage-800);padding-bottom:4px;font-weight:normal} .kv{display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:12px;color:var(--text-body);margin:0} .kv--loose{gap:6px} .kv__row{display:flex;justify-content:space-between;align-items:center;gap:8px} .kv dt,.kv dd{margin:0} .kv__k{color:var(--sage-600)} .kv__v{color:var(--sage-100)} .odometer{background:#000;border:1px solid var(--border-hairline);padding:1px 6px;color:#fff;font-family:var(--font-pixel);font-size:16px;letter-spacing:0.08em} .sidebox__quote{font-size:13px;font-style:italic;margin:0} .sidebox__gb{font-size:13px;margin:0;overflow-wrap:anywhere} .sidebox__gbmeta{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin-top:6px;display:flex;justify-content:space-between;gap:8px} .linkme{display:flex;flex-direction:column;gap:6px;align-items:center;margin-bottom:8px} .linkme img{image-rendering:pixelated} .linkme__code{width:100%;height:40px;background:var(--surface-well);border:1px solid #1f2937;font-size:10px;color:var(--ink-faint);padding:4px;font-family:var(--font-mono);resize:none;outline:none;border-radius:0} /* ========================================================================== BLOG ========================================================================== */ .post__title{font-family:var(--font-pixel);letter-spacing:0.05em;color:#fff;margin:0 0 8px;font-size:24px;font-weight:normal} .post__title--lg{font-size:28px;margin-bottom:12px} .post__excerpt{margin:0} .post__foot{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .filed{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint)} .more{font-family:var(--font-pixel);font-size:14px;letter-spacing:0.05em;color:var(--sage-300);transition:color 0.2s} .post__body p{margin:0 0 12px} .post__byline{border-top:1px dashed var(--sage-800);padding-top:8px} /* ========================================================================== REVIEWS ========================================================================== */ .review__more{text-align:right;margin-top:6px} .review__body p{margin:0 0 12px;text-indent:16px} .review__body p:last-child{margin-bottom:0} .review__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:start} .breakdown{background:var(--surface-well);border:2px inset #4b5563;padding:10px} .breakdown__label{font-family:var(--font-pixel);font-size:15px;color:var(--sage-300);text-align:center;margin:0 0 8px;letter-spacing:0.15em;border-bottom:1px solid var(--sage-800);padding-bottom:4px} .breakdown__row{display:flex;justify-content:space-between;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-body);padding:3px 0;border-bottom:1px dashed #1f2937} .breakdown__row:last-child{border-bottom:none} .goodbad{display:flex;flex-direction:column;gap:12px} .goodbad__box{padding:10px} .goodbad__box--good{border:1px solid var(--sage-600);background:var(--surface-card-tint)} .goodbad__box--bad{border:1px dashed var(--sage-800);background:rgba(0,0,0,0.5)} .goodbad__label{font-family:var(--font-pixel);font-size:14px;margin:0 0 6px;letter-spacing:0.1em} .goodbad__box--good .goodbad__label{color:var(--sage-100)} .goodbad__box--bad .goodbad__label{color:var(--ink-dim)} .goodbad ul{font-family:var(--font-serif);color:var(--text-body);font-size:13px;line-height:1.7;margin:0;padding-left:18px} .goodbad__box--bad ul{color:var(--ink-dim)} /* ========================================================================== PROJECTS / ABOUT / 404 ========================================================================== */ .projects__intro{font-size:14px;margin:0 0 12px} .profile{display:flex;gap:20px;flex-wrap:wrap} .avatar{width:128px;height:128px;border:2px solid #fff;overflow:hidden;position:relative} .avatar img{width:100%;height:100%;object-fit:cover;filter:contrast(1.25);display:block} .avatar__name{position:absolute;bottom:0;left:0;width:100%;background:rgba(47,56,51,0.85);color:var(--sage-300);font-size:13px;text-align:center;font-family:var(--font-pixel)} .online{color:#fff;font-size:12px;text-align:center;margin:8px 0 0;font-family:var(--font-mono)} .mood{width:128px;border:2px solid var(--sage-600);background:#000;padding:3px;margin-top:10px} .mood__inner{border:1px solid var(--sage-800);position:relative} .mood__label{position:absolute;top:0;left:0;background:var(--sage-800);color:var(--sage-300);font-family:var(--font-pixel);font-size:10px;padding:0 4px;opacity:0.9;z-index:1} .mood img{width:100%;display:block;opacity:0.85} .profile__info{flex:1;min-width:220px} .profile__facts{background:var(--surface-card-tint);padding:8px;border:1px solid var(--sage-600);line-height:1.8;margin:0 0 8px} .profile__facts b{color:var(--sage-300)} .profile__info>p{margin:0} .notfound{text-align:center;padding:40px 16px;display:flex;flex-direction:column;gap:20px;align-items:center} .notfound__msg{font-family:var(--font-pixel);font-size:22px;color:var(--sage-300);margin:0;letter-spacing:0.15em} .notfound__img{max-width:260px;border:4px solid var(--sage-800);opacity:0.85} /* ========================================================================== FORUM — The Zone Board ========================================================================== */ .zb{background:rgba(5,5,5,0.88);border:2px solid var(--sage-600);box-shadow:var(--glow-sage-soft)} .zb__bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:#0d0f0e;border-bottom:1px solid var(--sage-600);padding:6px 10px} .zb__crumbs{font-family:var(--font-pixel);font-size:16px;letter-spacing:0.05em;color:var(--sage-300);margin:0} .zb__crumbs a{background:none} .zb__actions{display:flex;gap:6px;flex-wrap:wrap} .zb__body{padding:12px;overflow-x:auto} .zb-table{width:100%;border-collapse:collapse;min-width:560px} .zb-table--threads{min-width:620px} .zb-table th{font-family:var(--font-pixel);font-size:15px;letter-spacing:0.05em;color:var(--sage-100);background:var(--sage-800);padding:4px 8px;text-align:left;border-bottom:2px solid var(--sage-300);white-space:nowrap;font-weight:normal} .zb-table td{padding:6px 8px;border-bottom:1px dashed var(--sage-800);vertical-align:top} .zb-table .num{text-align:right} .zb-table tr[data-href]{cursor:pointer} .zb-table tr.is-pinned{background:rgba(47,56,51,0.25)} .zb-table tbody tr:hover{background:rgba(47,56,51,0.45)} .zb-table tbody tr:hover .zb-row-link{color:#fff} .zb-row-link{background:none;color:var(--sage-100)} .zb-row-link:hover{background:none} .zb-board-name{font-family:var(--font-pixel);font-size:18px;letter-spacing:0.05em} .zb-board-desc{font-family:var(--font-serif);font-size:13px;color:var(--ink-dim)} .zb-thread-title{font-family:var(--font-pixel);font-size:16px;letter-spacing:0.05em} .zb-cell-mono{font-family:var(--font-mono);font-size:12px;color:var(--text-body)} .zb-cell-last{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim)} .zb-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint)} .zb-online{margin-top:12px;border-top:1px solid var(--sage-800);padding-top:8px;font-family:var(--font-mono);font-size:11px;color:var(--ink-dim)} .zb-online__label{font-family:var(--font-pixel);font-size:13px;letter-spacing:0.05em;color:var(--sage-300)} .zb-posts{display:flex;flex-direction:column;gap:10px} .zb-post{display:flex;border:1px solid var(--sage-800);background:rgba(13,15,14,0.8)} .zb-post__user{width:130px;flex-shrink:0;border-right:1px dashed var(--sage-800);padding:8px} .zb-post__stats{margin-top:6px} .zb-post__main{flex:1;min-width:0;padding:8px;display:flex;flex-direction:column} .zb-post__meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);border-bottom:1px dashed var(--sage-800);padding-bottom:4px;margin-bottom:6px} .zb-post__text{font-family:var(--font-serif);font-size:14px;color:var(--text-body);line-height:1.6;margin:0;flex:1} .zb-post__sig{border-top:1px dashed var(--sage-800);margin-top:8px;padding-top:4px;font-family:var(--font-mono);font-size:11px;color:var(--sage-600);font-style:italic} .zb-user__name{font-family:var(--font-pixel);font-size:16px;letter-spacing:0.05em;color:var(--sage-300)} .zb-user__name--admin{color:#fff;text-shadow:0 0 6px rgba(255,255,255,0.6)} .zb-notice{text-align:center;padding:10px;border:2px dashed var(--sage-800);font-family:var(--font-pixel);font-size:15px;letter-spacing:0.05em;color:var(--ink-dim)} .zb-register{display:flex;flex-direction:column;gap:10px} .zb-register .field-label{font-size:15px;margin-bottom:3px} .zb-register .field{padding:5px} .zb-register textarea.field{height:64px} .zb-register .w95{align-self:flex-start} .zb-register__note{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);margin:0} @media (max-width:560px){ .zb-post{flex-direction:column} .zb-post__user{width:auto;border-right:none;border-bottom:1px dashed var(--sage-800);display:flex;justify-content:space-between;align-items:flex-start;gap:8px} .zb-post__stats{margin-top:0;text-align:right} } /* ========================================================================== Small screens + reduced motion ========================================================================== */ @media (max-width:480px){ .nav{gap:8px} .nav__link{font-size:17px;padding:3px 10px} .splash__enter{font-size:28px} .pcard__inner{padding:12px} } @media (prefers-reduced-motion:reduce){ .hz-glitch,.hz-blink,.glitch-word__layer,.splash__enter,.splash__wordmark,.bg__cloud>div{animation:none!important} .bg__flash{display:none} .lift:hover,.nav__link:hover{transform:rotate(var(--tilt,0deg))} } /* ---------- forum: accounts, posts, profiles, sysop ---------- */ .zb-me{font-family:var(--font-pixel);font-size:16px;letter-spacing:0.05em;color:#fff;background:none;align-self:center;margin-right:6px} .zb-notice a{color:var(--sage-300)} .zb-notice--warn{border-color:var(--sage-300);color:var(--sage-100)} .zb-status{font-family:var(--font-pixel);font-size:14px;letter-spacing:0.05em;color:var(--sage-300);margin:0;align-self:center} .zb-status:empty{display:none} .zb-status.is-ok{color:#fff} .zb-form{display:flex;flex-direction:column;gap:10px;margin-top:12px} .zb-form .field-label{font-size:15px;margin-bottom:3px} .zb-form__body{min-height:120px;resize:vertical} .zb-form__row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px} .zb-user{display:flex;flex-direction:column;gap:3px} .zb-user__avatar{display:block;width:48px;height:48px;background:none} .zb-user__name a{background:none;color:inherit} .zb-user__title{font-family:var(--font-mono);font-size:10px;color:var(--sage-100);letter-spacing:0.05em;text-transform:uppercase} .avatar{display:inline-block;border:2px solid var(--sage-600);background:#000;object-fit:cover;image-rendering:auto} .avatar--none{width:var(--s);height:var(--s);line-height:calc(var(--s) - 4px);text-align:center;color:var(--sage-800);font-size:calc(var(--s) * 0.5)} .zb-post__meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap} .zb-post__tools{display:flex;gap:4px} .zb-post__tools .w95{font-size:12px;padding:0 6px} .zb-thread-head{margin-bottom:12px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap} .zb-thread-head__title{font-family:var(--font-pixel);font-size:22px;letter-spacing:0.05em;color:#fff;margin:0;font-weight:normal} .zb-rate{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .zb-rate__label{font-family:var(--font-pixel);font-size:13px;letter-spacing:0.05em;color:var(--sage-300)} .zb-rate__star{background:none;border:0;padding:0 1px;color:var(--sage-800);font-size:18px;cursor:pointer;line-height:1} .zb-rate__star.is-on{color:var(--sage-300);text-shadow:0 0 6px rgba(178,191,184,0.6)} .zb-rate__star:not([disabled]):hover{color:#fff} .zb-rate__star[disabled]{cursor:default} .zb-settings{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .zb-avatar-edit{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .zb-avatar-edit .zb-form{flex:1;min-width:200px;margin-top:0} .zb-profile{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px} .zb-profile__main{flex:1;min-width:220px} .zb-profile__name{font-family:var(--font-pixel);font-size:28px;letter-spacing:0.05em;color:var(--sage-300);margin:0 0 4px;font-weight:normal} .zb-profile__title{font-size:12px;margin-bottom:8px} .zb-h4{font-family:var(--font-pixel);font-size:16px;letter-spacing:0.1em;color:var(--sage-300);margin:16px 0 8px;font-weight:normal;border-bottom:1px solid var(--sage-800);padding-bottom:4px} .zb-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .zb-recent li{border:1px solid var(--sage-800);padding:8px;background:rgba(13,15,14,0.8)} .zb-recent__snip{font-size:13px;color:var(--text-body);margin:4px 0} .zb-table--admin{min-width:720px} .zb-table--admin .field{padding:2px 4px;font-size:12px} .zb-table--admin select.field{width:auto} .zb-table--admin tr.is-deleted td{opacity:0.55} .zb-admin-actions{display:flex;gap:4px;flex-wrap:wrap;align-items:center} .zb-admin-actions .w95{font-size:12px;padding:0 6px} .zb-check{font-family:var(--font-mono);font-size:12px;color:var(--text-body);display:inline-flex;gap:4px;align-items:center} .zb-admin-stats .kv__row{gap:12px} .zb__actions .w95[aria-current="page"]{color:#fff;filter:brightness(1.3)}