/* One shared visual system for all screens. Artwork and type remain independent. */
.site-theme, .world-anime {
  --paper:#181121; --ink:#f6f0ff; --muted:#c8b9d6; --line:#503d61;
  --purple:#d3b0f7; --accent:#f3aacb; --mint:#b9e0d3;
  --panel:#261d34; --panel-raised:#30243f; --field:#1c1527;
  --tint:#3c2c4d; --pill:#3d2d51; --button-ink:#291533;
  --danger:#ffbac5; --radius:17px; --shadow:0 12px 35px #06020d26;
  --world-art:url('assets/banner-anime.png');
  color-scheme:dark;
}
.site-theme {
  background:var(--paper); color:var(--ink);
  font-family:var(--reading-font,'Inter',system-ui,sans-serif); line-height:1.6;
  min-height:100vh; overflow-x:clip; isolation:isolate;
}
.world-pixel {
  --paper:#0e1429; --ink:#eff7ff; --muted:#b9c8df; --line:#394c70;
  --purple:#a4ece3; --accent:#c2afff; --mint:#f4c38b;
  --panel:#19233d; --panel-raised:#202e4b; --field:#111b32;
  --tint:#273951; --pill:#263b53; --button-ink:#122938;
  --danger:#ffb8c9; --radius:7px; --world-art:url('assets/banner-pixel.png');
}
.world-cozy {
  --paper:#fcf1e8; --ink:#432e3a; --muted:#765669; --line:#d7bbcb;
  --purple:#855777; --accent:#95572f; --mint:#486c58;
  --panel:#fffaf5; --panel-raised:#fffdf9; --field:#fffdfa;
  --tint:#f5e5df; --pill:#f0e2ea; --button-ink:#ffffff;
  --danger:#96384a; --radius:22px; --shadow:0 10px 30px #7143550c;
  --world-art:url('assets/banner-cozy.png'); color-scheme:light;
}
.world-orbs {
  --paper:#f4eff9; --ink:#392743; --muted:#725b7b; --line:#d2c1df;
  --purple:#754791; --accent:#9b466c; --mint:#477066;
  --panel:#fffcff; --panel-raised:#ffffff; --field:#fffcff;
  --tint:#ece1f4; --pill:#eadcf5; --button-ink:#ffffff;
  --danger:#9c3652; --radius:17px; --shadow:0 10px 30px #6740810b;
  --world-art:none; color-scheme:light;
}
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(180deg,var(--paper) 0%,transparent 55%,var(--paper) 100%),var(--world-art); background-size:cover; background-position:center; opacity:.09; }
body.world-pixel::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(transparent 97%,#a4ece307 97%); background-size:100% 5px; }
main,footer { position:relative; max-width:1320px; }
main { padding:0 32px; }
.site-header { min-height:100px; height:auto; padding:19px max(32px,calc((100vw - 1256px)/2)); background:var(--paper); border-bottom:1px solid var(--line); gap:28px; }
.brand { font-family:var(--display-font); color:var(--ink); font-size:25px; line-height:1.2; letter-spacing:-.4px; gap:13px; flex-shrink:0; }
.brand>span:last-child { display:flex; flex-direction:column; gap:7px; }
.brand small { font:600 8px/1.4 var(--reading-font); color:var(--muted); letter-spacing:1.8px; }
.brand-mark { display:grid; place-items:center; width:45px; height:49px; border:1px solid var(--line); border-radius:14px 14px 18px 18px; color:var(--accent); background:linear-gradient(140deg,var(--tint),var(--panel)); box-shadow:inset 0 0 18px #d6b6ee12; }
.brand-mark svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.tagline { font-size:12px; max-width:190px; line-height:1.8; }
.badge { color:var(--muted); background:var(--panel); border-color:var(--line); font-size:9px; white-space:nowrap; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:100; padding:10px 18px; background:var(--purple); color:var(--button-ink); border-radius:8px; }
.skip-link:focus { top:10px; }
main:focus { outline:none; }
h1,h2,h3 { font-family:var(--display-font); font-weight:600; letter-spacing:-.3px; line-height:1.35; }
.font-editorial h1,.font-editorial h2,.font-editorial h3 { font-weight:400; }
h2 { font-size:27px; }
h3 { font-size:18px; }
a { color:var(--purple); text-underline-offset:4px; }
button,input,select,textarea { font-family:var(--reading-font); }
button,a,summary,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
button { transition:background .15s,border-color .15s,box-shadow .15s,transform .15s; }
button:not(:disabled):hover { filter:brightness(1.07); }
button:disabled { opacity:.5; }
::selection { background:var(--purple); color:var(--button-ink); }
.hero { position:relative; border:1px solid var(--line); border-radius:24px; background:var(--panel); padding:48px 45px 75px; margin:28px 0 18px; overflow:hidden; }
.hero-illustrated { min-height:455px; background:#21172e; color:white; }
.hero-illustrated:before { background:linear-gradient(90deg,#180e29ec 0%,#21122caf 48%,#21122c24 100%); }
.hero-illustrated>.site-hero-image { object-position:center 45%; }
.hero-copy { max-width:640px; position:relative; z-index:1; }
.hero-illustrated h1,.hero h1 { font-family:var(--display-font); font-size:clamp(30px,3.9vw,52px); line-height:1.25; letter-spacing:-.9px; max-width:650px; margin-bottom:20px; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero-illustrated h1 em { color:#fac8de; }
.hero .eyebrow { font-size:10px; letter-spacing:2.6px; }
.hero-illustrated .eyebrow { color:#ecd5fb; }
.hero-illustrated p:not(.eyebrow) { max-width:490px; color:#f3eafa; font-size:14px; line-height:1.8; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin:24px 0 18px; }
.hero-actions button { min-height:44px; padding:12px 20px; font-size:12px; }
.hero-actions .secondary { background:#251931b8; color:#fff; border-color:#d9b8e880; backdrop-filter:blur(8px); }
.hero p.hero-footnote { font-size:10px; color:var(--muted); line-height:1.8; }
.hero-illustrated p.hero-footnote { color:#e3d1ec; }
.world-switch { position:absolute; bottom:22px; right:25px; display:flex; align-items:center; gap:9px; background:#21172dd6; color:#f6edff; border:1px solid #ccb0df77; border-radius:30px; padding:9px 14px; font-size:10px; z-index:2; backdrop-filter:blur(8px); }
.world-dot { width:6px; height:6px; border-radius:50%; background:#cfb4fb; box-shadow:0 0 10px #cfb4fb; }
.world-switch-label { border-left:1px solid #ccaadd50; padding-left:10px; color:#eadbf3; }
.connection-routes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 22px; }
.connection-route { display:flex; text-align:left; gap:12px; align-items:flex-start; padding:19px 16px; min-height:112px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.connection-route[aria-pressed=true] { background:linear-gradient(130deg,var(--tint),var(--panel)); border-color:var(--purple); }
.connection-route:hover { transform:translateY(-2px); }
.route-icon { color:var(--accent); flex-shrink:0; padding-top:2px; }
.route-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.route-friendship .route-icon { color:var(--purple); }
.route-party .route-icon { color:var(--mint); }
.route-create .route-icon { color:var(--purple); }
.connection-route strong { display:block; font-size:12px; font-weight:650; }
.connection-route small { display:block; color:var(--muted); font-size:10px; line-height:1.7; margin-top:6px; }
.route-arrow { margin-left:auto; color:var(--muted); font-size:15px; }
.demo-note { border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:10px; padding:12px 17px; font-size:11px; }
.demo-note strong { color:var(--ink); }
.tabs { position:sticky; top:0; z-index:10; background:var(--paper); padding:0 14px; border:1px solid var(--line); border-radius:12px; gap:21px; margin-top:22px; box-shadow:0 5px 20px #0a071118; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.tabs button { min-height:64px; color:var(--muted); font-size:11px; font-weight:600; }
.tabs .active { color:var(--purple); border-bottom-color:var(--purple); }
#count { color:var(--ink); background:var(--tint); }
.view { padding:34px 0 50px; }
.workspace { grid-template-columns:260px minmax(0,1fr); gap:26px; align-items:start; }
.workspace>aside { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.workspace>aside h2 { font-size:23px; }
.builder,.style-workspace>div,.character-layout>div { min-width:0; }
.section-head { margin-bottom:8px; }
.eyebrow,.core,.font-names { color:var(--purple); }
.small,.sub,.capacity,.languages,.bio,.legend,.suggestion-library summary,.person details,.lab-layout p,.character-tagline,.character-stats small,footer { color:var(--muted); }
.primary,.secondary,.quiet { min-height:38px; border-radius:9px; }
.primary { border:1px solid transparent; background:linear-gradient(110deg,var(--purple),var(--accent)); color:var(--button-ink); box-shadow:0 3px 20px #c999ec18; }
.secondary { background:var(--panel-raised); color:var(--ink); border:1px solid var(--line); }
.secondary:hover { border-color:var(--purple); }
.quiet,.icon-button { color:var(--muted); }
select,input:not([type=checkbox]):not([type=range]),.character-section-body textarea,.question-body textarea { border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink); font-family:var(--reading-font); font-size:12px; line-height:1.6; }
textarea { width:100%; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.85; }
input[type=checkbox],input[type=range] { accent-color:var(--purple); }
input[type=file]::file-selector-button { font:inherit; background:var(--tint); color:var(--ink); border:1px solid var(--line); padding:7px 10px; border-radius:6px; margin-right:10px; }
.sphere,.person,.character-section,.photo-section,.question-card,.name-card,.ranking,.crop-controls,.studio-preview,.art-choice,.font-choice { background:var(--panel); color:var(--ink); border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.sphere { padding:22px; margin-bottom:16px; }
.sphere-title { padding-bottom:7px; }
.sphere-title h3 { font-size:16px; }
.mini-orb { flex-shrink:0; background:radial-gradient(circle at 25% 20%,#fff,var(--purple) 55%,var(--accent)); box-shadow:0 0 17px #cdb1f04a; }
.sphere:nth-child(2n) .mini-orb { background:radial-gradient(circle at 25% 20%,#fff,var(--mint) 55%,var(--purple)); }
.interest-row { border-color:var(--line); padding:9px 0; }
.interest-row.negative .interest-name { color:var(--danger); }
.shelf,.rule-card,.directory-controls,.custom-banner-panel { background:var(--tint); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); }
.suggestions button,.equipped-tags button { background:var(--pill); color:var(--ink); border:1px solid var(--line); font-size:11px; }
.suggestions button:hover,.equipped-tags button:hover { border-color:var(--purple); }
.suggestions button:disabled { color:var(--muted); }
.search-results { background:var(--panel); border-color:var(--line); }
.search-status { background:var(--tint); }
.search-hit { color:var(--ink); border-top-color:var(--line); }
.search-hit:hover { background:var(--panel-raised); }
.chip { background:var(--pill); color:var(--purple); padding:6px 10px; }
.cards { gap:20px; }
.person { transition:border-color .2s,transform .2s; }
.person:hover { border-color:var(--purple); transform:translateY(-3px); }
.person .portrait,.person:nth-child(3n+2) .portrait,.person:nth-child(3n+3) .portrait { position:relative; isolation:isolate; overflow:hidden; height:135px; background:var(--tint); padding:22px; border-bottom:1px solid var(--line); }
.person .portrait::before { content:''; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(90deg,#2210308f,#221030c4),var(--world-art); background-size:cover; background-position:50% 48%; }
.person:nth-child(3n+2) .portrait::before { background-position:30% 30%; }
.person:nth-child(3n+3) .portrait::before { background-position:75% 70%; }
.portrait .initial { font-family:var(--display-font); font-size:53px; color:#f1dbff; line-height:1; }
.portrait .point { color:#f7efff; background:#21152de0; border:1px solid #d1b6e582; border-radius:30px; font-size:10px; backdrop-filter:blur(5px); }
.person h3 { font-size:24px; }
.person-body { padding:23px; }
.why { border-color:var(--line); }
.bar,.profile-progress { background:var(--tint); }
.bar span,.profile-progress span { background:linear-gradient(90deg,var(--purple),var(--accent)); }
.empty { background:var(--panel); border-color:var(--line); }
.lab-layout { gap:35px; }
.lab-layout>.rule-card { background:var(--panel); }
.character-preview-wrap,.studio-live { top:86px; }
.character-card { background:var(--panel); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow); --card-dark:var(--purple); }
.character-card.theme-ghost-blue { --card-dark:#a7d8ff; }
.character-card.theme-amber { --card-dark:var(--accent); }
.character-art { background:radial-gradient(ellipse,var(--tint),var(--panel) 75%); }
.character-stats>div { background:var(--field); border:1px solid var(--line); }
.character-card details,.character-list { border-color:var(--line); }
.character-card-body h2 small { color:var(--muted); }
.character-section>summary>span,.question-card summary>span { color:var(--purple); }
.character-section[open]>summary,.question-card[open]>summary { background:var(--panel-raised); border-bottom:1px solid var(--line); margin-bottom:16px; }
.character-section>summary,.question-card summary { line-height:1.7; }
.photo-empty { border-color:var(--line); background:var(--field); }
.photo-upload-button { background:var(--tint); color:var(--ink); border:1px solid var(--line); }
.photo-upload-button input { color:var(--ink)!important; }
.photo-number { background:var(--panel); color:var(--ink); }
.photo-tile { border-color:var(--line); }
.question-card summary small { background:var(--pill); color:var(--purple); }
.seven-lane>h3 { padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--accent); }
.raid-hero { position:relative; isolation:isolate; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.raid-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--world-art) center/cover; opacity:.1; }
.raid-hero>.badge { background:var(--tint); }
.raid-slots span { background:radial-gradient(circle at 20% 20%,var(--tint),var(--panel)); border:1px solid var(--line); color:var(--ink); box-shadow:0 0 22px #c7a6f118; }
.art-choice,.font-choice { box-shadow:0 0 0 1px var(--line); }
.choice-body small,.font-choice small { color:var(--muted); }
.font-names { font-family:var(--reading-font); }
.font-choice small { font-family:var(--reading-font); }
.art-choice.selected,.font-choice.selected { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple),0 0 20px #d3aaff18; }
.preferred-art { background:var(--tint); color:var(--purple); }
.art-orbs { background:var(--tint); }
.art-choice[data-art=anime] .choice-body { border-top:3px solid #d5a7eb; }
.art-choice[data-art=pixel] .choice-body { border-top:3px solid #9ee5d9; }
.art-choice[data-art=cozy] .choice-body { border-top:3px solid #e3b48c; }
.art-choice[data-art=orbs] .choice-body { border-top:3px solid #ac8ec7; }
.banner-copy p { font-family:var(--reading-font); text-transform:uppercase; }
.name-card:has([aria-pressed=true]) { border-color:var(--purple); background:var(--tint); }
.name-card h3 { color:var(--accent); overflow-wrap:anywhere; }
.world-pixel .hero,.world-pixel .tabs,.world-pixel .brand-mark,.world-pixel .primary,.world-pixel .secondary,.world-pixel input,.world-pixel select { border-radius:7px; }
.world-pixel .mini-orb { clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.world-pixel .brand-mark { box-shadow:3px 3px 0 var(--line); }
.world-pixel .hero-illustrated:before { background:linear-gradient(90deg,#09142aef,#101735a8 52%,#09132b30); }
.world-pixel .hero-illustrated h1 em { color:#b2f2e9; }
.world-cozy .hero-illustrated:before { background:linear-gradient(90deg,#321e2de8,#53372a9c 55%,#52332a30); }
.world-orbs .hero { min-height:380px; }
.world-orbs .hero-art { opacity:.75; }
.world-orbs .hero-copy { max-width:610px; }
.world-orbs .hero-actions .secondary { background:var(--panel); color:var(--ink); border-color:var(--line); }
.world-orbs .hero-footnote { color:var(--muted); }
.font-arcade .brand { font-size:15px; line-height:1.7; }
.font-arcade h2 { font-size:19px; line-height:1.8; letter-spacing:0; }
.font-arcade h3 { font-size:13px; line-height:1.8; letter-spacing:0; }
.font-arcade .hero h1 { font-size:clamp(21px,2.5vw,33px); line-height:1.85; letter-spacing:0; }
.font-arcade .sphere-title h3 { font-size:12px; }
.font-arcade .workspace>aside h2 { font-size:16px; }
.font-arcade .person h3 { font-size:16px; }
.font-arcade .portrait .initial { font-size:38px; }
.font-arcade .name-card h3 { font-size:16px; }
.font-arcade .font-sample { font-size:13px; }
footer { margin-top:5px; border-color:var(--line); padding:26px 32px; gap:20px; }
#toast { background:var(--purple); color:var(--button-ink); border:1px solid var(--line); box-shadow:0 5px 30px #09041140; z-index:30; max-width:calc(100vw - 32px); }
@media(min-width:1000px) { .hero-copy { padding-right:15px; } }
@media(max-width:1100px) { .connection-routes { grid-template-columns:repeat(2,minmax(0,1fr)); } .connection-route { min-height:95px; } .site-header { gap:18px; } .tagline { display:none; } .workspace { grid-template-columns:230px minmax(0,1fr); } .workspace>aside { padding:18px; } }
@media(max-width:900px) { .hero { padding:38px 30px 75px; } .hero-illustrated { min-height:415px; } .hero-illustrated:before { background:linear-gradient(90deg,#180e29eb,#21122c70); } .brand { font-size:23px; } .character-layout { gap:22px; } .character-preview-wrap,.studio-live { position:static; } }
@media(max-width:700px) { main { padding:0 18px; } .site-header { padding:17px 18px; min-height:85px; } .brand { font-size:20px; gap:9px; } .brand-mark { width:35px; height:42px; } .brand small { font-size:7px; letter-spacing:1px; } .badge { font-size:7px; padding:7px 9px; letter-spacing:.8px; } .hero { margin-top:18px; padding:30px 24px 75px; border-radius:18px; } .hero-illustrated { min-height:420px; } .hero h1,.hero-illustrated h1 { font-size:clamp(29px,5.8vw,39px); } .hero .eyebrow { font-size:8px; letter-spacing:1.8px; } .hero-actions { gap:8px; } .hero-actions button { padding:11px 14px; font-size:11px; } .hero-illustrated p:not(.eyebrow) { font-size:13px; } .hero p.hero-footnote { font-size:9px; } .world-switch { right:18px; bottom:18px; font-size:9px; } .connection-routes { gap:10px; } .connection-route { padding:15px 12px; gap:9px; } .route-arrow { display:none; } .connection-route strong { font-size:11px; } .route-icon svg { width:20px; height:20px; } .tabs { gap:20px; margin-top:17px; } .tabs button { min-height:56px; font-size:10px; } .view { padding-top:27px; } .workspace { grid-template-columns:1fr; } .section-head { flex-wrap:wrap; } .section-head h2,h2 { font-size:24px; } .workspace>aside { padding:22px; } .sphere { padding:16px; } .sphere-title h3 { font-size:14px; } .lab-layout { gap:23px; } .raid-hero h2 { font-size:30px; } .font-arcade .brand { font-size:12px; } .font-arcade .hero h1 { font-size:21px; } .font-arcade .section-head h2 { font-size:17px; } footer { padding:22px 18px; font-size:10px; } }
@media(max-width:420px) { .brand { font-size:17px; } .brand small { font-size:6px; } .site-header { gap:10px; } .brand-mark { width:29px; height:37px; } .brand-mark svg { width:24px; } .badge { max-width:84px; white-space:normal; text-align:center; } .hero { padding:27px 18px 76px; } .hero h1 { font-size:28px; } .hero-actions { flex-direction:column; align-items:flex-start; } .hero-actions button { min-width:180px; } .connection-route { display:block; min-height:146px; } .route-icon { display:block; margin-bottom:6px; } .connection-route strong { font-size:11px; } .connection-route small { font-size:10px; } .sphere-title { gap:7px; flex-wrap:wrap; } .mini-orb { width:21px; height:21px; } .interest-row { grid-template-columns:minmax(0,1fr) 108px 22px; gap:5px; } .interest-row select { font-size:10px; padding:7px 4px; } .interest-name { font-size:12px; } .font-arcade .brand { font-size:10px; } .font-arcade .hero h1 { font-size:18px; } .raid-slots { gap:9px; } .raid-slots span { width:80px; height:80px; } .rank-row { grid-template-columns:18px 86px minmax(0,1fr) 57px; font-size:10px; gap:6px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } .person:hover,.connection-route:hover { transform:none; } }

/* Optional worlds: shared palette tokens apply to the site and member profiles. */
.world-forest{
 --paper:#10251d;--ink:#f0f4df;--muted:#b8cdb3;--line:#47664c;--purple:#b8d68b;--accent:#e6c886;--mint:#a2d8c3;
 --panel:#1b3427;--panel-raised:#294535;--field:#152b21;--tint:#314d37;--pill:#35523a;--button-ink:#172b1d;--danger:#ffb9aa;
 --radius:16px;--shadow:0 12px 32px #06100b40;--world-art:url('assets/banner-forest.svg');color-scheme:dark;
}
.world-heaven{
 --paper:#fbf5e9;--ink:#492b2d;--muted:#735957;--line:#c9af7d;--purple:#8e2e42;--accent:#805b20;--mint:#647448;
 --panel:#fffdf6;--panel-raised:#f2e6d0;--field:#fffdf8;--tint:#f3e4d4;--pill:#f1dfcd;--button-ink:#fffaf0;--danger:#a5253e;
 --radius:12px;--shadow:0 10px 28px #72452710;--world-art:url('assets/banner-heaven.svg');color-scheme:light;
}
.world-forest .brand-mark{border-color:#7c995c;background:linear-gradient(140deg,#36533a,#1b3427)}
.world-heaven .brand-mark{border-color:#ba934e;background:linear-gradient(140deg,#fff9e9,#ead4a7);color:#8e2e42}
.world-heaven .member-primary-nav{border-top:2px solid #b5904e}.world-heaven .primary{background:linear-gradient(110deg,#8e2e42,#6f2639)}
.world-forest .hero-illustrated:before{background:linear-gradient(90deg,#091e17ed,#142b20a0 55%,#142b2020)}
.world-heaven .hero-illustrated:before{background:linear-gradient(90deg,#42232bea,#60392aa0 50%,#60392a18)}
.art-choice[data-art=forest] .choice-body{border-top:3px solid #a8c57b}.art-choice[data-art=heaven] .choice-body{border-top:3px solid #b38946}