:root{--bg:#0a0b0d;--surface:#131519;--line:#292d34;--text:#f2f3f5;--muted:#969ca6;--lime:#c9f36e;--purple:#a795ff;--display:'Chakra Petch',sans-serif;--body:'Noto Sans JP',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden}.topbar{height:76px;padding:0 clamp(22px,6vw,96px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:#0a0b0de8;backdrop-filter:blur(16px);z-index:10}.logo{font:700 23px var(--display);letter-spacing:-.05em;color:var(--text);text-decoration:none}.logo span,h2 span{color:var(--lime)}nav{display:flex;gap:30px}nav a{font:500 11px var(--display);letter-spacing:.12em;color:var(--muted);text-decoration:none}nav a:hover{color:var(--lime)}.join,.button{font:600 11px var(--display);letter-spacing:.08em;text-decoration:none}.join{color:var(--lime);border:1px solid #596c38;padding:11px 15px}.hero{max-width:1380px;margin:auto;min-height:760px;padding:80px clamp(22px,6vw,96px);display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;position:relative}.hero:before{content:'';position:absolute;top:-240px;left:-260px;width:650px;height:650px;background:#6a3b2e;filter:blur(130px);opacity:.13;border-radius:50%;pointer-events:none}.hero-copy{position:relative;z-index:1}.eyebrow{font:600 11px var(--display);letter-spacing:.2em;color:var(--lime);margin:0 0 22px}.hero h1{font:700 clamp(68px,9vw,130px)/.82 var(--display);letter-spacing:-.08em;margin:0 0 34px}.hero h1 .mura-name{background:linear-gradient(100deg,#ef7f82,#f2c95e,#68c7d2,#9e8de8);background-clip:text;-webkit-background-clip:text;color:transparent}.hero h1 .jp-name{color:#ef6a70}.lead{color:var(--muted);line-height:2;font-size:15px}.hero-buttons{display:flex;gap:12px;margin-top:34px}.button{display:inline-flex;align-items:center;padding:16px 20px;border:1px solid var(--line);color:var(--text);transition:.2s}.button:hover{transform:translateY(-3px);border-color:var(--lime)}.button.primary{background:var(--lime);color:#111;border-color:var(--lime)}.button.primary:hover{background:#e0ff94}.viewer-wrap{height:650px;position:relative;border:0;background:transparent;box-shadow:none}.viewer-top,.viewer-bottom{height:50px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;font:10px var(--display);letter-spacing:.12em;color:var(--muted);border-color:transparent}.live{color:var(--lime)}.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);margin-right:6px}.viewer-stage{height:550px;position:relative;display:grid;place-items:center}.viewer-stage:before{content:'';position:absolute;width:310px;height:430px;border-radius:50%;background:radial-gradient(ellipse,#d5d5d545,transparent 68%);filter:blur(12px)}#skin-viewer{width:100%;height:100%;cursor:grab}#skin-viewer:active{cursor:grabbing}.crosshair{position:absolute;top:50%;left:50%;color:#ffffff44;font:28px var(--display);pointer-events:none}.about,.links,.murasaba{max-width:1200px;margin:auto;padding:120px clamp(22px,6vw,80px)}.about{display:grid;grid-template-columns:1fr 2fr 1fr;gap:40px;border-top:1px solid var(--line)}h2{font:600 clamp(38px,5vw,68px)/1 var(--display);letter-spacing:-.07em;margin:0 0 28px}.muted{color:var(--muted);line-height:2;font-size:14px;max-width:440px}.numbers{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;align-content:end}.numbers b{font:600 35px var(--display);color:var(--lime)}.numbers small{font:10px var(--display);color:var(--muted);letter-spacing:.12em}.links{background:var(--surface);max-width:none;padding-left:max(22px,calc((100% - 1040px)/2));padding-right:max(22px,calc((100% - 1040px)/2))}.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card{padding:28px;background:#0d0f11;border:1px solid var(--line);color:var(--text);text-decoration:none;min-height:310px;transition:.25s}.card:hover{transform:translateY(-7px);border-color:var(--lime)}.card.purple{background:#15131f}.card-icon{display:grid;place-items:center;width:43px;height:43px;background:#22262b;color:var(--lime);font-size:22px}.card.purple .card-icon{background:#28223e;color:var(--purple)}.card small{display:block;color:var(--muted);font:600 10px var(--display);letter-spacing:.15em;margin-top:42px}.card h3{font:600 43px var(--display);margin:10px 0}.card p{color:var(--muted);font-size:13px;line-height:1.9}.card b{display:block;color:var(--lime);font:600 11px var(--display);letter-spacing:.12em;margin-top:25px}.murasaba{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.murasaba h2{font-size:clamp(60px,8vw,108px);margin:16px 0}.pixel-grid{height:300px;position:relative;overflow:hidden;background:#172419;border:1px solid #405334}.pixel-grid i{position:absolute;display:block;width:100px;height:100px;transform:rotate(45deg);background:linear-gradient(135deg,#c9f36e,#405c37);box-shadow:inset 13px 13px #ffffff18,inset -20px -20px #0004}.pixel-grid i:nth-child(1){left:12%;top:9%}.pixel-grid i:nth-child(2){left:42%;top:32%;width:150px;height:150px}.pixel-grid i:nth-child(3){right:8%;top:10%;width:65px;height:65px;background:#8272c1}.pixel-grid i:nth-child(4){left:7%;bottom:-18%;background:#42623b}.pixel-grid i:nth-child(5){right:20%;bottom:-4%;background:#8bb44d}.pixel-grid i:nth-child(6){left:52%;top:3%;width:38px;height:38px;background:#c9f36e}footer{max-width:1200px;margin:auto;border-top:1px solid var(--line);padding:30px 22px 45px;display:flex;justify-content:space-between;color:#646a73;font-size:11px}@media(max-width:780px){nav{display:none}.topbar{height:68px}.hero{min-height:980px;grid-template-columns:1fr;padding-top:80px;gap:30px}.hero h1{font-size:75px}.viewer-wrap{height:490px}.viewer-stage{height:390px}.viewer-top,.viewer-bottom{height:48px}.about,.murasaba{grid-template-columns:1fr;padding-top:85px;padding-bottom:85px}.numbers{margin-top:30px}.cards{grid-template-columns:1fr}.murasaba{display:grid}.pixel-grid{height:250px}footer{padding-left:22px;padding-right:22px}}
nav{opacity:.35}.account-area{margin-top:72px;max-width:380px}.account-area>p{color:#7f858e;font-size:13px;margin:0 0 22px}.account-card{display:flex;align-items:center;gap:16px;padding:22px 25px;border:1px solid #2d3238;border-radius:15px;background:#111316;box-shadow:0 18px 55px #0005}.account-card a{display:flex;align-items:center;gap:11px;color:var(--text);font-size:14px;text-decoration:none;white-space:nowrap}.account-card a:hover{color:var(--lime)}.account-card b{display:grid;place-items:center;width:24px;height:18px;border-radius:5px;background:#f3f4f4;color:#111;font-size:10px}.account-card i{font-style:normal;color:var(--muted);font-size:17px}.account-card small{display:block;color:var(--muted);font-size:10px;margin-bottom:3px}.account-card em{height:28px;width:1px;background:#363a40}.hero-buttons{display:none}
/* reference-style hero layout */
.topbar{display:none}.hero{min-height:960px;padding-top:125px;padding-bottom:80px}.hero-copy{padding-top:75px}.viewer-wrap{height:760px}.viewer-top,.viewer-bottom{display:none}.viewer-stage{height:760px}.crosshair{display:none}.services{padding-top:75px}
.links h2{font-size:clamp(42px,6vw,76px);margin-bottom:55px}.service-list{display:grid;gap:20px}.service-card{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding:42px 46px;border:1px solid var(--line);border-radius:16px;background:#111214}.service-card h3{font:400 clamp(25px,3vw,38px) var(--body);margin:0;color:#f1f2f3}.service-card p{margin:0;color:var(--muted);line-height:2;font-size:14px}.service-links{display:flex;gap:34px;margin-top:25px}.service-links a{color:#aeb3ba;text-decoration:none;font-size:13px}.service-links a:hover{color:var(--lime)}@media(max-width:780px){.service-card{grid-template-columns:1fr;gap:20px;padding:28px 24px}}
.hero h1 .jp-name{color:#8f1826}
.hero-copy>.eyebrow{display:none}.hero-copy{padding-top:10px}
.links .service-heading{font-size:28px;letter-spacing:-.03em;margin:0 0 34px;color:#d8dbe0}.links .service-heading span{color:inherit}
.service-heading{font-size:18px;color:#e4e5e6;margin:0 0 32px}.server-info{display:grid;gap:8px;margin:25px 0;color:#d6d9dc;font-size:13px}.server-info b{color:var(--lime);font-size:11px;letter-spacing:.12em}.server-info span{color:var(--muted)}
.typing-caret{display:inline-block;width:5px;height:.75em;background:#ffffff;margin-left:8px;vertical-align:baseline;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}:root{--lime:#fff;--purple:#fff}.eyebrow,.live,.service-links a,.card b{color:#fff}.button.primary{background:#8f1826;border-color:#8f1826;color:#fff}.button.primary:hover{background:#b32132}.hero h1 .jp-name{color:#8f1826}.murasaba h2 span{color:#8f1826}.pixel-grid{background:#101113;border-color:#31343a}.pixel-grid i{background:linear-gradient(135deg,#fff,#8f1826);box-shadow:inset 13px 13px #ffffff20,inset -20px -20px #0008}.pixel-grid i:nth-child(3){background:linear-gradient(135deg,#ef7f82,#8e6fd1,#69c7d2)}.pixel-grid i:nth-child(4){background:#1e2024}.pixel-grid i:nth-child(5){background:#8f1826}.pixel-grid i:nth-child(6){background:#fff}
.hero:before{background:#8f1826}.card.purple{background:#111214}.card.purple .card-icon{background:#1a1b1e;color:#fff}
.pixel-grid{overflow:hidden;background:#111;border:1px solid #3b3d43}.pixel-grid img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.8) contrast(1.1);opacity:.9}.pixel-grid:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#8f182633,#00000055 55%,#ffffff22);pointer-events:none}.pixel-grid i{display:none}
.service-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}.service-meta>div{padding:22px 18px;border-top:1px solid #35383e}.service-meta b{display:block;color:#8f1826;font:600 25px var(--display)}.service-meta span{display:block;color:#fff;font:600 10px var(--display);letter-spacing:.12em;margin-top:5px}.service-meta small{display:block;color:var(--muted);font-size:11px;margin-top:7px}[data-reveal]{opacity:0;transform:translateY(35px);transition:opacity .75s ease,transform .75s ease}[data-reveal].is-visible{opacity:1;transform:none}.service-card:nth-child(2){transition-delay:.12s}.service-card:nth-child(3){transition-delay:.24s}@media(max-width:780px){.service-meta{grid-template-columns:repeat(2,1fr)}}
.pixel-grid{aspect-ratio:1/1;height:auto;width:min(100%,520px);justify-self:end}

/* restrained visual detail so the page feels active without becoming busy */
.hero:after{content:'';position:absolute;right:7%;top:16%;width:180px;height:180px;border:1px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 90px rgba(143,24,38,.12);pointer-events:none}
.links{position:relative;overflow:hidden}
.links:before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#8f1826 35%,#fff 50%,#8f1826 65%,transparent);opacity:.55}
.service-card{position:relative;grid-template-columns:1fr 2fr;overflow:hidden}
.service-card:before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:2px;background:linear-gradient(180deg,transparent,#8f1826 35%,#fff 50%,#8f1826 65%,transparent);opacity:.7}
.service-kicker{grid-column:1/-1;color:#666b73;font:500 10px var(--display);letter-spacing:.18em;margin-bottom:-22px}
.service-card h3{position:relative}
@media(max-width:780px){.service-card{grid-template-columns:1fr}.service-kicker{margin-bottom:-8px}}

/* brand marks stay recognizable inside the angular layout */
.account-card .youtube-icon{display:grid;place-items:center;width:24px;height:18px;padding:0;border-radius:4px;background:#f3f4f4;color:#111}
.youtube-icon svg{display:block;width:24px;height:18px}
.discord-icon{display:inline-block;width:18px;height:18px;flex:0 0 18px;color:#f2f3f5;vertical-align:-4px}
.service-links .discord-icon{margin-right:6px}

/* compact angular UI and mobile layout */
.service-card,.account-card,.account-card b,.pixel-grid{border-radius:0}
.service-card{padding:30px 38px;gap:22px}
.service-card h3{font-size:clamp(23px,3vw,34px);letter-spacing:.02em}
.service-card p{line-height:1.75}
.service-links{margin-top:16px}
@media(max-width:780px){
  body{font-size:14px}
  .hero{min-height:auto;padding:70px 18px 36px;gap:12px;display:flex;flex-direction:column;align-items:stretch}
  .hero-copy{padding-top:0}
  .hero h1{font-size:clamp(58px,18vw,86px);margin-bottom:22px;white-space:nowrap}
  .lead{font-size:12px;letter-spacing:.08em}
  .account-area{margin-top:38px;max-width:none}
  .account-card{padding:17px 16px;gap:11px;justify-content:space-between}
  .account-card a{font-size:13px;gap:8px}
  .account-card em{height:23px}
  .viewer-wrap{height:390px;margin-top:12px}
  .viewer-stage{height:390px}
  #skin-viewer{max-width:100%;height:100%}
  .links,.murasaba{padding:72px 18px}
  .links .service-heading{font-size:16px;margin-bottom:22px}
  .service-list{gap:12px}
  .service-card{grid-template-columns:1fr;padding:20px 18px;gap:10px}
  .service-card:before{top:14px;bottom:14px}
  .service-kicker{font-size:9px;margin-bottom:1px}
  .service-card h3{font-size:25px;margin:0 0 2px}
  .service-card p{font-size:12px;line-height:1.7}
  .service-links{gap:22px;margin-top:12px}
  .service-links a{font-size:12px}
  .murasaba{gap:28px}
  .murasaba h2{font-size:clamp(48px,15vw,72px);margin:12px 0 20px}
  .muted{font-size:13px;line-height:1.85}
  .server-info{font-size:12px;margin:20px 0}
  .pixel-grid{width:100%;justify-self:stretch}
  footer{padding:24px 18px 34px}
}

/* brand icons */
.youtube-icon{display:grid!important;place-items:center;width:25px!important;height:18px!important;background:transparent!important;border-radius:0!important;color:#f3f4f4!important}
.youtube-icon svg{display:block;width:25px;height:18px}
.discord-icon{display:inline-block;width:18px;height:18px;flex:0 0 18px;vertical-align:-4px;color:#dfe1e5}
.account-card .discord-icon{margin-right:1px}
.service-links a:has(.discord-icon){display:inline-flex;align-items:center;gap:7px}

/* service cards: thin, quiet typography inspired by the reference */
.links{background:#0a0b0d}
.links .service-heading{font-size:18px;font-weight:400;letter-spacing:0;color:#b8bcc2;margin:0 0 32px}
.service-card{background:#111214;border:1px solid #292c31;border-radius:16px;box-shadow:none;padding:42px 46px;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.service-card h3{font-weight:400;color:#dedfe2;letter-spacing:-.025em}
.service-card p{font-weight:400;color:#888d95;line-height:2;font-size:14px}
.service-links a{font-weight:400;color:#858a92}
.service-links a:hover{color:#f2f3f5}
.service-card:hover{background:#131517;border-color:#4a4d53;transform:translateY(-3px)}
@media(max-width:780px){.service-card{padding:28px 24px}}

/* quieter card outlines and lighter service names */
.service-card{border-width:1px;border-color:rgba(255,255,255,.11);background:rgba(17,18,20,.72)}
.service-card h3{font-weight:300;color:#b9bdc4}
.service-card p{color:#7d828a}
.service-links a{color:#777c84}
.murasaba h2{font-weight:300;color:#b9bdc4}
.murasaba h2 span{color:#741521}
.service-card:hover{border-color:rgba(255,255,255,.22);background:rgba(19,21,23,.8)}

/* keep the YouTube mark rounded even though the surrounding UI is angular */
.account-card .youtube-icon{background:#f3f4f4!important;border-radius:4px!important;color:#111!important}