:root { --ink:#11101c; --paper:#eeede9; --pink:#ff3ca8; --acid:#d4ff25; --cyan:#31d8ee; --violet:#8365ed; --line:#242231; --muted:#777483; --pixel:"Press Start 2P", monospace; --mono:"IBM Plex Mono", monospace; --display:"VT323", monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#d7d5d1; font-family:var(--mono); font-size:14px; }
button, input, textarea, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; }
.noise { position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"); }
.site-shell { width:min(1240px, 100%); margin:0 auto; background:var(--paper); min-height:100vh; box-shadow:0 0 0 1px #85838a, 0 0 80px rgba(31,16,58,.18); overflow:hidden; }
.masthead { min-height:104px; display:flex; align-items:center; padding:20px 32px; background:var(--ink); color:white; border-bottom:4px solid var(--pink); }
.logo { position:relative; color:white; text-decoration:none; font-family:var(--pixel); font-size:23px; line-height:1.3; text-shadow:3px 3px 0 var(--violet); letter-spacing:0; }
.logo-mark { color:var(--acid); }.logo b { display:block; color:var(--pink); font-size:10px; text-align:right; letter-spacing:4px; text-shadow:none; }
.header-message { margin-left:54px; color:#d5d0dd; font-family:var(--display); font-size:28px; }.header-message span { color:var(--acid); }
.header-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }.icon-button,.mini-icon { display:grid; place-items:center; border:1px solid #686274; color:white; background:transparent; width:38px; height:38px; }.icon-button:hover,.mini-icon:hover { background:var(--pink); border-color:var(--pink); }.icon-button svg,.mini-icon svg { width:17px; }
.profile-button { min-height:38px; padding:0 13px; border:1px solid var(--acid); background:transparent; color:white; font-size:12px; }.status-dot,.online-tag i { display:inline-block; width:7px; height:7px; background:var(--acid); border-radius:50%; box-shadow:0 0 9px var(--acid); margin-right:7px; }
.main-nav { display:flex; align-items:stretch; min-height:53px; border-bottom:1px solid var(--line); background:white; padding-left:32px; }.main-nav a { display:flex; align-items:center; padding:0 20px; text-decoration:none; text-transform:uppercase; font-size:11px; font-weight:600; border-right:1px solid #d4d2d5; }.main-nav a:hover,.main-nav a.active { color:white; background:var(--violet); }.new-thread-nav { border:0; border-left:1px solid var(--line); margin-left:auto; padding:0 24px; color:var(--ink); background:var(--acid); font-family:var(--pixel); font-size:9px; }
main { padding:34px 32px 48px; }.panel { border:1px solid var(--line); box-shadow:4px 4px 0 var(--line); }
.intro-panel { position:relative; min-height:230px; display:flex; justify-content:space-between; overflow:hidden; padding:31px 35px; background:var(--pink); isolation:isolate; }.intro-panel:before { content:""; position:absolute; z-index:-1; width:490px; height:490px; background:var(--acid); border-radius:50%; right:-100px; top:-170px; border:13px solid var(--cyan); }.intro-panel:after { content:""; position:absolute; inset:9px; border:1px dashed rgba(17,16,28,.72); pointer-events:none; }
.eyebrow { margin:0 0 9px; color:var(--violet); font-size:10px; font-weight:600; text-transform:uppercase; }.intro-panel .eyebrow { color:var(--ink); }.intro-copy { max-width:680px; }.intro-copy h1 { margin:0; font-family:var(--pixel); font-size:25px; line-height:1.52; letter-spacing:0; }.intro-copy h1 span { color:white; text-shadow:3px 3px 0 var(--ink); }.intro-text { max-width:455px; margin:17px 0 0; line-height:1.45; font-size:12px; font-weight:500; }
.now-playing { z-index:1; align-self:flex-end; width:190px; padding:14px; background:var(--ink); color:white; border:3px solid white; box-shadow:5px 5px 0 var(--violet); }.now-playing p { margin:0 0 7px; color:var(--acid); text-transform:uppercase; font-size:9px; }.now-playing strong { font-family:var(--display); font-size:24px; font-weight:400; }.play-button { float:right; display:grid; place-items:center; padding:0; width:31px; height:31px; border:0; background:var(--acid); color:var(--ink); }.play-button svg { width:15px; fill:currentColor; }.equalizer { position:absolute; display:flex; gap:3px; transform:translate(110px, -1px); }.equalizer i { display:block; width:3px; height:11px; background:var(--pink); animation:bar .7s infinite alternate; }.equalizer i:nth-child(2n){height:17px;animation-delay:.2s}.equalizer i:nth-child(3n){height:8px;animation-delay:.5s}@keyframes bar{to{transform:scaleY(.35)}}
.now-playing:not(.is-playing) .equalizer i { animation-play-state:paused; }
.intro-sticker { position:absolute; z-index:2; font-family:var(--pixel); font-size:8px; line-height:1.8; }.sticker-star { top:35px; right:252px; transform:rotate(-10deg); color:white; text-shadow:2px 2px var(--ink); }.sticker-arrow { bottom:21px; left:620px; transform:rotate(-10deg); color:var(--ink); }
.ticker { display:flex; height:37px; margin:30px 0 35px; overflow:hidden; border:1px solid var(--line); background:var(--ink); color:white; }.ticker-label { z-index:1; flex:0 0 auto; padding:10px 13px; color:var(--ink); background:var(--acid); font-family:var(--pixel); font-size:8px; }.ticker-window { min-width:0; overflow:hidden; white-space:nowrap; }.ticker p { display:inline-block; margin:9px 0; padding-left:100%; font-family:var(--display); font-size:21px; line-height:18px; animation:ticker 23s linear infinite; }@keyframes ticker{to{transform:translateX(-100%)}}
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:33px; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }.section-heading h2,.card-title h2,.guestbook h2 { margin:0; font-family:var(--display); font-size:39px; font-weight:400; letter-spacing:0; line-height:.85; }.filter-button { display:flex; align-items:center; gap:7px; border:1px solid var(--line); padding:8px 10px; background:white; font-size:10px; }.filter-button svg,.all-link svg { width:13px; }.category-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px; }.tab { border:1px solid var(--line); padding:8px 11px; background:transparent; font-size:10px; }.tab:hover,.tab.active { background:var(--ink); color:white; }
.threads-list { border:1px solid var(--line); background:white; }.thread-card { display:grid; grid-template-columns:56px minmax(0,1fr) 65px; gap:14px; padding:16px; border-bottom:1px solid #d7d5da; }.thread-card:last-child{border:0}.thread-card:hover{background:#fcf6fa}.thread-card.is-hidden{display:none}.thread-icon { display:grid; width:46px; height:46px; place-items:center; color:var(--ink); font-family:var(--pixel); font-size:9px; border:1px solid var(--line); box-shadow:2px 2px 0 var(--line); }.tattoo{background:var(--pink)}.looks{background:var(--acid)}.japan{background:var(--cyan)}.memes{background:#b9a8fa}.thread-meta { display:flex; gap:10px; align-items:center; font-size:9px; color:var(--muted); }.thread-meta span { color:var(--violet); text-transform:uppercase; font-weight:600; }.thread-card h3 { margin:5px 0 4px; font-size:14px; }.thread-link { padding:0; border:0; background:none; font-weight:600; text-align:left; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }.thread-link:hover { color:var(--pink); }.thread-card p { margin:0; color:#57535e; font-size:10px; line-height:1.5; }.thread-author { display:flex; align-items:center; gap:5px; margin-top:9px; color:#5c5863; font-size:9px; }.thread-author b { padding:2px 4px; background:var(--acid); color:var(--ink); font-size:7px; }.avatar { display:inline-grid; place-items:center; flex:0 0 auto; width:23px; height:23px; border:1px solid var(--line); border-radius:50%; color:var(--ink); font-family:var(--pixel); font-size:7px; }.a1{background:var(--pink)}.a2{background:var(--acid)}.a3{background:var(--cyan)}.a4{background:#c6b8ff}.a5{background:#ff9b66}.thread-stats { align-self:center; padding-left:10px; border-left:1px solid #e3e1e4; text-align:center; }.thread-stats strong { display:block; font-family:var(--display); font-size:29px; font-weight:400; line-height:.8; }.thread-stats span { color:var(--muted); font-size:8px; }.load-more { display:flex; align-items:center; justify-content:center; width:100%; gap:6px; margin-top:13px; padding:13px; background:var(--cyan); border:1px solid var(--line); box-shadow:3px 3px 0 var(--line); font-family:var(--pixel); font-size:8px; }.load-more:hover{background:var(--acid)}.load-more svg{width:14px}
.sidebar { display:flex; flex-direction:column; gap:23px; }.profile-card { position:relative; padding:14px; background:var(--ink); color:white; box-shadow:5px 5px 0 var(--pink); }.profile-top { display:flex; justify-content:space-between; align-items:center; }.online-tag { color:var(--acid); text-transform:uppercase; font-size:9px; }.profile-top .mini-icon{width:28px;height:28px;border-color:#4c4957}.profile-top .mini-icon svg{width:14px}.profile-card img { display:block; width:100px; height:100px; margin:15px auto 12px; object-fit:cover; border:3px solid white; filter:grayscale(1) contrast(1.2); }.profile-card h2 { margin:0; text-align:center; font-family:var(--display); font-size:36px; font-weight:400; }.profile-card h2 span { color:var(--pink); font-size:20px; }.profile-card > p { margin:0 0 17px; color:#d1ced6; text-align:center; font-family:var(--display); font-size:24px; line-height:.75; }.profile-counts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #514e5b; border-bottom:1px solid #514e5b; }.profile-counts div { padding:10px 2px 9px; text-align:center; border-right:1px solid #514e5b; }.profile-counts div:last-child{border:0}.profile-counts b,.profile-counts span { display:block; }.profile-counts b { color:var(--acid); font-family:var(--display); font-size:25px; font-weight:400; line-height:.8; }.profile-counts span{margin-top:5px;color:#bbb6c0;text-transform:uppercase;font-size:7px}.guestbook-button { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:14px; padding:10px; border:1px solid var(--acid); color:var(--acid); background:transparent; font-size:9px; }.guestbook-button:hover{background:var(--acid);color:var(--ink)}.guestbook-button svg{width:14px}
.online-card { padding:16px; background:white; }.card-title { display:flex; align-items:center; justify-content:space-between; }.card-title h2 { font-size:31px; }.card-title span { display:grid; place-items:center; width:27px; height:27px; background:var(--pink); border:1px solid var(--line); font-family:var(--pixel); font-size:8px; }.online-people { display:flex; align-items:center; margin:16px 0; }.online-people .avatar { width:31px; height:31px; margin-right:-7px; }.more-users { display:grid; place-items:center; width:31px; height:31px; margin-left:1px; border:1px solid var(--line); border-radius:50%; background:white; font-size:8px; }.online-card a { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; color:var(--violet); font-size:10px; text-decoration:none; }.online-card a:hover{color:var(--pink)}.online-card svg{width:13px}
.moodboard-section { margin-top:57px; }.all-link { display:flex; align-items:center; gap:5px; color:var(--violet); font-size:10px; text-decoration:none; }.all-link:hover{text-decoration:underline}.moodboard-grid { display:grid; grid-template-columns:1.1fr .9fr 1.2fr .9fr 1.1fr; gap:12px; align-items:end; }.pin { position:relative; margin:0; overflow:hidden; border:1px solid var(--line); background:var(--ink); box-shadow:3px 3px 0 var(--line); }.pin img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.75) contrast(1.1); transition:transform .3s ease,filter .3s ease; }.pin:hover img { transform:scale(1.08); filter:saturate(1.2) contrast(1.05); }.pin:after { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.8); pointer-events:none; }.pin figcaption { position:absolute; z-index:1; left:8px; bottom:8px; padding:4px 5px; background:var(--acid); color:var(--ink); font-family:var(--pixel); font-size:7px; }.pin-one{height:180px;transform:rotate(-2deg)}.pin-two{height:240px;transform:rotate(1.5deg)}.pin-three{height:205px;transform:rotate(-1deg)}.pin-four{height:255px;transform:rotate(2deg)}.pin-five{height:187px;transform:rotate(-1deg)}
.guestbook { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:58px; padding:25px 27px; background:var(--violet); color:white; box-shadow:5px 5px 0 var(--ink); }.guestbook .eyebrow{color:var(--acid)}.guestbook h2{font-size:36px}.guestbook-form{display:flex;flex:1;max-width:540px}.guestbook-form input{min-width:0; width:100%; height:44px; border:1px solid var(--ink); padding:0 12px; outline:none; color:var(--ink); background:white; font-size:11px}.guestbook-form input:focus{box-shadow:inset 0 0 0 2px var(--acid)}.guestbook-form button,.publish-button{display:flex;align-items:center;gap:7px;border:1px solid var(--ink);padding:0 13px;background:var(--acid);color:var(--ink);font-family:var(--pixel);font-size:8px}.guestbook-form button:hover,.publish-button:hover{background:var(--pink);color:white}.guestbook-form svg,.publish-button svg{width:13px}
footer{display:flex;justify-content:space-between;padding:20px 32px;background:var(--ink);color:#cbc6d1;font-size:9px}footer a{color:var(--acid);text-decoration:none}footer svg{width:12px;vertical-align:middle}.thread-modal{width:min(460px,calc(100% - 28px));border:2px solid var(--ink);padding:0;background:var(--paper);box-shadow:8px 8px 0 var(--pink)}.thread-modal::backdrop{background:rgba(17,16,28,.76);backdrop-filter:blur(2px)}.modal-content{display:flex;flex-direction:column;gap:13px;padding:28px}.modal-content h2{margin:0 0 7px;font-family:var(--display);font-size:47px;font-weight:400;line-height:.8}.modal-close{position:absolute;top:10px;right:10px;border-color:var(--line);color:var(--ink)}.modal-content label{display:flex;flex-direction:column;gap:6px;text-transform:uppercase;font-size:9px;font-weight:600}.modal-content input,.modal-content select,.modal-content textarea{width:100%;border:1px solid var(--line);padding:9px;background:white;outline-color:var(--pink);resize:vertical;font-size:12px}.publish-button{justify-content:center;height:41px;margin-top:5px}.toast{position:fixed;z-index:30;right:22px;bottom:22px;max-width:300px;padding:13px 15px;color:var(--ink);background:var(--acid);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:11px;opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.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}
.online-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-top:1px solid var(--line);padding:10px 0 0;color:var(--violet);background:transparent;font-size:10px;text-align:left}.online-button:hover{color:var(--pink)}.online-button svg{width:13px}.all-link{border:0;background:transparent;cursor:pointer}.pin{cursor:pointer}.pin:focus-visible,.thread-link:focus-visible,.all-link:focus-visible{outline:3px solid var(--pink);outline-offset:3px}.empty-state{padding:22px;color:var(--muted);font-size:11px;text-align:center}.guestbook-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.guestbook-entries:empty{display:none}.guestbook-entries article{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);background:white;box-shadow:2px 2px 0 var(--line)}.guestbook-entries p{margin:0;font-size:10px;line-height:1.35}.guestbook-entries time{color:var(--muted);font-size:8px}
.topic-modal,.profile-modal,.guestbook-modal,.online-modal,.moodboard-modal{width:min(650px,calc(100% - 28px));border:2px solid var(--ink);padding:0;background:var(--paper);box-shadow:8px 8px 0 var(--pink)}.topic-modal::backdrop,.profile-modal::backdrop,.guestbook-modal::backdrop,.online-modal::backdrop,.moodboard-modal::backdrop{background:rgba(17,16,28,.76);backdrop-filter:blur(2px)}.topic-content,.profile-content,.online-modal-content,.moodboard-modal-content{position:relative;padding:30px}.topic-content h2,.profile-content h2,.online-modal-content h2,.moodboard-modal-content h2{margin:0;font-family:var(--display);font-size:47px;font-weight:400;line-height:.88}.topic-body{max-width:540px;margin:16px 0 24px;font-size:12px;line-height:1.65}.topic-replies{border-top:1px solid var(--line);padding-top:16px}.topic-replies h3{margin:0 0 13px;font-family:var(--display);font-size:28px;font-weight:400}.reply{display:grid;grid-template-columns:30px 1fr;gap:9px;padding:11px 0;border-top:1px solid #d8d5dc}.reply:first-of-type{border-top:0}.reply b{font-size:10px}.reply p{margin:4px 0 0;font-size:11px;line-height:1.5}.reply-form{display:flex;gap:9px;margin-top:16px}.reply-form label{flex:1}.reply-form textarea{width:100%;border:1px solid var(--line);padding:9px;resize:vertical;background:white;font-size:11px;outline-color:var(--pink)}.reply-form button{align-self:stretch;border:1px solid var(--line);padding:0 12px;background:var(--acid);font-family:var(--pixel);font-size:8px}.reply-form button:hover{background:var(--pink);color:white}.reply-form svg{display:block;width:14px}.profile-content{display:flex;flex-direction:column;gap:13px}.profile-content label{display:flex;flex-direction:column;gap:6px;text-transform:uppercase;font-size:9px;font-weight:600}.profile-content textarea{width:100%;border:1px solid var(--line);padding:9px;resize:vertical;background:white;font-size:12px;outline-color:var(--pink)}.switch-line{flex-direction:row!important;align-items:center;gap:8px!important;text-transform:none!important;cursor:pointer}.switch-line input{width:16px;height:16px;accent-color:var(--pink)}.guestbook-modal-content{width:auto}.online-modal-content{min-height:360px}.member-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}.member{display:grid;grid-template-columns:32px minmax(0,1fr) 8px;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);background:white}.member .avatar{width:29px;height:29px}.member b{font-size:10px}.member p{margin:3px 0 0;color:var(--muted);font-size:8px}.member i{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 6px var(--acid)}.moodboard-modal{width:min(800px,calc(100% - 28px));background:var(--ink);color:white;box-shadow:8px 8px 0 var(--acid)}.moodboard-modal-content{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:18px;align-items:end;padding:18px}.moodboard-image{grid-column:1 / -1;display:block;width:100%;max-height:64vh;object-fit:contain;background:#272430;border:1px solid #76717e}.moodboard-modal-content .eyebrow{color:var(--acid)}.moodboard-modal-content h2{font-size:34px}.moodboard-modal .modal-close{z-index:2;color:white;border-color:white;background:var(--ink)}.lightbox-actions{display:flex;justify-content:flex-end;gap:7px}.lightbox-actions button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--acid);background:transparent;color:var(--acid)}.lightbox-actions button:hover{background:var(--acid);color:var(--ink)}.lightbox-actions svg{width:18px}
@media (max-width: 760px){.masthead{min-height:auto;padding:18px}.logo{font-size:18px}.header-message{display:none}.profile-button{font-size:10px}.main-nav{min-height:46px;overflow-x:auto;padding-left:0}.main-nav a{padding:0 13px;white-space:nowrap;font-size:9px}.new-thread-nav{padding:0 13px;white-space:nowrap;font-size:7px}main{padding:22px 18px 36px}.intro-panel{min-height:310px;padding:24px}.intro-panel:before{width:300px;height:300px;right:-130px;top:43px}.intro-copy h1{font-size:17px;line-height:1.65}.intro-text{max-width:250px;font-size:10px}.now-playing{width:175px;margin-right:1px}.sticker-star{top:auto;bottom:111px;right:24px}.sticker-arrow{display:none}.ticker{margin:22px 0 28px}.content-grid{grid-template-columns:1fr;gap:30px}.sidebar{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}.section-heading h2{font-size:34px}.thread-card{grid-template-columns:45px minmax(0,1fr) 49px;gap:9px;padding:12px}.thread-icon{width:38px;height:38px;font-size:7px}.thread-card h3{font-size:12px}.thread-card p{font-size:9px}.thread-meta{gap:5px;font-size:8px}.thread-stats{padding-left:5px}.moodboard-section{margin-top:45px}.moodboard-grid{grid-template-columns:repeat(2,1fr);gap:13px}.pin-one,.pin-two,.pin-three,.pin-four,.pin-five{height:180px;transform:none}.pin-three{height:235px}.pin-four{height:215px}.pin-five{grid-column:1 / -1;height:155px}.guestbook{align-items:stretch;flex-direction:column;gap:20px;margin-top:45px;padding:23px}.guestbook-form{max-width:none}.guestbook h2{font-size:33px}footer{gap:13px;flex-wrap:wrap;padding:20px 18px;font-size:8px}.equalizer{display:none}}
@media (max-width: 440px){.header-actions .icon-button{display:none}.sidebar{grid-template-columns:1fr}.profile-card{padding:16px}.online-card{padding:17px}.guestbook-form{flex-direction:column;gap:8px}.guestbook-form button{height:40px;justify-content:center}.intro-panel{min-height:335px}.now-playing{align-self:flex-end}.section-heading{align-items:flex-start}.filter-button{padding:7px}.thread-card{grid-template-columns:38px minmax(0,1fr) 41px}.thread-card p{display:none}.thread-author{margin-top:6px}.thread-stats strong{font-size:25px}}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}