:root { color-scheme: light; --text:#17171c; --muted:#686772; --line:rgba(18,18,24,.12); --panel:#ffffff; --accent:#7058c9; }
* { box-sizing:border-box; }
.loading-screen { position:fixed; z-index:9999; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; color:#17171c; background:#fff; transition:opacity .65s ease,visibility .65s ease; }
.loading-screen.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loading-label { margin:0; font-size:11px; font-weight:600; letter-spacing:.28em; color:#77747f; }
.typing-line { min-width:17ch; margin:0; text-align:center; font-size:clamp(25px,5vw,42px); font-weight:600; letter-spacing:-.03em; }
.typing-caret { display:inline-block; width:2px; height:.9em; margin-left:4px; vertical-align:-.05em; background:#17171c; animation:caret-blink .7s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity:0; } }
html { min-height:100%; background:#ffffff; }
body { min-height:100vh; margin:0; overflow-x:hidden; display:grid; place-items:center; padding:72px 24px; color:var(--text); font-family:"DM Sans","Noto Sans JP",sans-serif; background:#ffffff; }
body::before { display:none; }
.ambient { display:none; }
.ambient--one { background:#a78bfa; top:-100px; left:-120px; }.ambient--two { background:#4fd1c5; right:-160px; bottom:-120px; }
.profile-shell { position:relative; width:min(100%,780px); }
.presence-card,.link-pill { opacity:0; animation:icon-appear .35s ease-out forwards; }
.is-loading .presence-card,.is-loading .link-pill,.is-loading .service-line { animation-play-state:paused; }
.twitter-link { animation-delay:.1s; }
.discord-card { animation-delay:.25s; }
.vrc-card { animation-delay:.4s; }
.spotify { animation-delay:.55s; }
.world-link { animation-delay:.7s; }
.line-layer { display:none; }
@keyframes icon-appear { to { opacity:1; } }
@keyframes line-reveal { to { transform:translate(-50%,-50%) rotate(-25deg) scaleX(1); } }
.identity { display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:52px; }
.identity { pointer-events:none; }
.avatar-wrap { position:relative; flex:0 0 auto; }.main-avatar { width:134px; height:134px; display:block; object-fit:cover; border-radius:50%; background:#242433; border:1px solid rgba(255,255,255,.2); }.avatar-ring { position:absolute; inset:-7px; border:1px solid rgba(185,167,255,.4); border-radius:50%; }
.identity-copy { max-width:455px; }.eyebrow { margin:0 0 7px; color:var(--accent); font-size:11px; letter-spacing:.2em; font-weight:600; }.identity h1 { margin:0; font-size:clamp(38px,8vw,58px); line-height:1; letter-spacing:-.045em; }.bio { margin:14px 0 0; color:var(--muted); line-height:1.8; font-size:14px; }
.presence { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.presence,.links { pointer-events:none; }
.service-avatar-link,.link-pill { pointer-events:auto; }
.presence-card { min-height:150px; display:flex; align-items:center; gap:18px; padding:26px; border:1px solid var(--line); border-radius:25px; background:var(--panel); backdrop-filter:blur(18px); transition:transform .25s,border-color .25s; }.presence-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.2); }
.service-avatar-link { flex:0 0 auto; }.service-avatar-frame { position:relative; display:block; }.service-avatar { display:block; width:78px; height:78px; object-fit:cover; border-radius:50%; background:#292a38; }.status-dot { position:absolute; width:19px; height:19px; right:1px; bottom:1px; border-radius:50%; background:#747682; border:4px solid #171925; }.status-dot.online,.status-dot.join-me { background:#45d483; }.status-dot.idle,.status-dot.ask-me { background:#f0b84b; }.status-dot.dnd,.status-dot.busy { background:#ed5d68; }.status-dot.offline { background:#747682; }
.presence-copy { min-width:0; }.service-name { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin-bottom:8px; }.service-name span { font-size:17px; font-weight:600; }.service-name small { color:#74727f; font-size:11px; }.presence-copy p { margin:0; font-size:14px; }.presence-copy .activity { margin-top:5px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.links { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }.link-pill { display:flex; align-items:center; gap:10px; padding:17px 19px; color:#dedde4; border:1px solid var(--line); border-radius:17px; background:rgba(16,18,27,.62); text-decoration:none; font-size:13px; transition:background .2s,border-color .2s,transform .2s; }.link-pill:hover { background:rgba(35,37,49,.78); border-color:rgba(255,255,255,.2); transform:translateY(-2px); }.link-icon { width:20px; font-size:17px; text-align:center; }.spotify-icon { width:20px; height:20px; fill:#1ed760; }.arrow { margin-left:auto; color:#6e6d78; }
.twitter-avatar { display:none; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.twitter-link.has-avatar .twitter-avatar { display:block; }
.twitter-link.has-avatar .twitter-fallback { display:none; }
.twitter-link::after { content:"Twitter"; position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%); color:#17171c; font-size:13px; font-weight:600; white-space:nowrap; }
.spotify::after,.world-link::after { position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%); color:#17171c; font-size:13px; font-weight:600; white-space:nowrap; }
.spotify::after { content:"Spotify"; }
.world-link::after { content:"ギャラリー"; }
footer { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:27px; color:#62616c; font-size:11px; letter-spacing:.08em; }.footer-dot { font-size:8px; }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-delay:0s!important; } }

/* Orbit layout: service icons on the left, profile at the center */
@media (min-width:0px) {
  body::before,.ambient { display:none; }
  body { padding:32px; }
  .profile-shell { width:min(100%,980px); min-height:720px; display:grid; place-items:center; }
  .line-layer { position:absolute; z-index:0; inset:0 auto 0 0; display:block; width:330px; height:720px; pointer-events:none; }
  .service-line { position:absolute; width:210px; height:2px; margin-left:-105px; background:#d7d7dc; transform:rotate(-25deg) scaleX(0); transform-origin:center; animation:line-layer-reveal .48s cubic-bezier(.22,1,.36,1) forwards; }
  .line-twitter { left:228px; top:75px; animation-delay:.55s; }
  .line-discord { left:93px; top:217px; animation-delay:.7s; }
  .line-vrc { left:228px; top:359px; animation-delay:.85s; }
  .line-spotify { left:99px; top:501px; animation-delay:1s; }
  .line-world { left:210px; top:643px; animation-delay:1.15s; }
  @keyframes line-layer-reveal { to { transform:rotate(-25deg) scaleX(1); } }
  .identity { position:relative; z-index:2; width:100%; height:100%; margin:0; display:grid; place-items:center; text-align:left; }
  .avatar-wrap { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
  .main-avatar { width:220px; height:220px; }
  .avatar-ring { inset:-11px; border-color:rgba(185,167,255,.48); }
  .identity-copy { position:absolute; left:calc(50% + 155px); top:50%; width:280px; max-width:280px; transform:translateY(-50%); }
  .eyebrow { margin-bottom:10px; }
  .identity h1 { font-size:48px; }
  .bio { margin-top:12px; }

  .presence { position:absolute; z-index:1; inset:0 auto 0 0; width:330px; display:block; }
  .presence-card { position:absolute; width:150px; height:150px; min-height:0; padding:0; display:block; border-radius:50%; background:transparent; border:0; box-shadow:none; backdrop-filter:none; }
  .presence-card:hover { transform:scale(1.05); }
  .discord-card { left:18px; top:142px; }
  .vrc-card { left:153px; top:284px; }
  .service-avatar-link,.service-avatar-frame,.service-avatar { width:100%; height:100%; border-radius:50%; }
  .service-avatar { border:1px solid rgba(20,20,28,.14); }
  .status-dot { width:24px; height:24px; right:4px; bottom:4px; border-width:5px; }
  .presence-copy { position:absolute; left:50%; top:calc(100% + 10px); width:170px; transform:translateX(-50%); text-align:center; pointer-events:none; }
  .service-name { display:block; margin:0; }
  .service-name span { font-size:13px; }
  .service-name small { display:none; }
  .presence-copy > p { display:none; }
  .presence-copy .activity { display:none; }

  .links { position:absolute; z-index:1; inset:0 auto 0 0; width:330px; display:block; margin:0; }
  .link-pill { position:absolute; width:150px; height:150px; padding:0; display:grid; place-items:center; border-radius:50%; color:#17171c; background:#ffffff; overflow:visible; }
  .link-pill:hover { transform:translateY(-4px) scale(1.04); }
  .link-pill > span:not(.link-icon), .link-pill .arrow { display:none; }
  .link-pill .link-icon { width:auto; font-size:38px; }
  .spotify-icon { width:100%; height:100%; }
  .twitter-link { left:153px; top:0; }
  .spotify { left:24px; top:426px; }
  .world-link { left:135px; top:568px; }
  .world-link .link-icon { font-size:44px; }
  footer { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); margin:0; }
}

@media (max-width:600px) {
  :root { --mobile-service-size:min(110px,calc((100vw - 96px)/2)); }
  body { display:block!important; min-height:100vh; padding:24px 20px 40px; overflow-x:hidden; overflow-y:auto; place-items:initial; }
  .profile-shell { display:block; width:100%; min-height:820px; margin:0; transform:none; }
  .identity { position:relative; width:100%; height:270px; display:block; text-align:center; }
  .avatar-wrap { position:absolute; left:50%; top:0; transform:translateX(-50%); }
  .main-avatar { width:150px; height:150px; }
  .avatar-ring { inset:-8px; }
  .identity-copy { position:absolute; left:50%; top:175px; width:min(100%,330px); max-width:330px; transform:translateX(-50%); text-align:center; }
  .identity h1 { font-size:32px; }
  .bio { margin-top:8px; font-size:12px; line-height:1.6; }

  .presence,.links { position:absolute; inset:0; width:100%; height:820px; }
  .presence-card,.link-pill { width:var(--mobile-service-size); height:var(--mobile-service-size); }
  .discord-card { left:28px; top:280px; }
  .vrc-card { left:auto; right:28px; top:380px; }
  .twitter-link { left:28px; top:480px; }
  .spotify { left:auto; right:28px; top:580px; }
  .world-link { left:28px; top:680px; }
  .service-avatar-link,.service-avatar-frame,.service-avatar { width:100%; height:100%; }
  .status-dot { width:18px; height:18px; border-width:4px; }
  .presence-copy { top:calc(100% + 6px); width:120px; }
  .service-name span { font-size:12px; }
  .link-pill .link-icon { font-size:28px; }
  .twitter-link::after,.spotify::after,.world-link::after { top:calc(100% + 6px); font-size:12px; }
  .spotify-icon { width:100%; height:100%; }

  .line-layer { display:block; width:100%; height:820px; }
  .service-line { width:150px; margin-left:-75px; }
  .line-discord { left:calc(28px + var(--mobile-service-size)/2); top:calc(280px + var(--mobile-service-size)/2); }
  .line-vrc { left:calc(100% - 28px - var(--mobile-service-size)/2); top:calc(380px + var(--mobile-service-size)/2); }
  .line-twitter { left:calc(28px + var(--mobile-service-size)/2); top:calc(480px + var(--mobile-service-size)/2); }
  .line-spotify { left:calc(100% - 28px - var(--mobile-service-size)/2); top:calc(580px + var(--mobile-service-size)/2); }
  .line-world { left:calc(28px + var(--mobile-service-size)/2); top:calc(680px + var(--mobile-service-size)/2); }
  footer { bottom:0; }
}