/* Thiên Mệnh Tinh Đồ — standalone, code-native UI. No external font or image dependencies. */
:root{color-scheme:dark;--gold:#beb394;--gold-bright:#e5dcc3;--muted:#899795;--line:rgba(184,180,151,.19)}
*{box-sizing:border-box}body{margin:0;background:#080e14;color:#dedbd1;font:14px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit;background:none;border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold-bright);outline-offset:5px}button:hover,a:hover{color:var(--gold-bright)}[hidden]{display:none!important}
.atlas{position:relative;height:100svh;min-height:660px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 46% 59%,rgba(51,78,75,.2),transparent 49%),radial-gradient(ellipse at 70% 43%,rgba(46,52,87,.16),transparent 43%),#080e14}
#star-field,.atlas-vignette,.atlas-grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.atlas-vignette{z-index:2;background:radial-gradient(ellipse at 50% 54%,transparent 25%,rgba(5,10,16,.32) 72%,rgba(5,10,16,.8) 100%)}.atlas-grain{z-index:3;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.atlas-header{position:absolute;top:0;left:36px;right:36px;height:90px;display:flex;align-items:center;justify-content:space-between;z-index:10;border-bottom:1px solid var(--line)}.back-link,.quiet-button{font-size:12px;letter-spacing:.03em;color:#a7aaa2}.back-link span{margin-right:12px}.atlas-brand{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.24em;color:var(--gold);display:flex;align-items:center;gap:12px}.atlas-brand>span{font-size:31px}.atlas-brand small{border-left:1px solid var(--line);padding-left:14px;font-size:9px;letter-spacing:.17em;color:#9e9e90}.quiet-button>span{display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:22px;height:22px;margin-right:7px}
.atlas-heading{position:absolute;top:120px;left:0;right:0;text-align:center;z-index:4;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.26em;color:var(--gold);display:flex;align-items:center;justify-content:center;gap:17px}.eyebrow>span{width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.eyebrow>span:last-child{transform:rotate(180deg)}h1{margin:12px 0 5px;font:400 clamp(32px,3.5vw,54px)/1.3 Georgia,"Times New Roman",serif;letter-spacing:-.035em;color:#e3ddce}h1 em{color:var(--gold-bright);font-weight:400} .atlas-heading>p{font-size:12px;color:#a6ada5;letter-spacing:.1em;margin:8px}.atlas-heading>p span{color:#665c46;margin:0 12px}.atlas-heading b{font-weight:400;color:#d0b88f}
.atlas-search{position:absolute;left:36px;top:120px;width:246px;z-index:12}.atlas-search label{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:10px 0;gap:10px}.atlas-search label>span{font-size:25px;color:var(--gold)}.atlas-search input{width:100%;min-width:0;border:0;background:none;color:#ede6d7;font-size:11px;outline:0;padding-right:20px}.atlas-search input::placeholder{color:#7c8687}.atlas-search kbd{position:absolute;right:0;top:17px;color:#626c6d;border:1px solid #303939;padding:0 6px;border-radius:3px;font-size:10px}.search-results{max-height:300px;overflow:auto;background:#10181ef5;border:1px solid var(--line);border-radius:5px;margin-top:8px;padding:8px;box-shadow:0 14px 40px #0006}.search-results button{display:block;text-align:left;width:100%;padding:10px;border-radius:3px;font-size:13px}.search-results button:hover{background:#b79a6015}.search-results p{padding:4px 10px;font-size:12px;color:var(--muted)}
.star-stage{position:absolute;inset:250px 0 150px;z-index:5;touch-action:none;cursor:grab}.star-stage:active{cursor:grabbing}#star-nodes{position:absolute;inset:0;pointer-events:none}.star-node{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;width:140px;padding:0;pointer-events:auto;will-change:transform;transition:opacity .25s}.star-orb{width:43px;height:43px;display:grid;place-items:center;position:relative;border:1px solid #bb9a6666;border-radius:50%;padding:3px;background:#101c23;box-shadow:0 0 0 4px #b2986810,0 0 26px #7fa8971b;color:var(--gold);font:20px Georgia,serif}.star-orb img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:saturate(.65)}.star-orb::after{content:"";position:absolute;inset:-9px;border:1px solid #c2a26c25;border-radius:50%;border-left-color:transparent;border-right-color:transparent;transform:rotate(-35deg)}.star-node:nth-child(3n) .star-orb{border-color:#8ec4c16b;box-shadow:0 0 0 4px #75acb410,0 0 26px #679da51a}.star-node:nth-child(4n) .star-orb{border-color:#bd9bc96b}.star-name{margin-top:15px;font:14px Georgia,"Times New Roman",serif;white-space:nowrap;color:#c6c9bd;text-shadow:0 2px 6px #000}.star-node.is-selected .star-orb,.star-node:hover .star-orb{border-color:var(--gold-bright);box-shadow:0 0 0 5px #c6a26713,0 0 45px #ccb07f55}.star-node.is-selected .star-name{color:var(--gold-bright)}.star-node.is-center .star-orb{width:78px;height:78px;padding:5px;box-shadow:0 0 0 8px #c6a2670a,0 0 60px #ccb07f30}.star-node.is-center .star-orb::after{inset:-17px;border-color:#b394594a;border-left-color:transparent}.star-node.is-center .star-name{font-size:19px;margin-top:25px;color:var(--gold-bright)}.star-node.is-center::before{content:"TINH TÚ TRUNG TÂM";position:absolute;top:-36px;font-size:8px;letter-spacing:.22em;color:#bfa777;white-space:nowrap}
.sky-label{position:absolute;top:49%;z-index:4;color:#b59d7266;display:flex;flex-direction:column;align-items:center;gap:17px;font:11px Georgia,serif;letter-spacing:.15em;pointer-events:none}.sky-label i{height:65px;width:1px;background:linear-gradient(transparent,#b59d7266,transparent)}.sky-label-left{left:48px}.sky-label-right{right:48px}
.star-detail{position:absolute;z-index:15;right:36px;top:190px;width:272px;border:1px solid #a38c583f;background:linear-gradient(145deg,#172124f5,#0b131af7);padding:28px 24px 20px;text-align:center;border-radius:3px;box-shadow:0 20px 70px #0006}.star-detail::before{content:"";position:absolute;inset:6px;border:1px solid #a38c5817;pointer-events:none}.detail-close{position:absolute;right:8px;top:2px;font-size:25px;color:#969a91}.star-detail .eyebrow{font-size:8px;letter-spacing:.2em}.detail-portrait{position:relative;margin:25px auto 14px;width:84px;height:84px;border:1px solid var(--gold);border-radius:50%;padding:5px;box-shadow:0 0 0 7px #bca0750b,0 0 34px #bca07520;display:grid;place-items:center}.detail-portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%}.detail-portrait>span{font:32px Georgia;color:var(--gold)}.detail-rule{color:var(--gold);font-size:11px}.star-detail h2{font:25px Georgia,serif;color:#eee1c7;margin:9px 0}.detail-type{font-size:8px;letter-spacing:.12em;color:#859291}.detail-lore{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;color:#b4b5a8;font:italic 13px/1.8 Georgia,serif}.detail-lore>span{color:var(--gold);font-size:20px}.primary-button{display:flex;justify-content:space-between;align-items:center;border:1px solid #c2a57466;background:#b99b5710;padding:10px 12px;color:#dec89d;font-size:11px;margin-top:23px}.detail-note{font-size:10px;color:#828d8b;line-height:1.8;margin:17px 0 0}
.atlas-help{position:absolute;right:36px;top:102px;width:310px;background:#111b22fa;border:1px solid var(--line);padding:20px 24px;z-index:20;box-shadow:0 12px 50px #0008}.atlas-help h2{font:22px Georgia;color:var(--gold-bright);margin:0 0 15px}.atlas-help p{font-size:12px;color:#b4bcb6}.atlas-help .help-note{font-size:11px;color:#b5a17c;border-top:1px solid var(--line);padding-top:13px}
.atlas-bottom{position:absolute;bottom:78px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;z-index:10}.atlas-caption{color:#a4ab9d;font-size:9px;letter-spacing:.18em;display:flex;align-items:center;gap:8px}.status-dot{width:5px;height:5px;background:#91b9a2;border-radius:50%;box-shadow:0 0 9px #91b9a255}.atlas-caption small{font-size:9px;color:#677574;letter-spacing:0}.atlas-controls{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);background:#101920dd;box-shadow:0 6px 25px #0004;border-radius:5px}.atlas-controls button{min-width:32px;min-height:32px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px}.atlas-controls button>span:first-child{font-size:20px;color:var(--gold)}.atlas-controls button[aria-pressed=true]{color:var(--gold-bright)}.atlas-controls i{height:18px;border-left:1px solid var(--line);margin:0 5px}.atlas-controls output{font-size:10px;color:#a4aca7;width:37px;text-align:center}.next-stars{font-size:11px;color:#b7ae95;letter-spacing:.05em}.next-stars span{margin-left:10px}.atlas-footer{position:absolute;bottom:38px;width:100%;text-align:center;font-size:10px;color:#6d7b79;letter-spacing:.035em;z-index:4;pointer-events:none}.atlas-footer span{color:#75664a;margin:0 15px}.design-notice{position:absolute;left:36px;bottom:10px;color:#788079;font-size:8px;letter-spacing:.1em;z-index:4}.design-notice span{margin:0 6px;color:var(--gold)}.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}.no-script{position:fixed;inset:45% 15% auto;padding:25px;background:#17232a;z-index:30;text-align:center}.no-script a{color:var(--gold)}
/* Restrained celestial palette: charcoal, pale antique gold and cool starlight. */
body{background:#080e14;color:#deded5}
.atlas{background:
radial-gradient(ellipse at 43% 57%,#3b575329,transparent 48%),
radial-gradient(ellipse at 72% 44%,#3e54661a,transparent 44%),
radial-gradient(ellipse at 50% 74%,#67604a0c,transparent 52%),#080e14}
.atlas-vignette{background:radial-gradient(ellipse at 50% 54%,transparent 25%,#050a1052 72%,#050a10cc 100%)}
.atlas-grain{opacity:.07}
h1,.star-detail h2{color:#e3dfd2}
h1 em{color:#e5dcc3;text-shadow:0 0 32px #b5c5bf0c}
.atlas-heading>p,.back-link,.quiet-button,.atlas-brand small{color:#a4ada8}
.atlas-heading>p span{color:#747467}
.atlas-heading b{color:#cec3a6}
.atlas-search input{color:#e2e5df}
.atlas-search input::placeholder{color:#879490}
.atlas-search kbd{color:#82928e;border-color:#b3c0b52b}
.search-results{background:#10191ef5}
.search-results button:hover{background:#b8b49b15}
.star-orb{border-color:#b9b99c80;background:#111d23;box-shadow:0 0 0 4px #b5bda310,0 0 26px #9ab8b520}
.star-orb img{filter:saturate(.75)}
.star-orb::after{border-color:#b8b49330;border-left-color:transparent;border-right-color:transparent}
.star-node:nth-child(3n) .star-orb{border-color:#a5c6cc80;box-shadow:0 0 0 4px #a3c5c210,0 0 26px #9bbbc222}
.star-node:nth-child(4n) .star-orb{border-color:#b9c6cb80;box-shadow:0 0 0 4px #bacad010,0 0 26px #aac6ce20}
.star-name{color:#cbd1c8}
.star-node.is-selected .star-orb,.star-node:hover .star-orb{border-color:#e5e1cc;box-shadow:0 0 0 5px #c6c4aa15,0 0 40px #b6c9c53b}
.star-node.is-center .star-orb{border-color:#c9c4a3;box-shadow:0 0 0 8px #c6bea00b,0 0 55px #b4b79929}
.star-node.is-center .star-orb::after{border-color:#bcb3944a;border-left-color:transparent}
.star-node.is-center::before{color:#bfb696}
.sky-label{color:#b5ad896e}
.sky-label i{background:linear-gradient(transparent,#b5ad8959,transparent)}
.star-detail{border-color:#b5ad8640;background:linear-gradient(145deg,#172226f5,#0b141bf7)}
.star-detail::before{border-color:#b8b0921c}
.detail-portrait{box-shadow:0 0 0 7px #bcb79c0b,0 0 34px #b0bfac24}
.detail-close,.detail-type,.detail-note{color:#929f9a}
.detail-lore{color:#b8bdb1}
.primary-button{border-color:#c0b79459;background:#b9b08b10;color:#d9d2b9}
.atlas-help{background:#111b22fa}
.atlas-help p{color:#b7c1b9}
.atlas-help .help-note{color:#b8b197}
.atlas-caption{position:absolute;left:0;color:#a8b5aa}
.atlas-caption small{color:#7e928c}
.status-dot{background:#a8c9c8;box-shadow:0 0 9px #a3c9cf66}
.atlas-bottom{justify-content:center}
.atlas-controls{background:#101920dd}
.atlas-controls output{color:#b1beb5}
.atlas-controls button:disabled,.primary-button:disabled{opacity:.45;cursor:default}
.atlas-footer,.design-notice{color:#81908a}
.atlas-footer span{color:#a6a083}
@media(min-width:1500px){.atlas-heading{top:125px}.star-stage{inset:270px 5% 150px}}
@media(max-width:1100px){.atlas-search{top:218px;width:220px}.relation-filters{top:268px;width:220px}.star-stage{inset:310px 0 150px}.atlas-caption{display:none}.atlas-bottom{justify-content:center;gap:25px}.star-detail{right:20px;width:250px;top:260px}.atlas-brand small{display:none}.atlas:has(#star-detail:not([hidden])) .star-stage{right:280px}}
@media(max-width:600px){.atlas{min-height:620px}.atlas-header{left:20px;right:20px;height:68px}.atlas-brand{position:static;transform:none;font-size:9px;gap:5px;letter-spacing:.12em}.atlas-brand>span{font-size:24px}.back-link{font-size:10px}.back-link span{margin-right:4px}.quiet-button{font-size:0}.quiet-button>span{font-size:12px;margin:0}.atlas-heading{top:91px}h1{font-size:34px;margin-top:10px}.eyebrow{font-size:7px;letter-spacing:.17em}.atlas-heading>p{font-size:10px}.atlas-search{top:206px;left:50%;width:260px;transform:translateX(-50%)}.atlas-search input{font-size:11px}.star-stage{inset:270px 0 158px}.sky-label-left{left:14px}.sky-label-right{right:14px}.sky-label{font-size:8px}.star-node{width:110px}.star-orb{width:33px;height:33px}.star-name{font-size:11px;margin-top:11px}.star-node.is-center .star-orb{width:61px;height:61px}.star-node.is-center .star-name{font-size:15px;margin-top:20px}.star-node.is-center::before{font-size:6px;top:-29px}.atlas-bottom{left:12px;right:12px;bottom:82px;gap:0;flex-wrap:wrap}.atlas-controls{padding:6px 9px;gap:4px}.atlas-controls button{font-size:10px;min-height:34px;gap:5px}.atlas-controls i{margin:0 2px}.atlas-controls output{width:33px}.next-stars{position:absolute;top:61px;font-size:10px}.atlas-footer{bottom:28px;font-size:8px}.atlas-footer span{display:none}.design-notice{left:0;right:0;text-align:center;bottom:2px;font-size:7px}.star-detail{position:absolute;left:12px;right:12px;bottom:12px;top:auto;width:auto;padding:18px 20px 20px;max-height:70%;overflow:auto;border-radius:12px;box-shadow:0 -20px 80px #000a}.detail-portrait{width:56px;height:56px;margin:15px auto 8px}.star-detail h2{font-size:23px}.detail-lore{display:none}.detail-type{margin-bottom:12px}.primary-button{margin-top:15px}.detail-note{margin-top:12px;font-size:10px}.atlas-help{right:12px;top:80px;max-width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.star-detail{pointer-events:none}
.star-detail .detail-close,
.star-detail .relation-list,
.star-detail .primary-button{pointer-events:auto}
@media(max-width:600px){.star-detail{pointer-events:auto}}

.atlas-search{z-index:13}
.search-results{z-index:20}
.relation-filters{position:absolute;left:36px;top:188px;z-index:11;display:flex;flex-wrap:wrap;gap:6px;width:246px}
.relation-filters button{font-size:10px;padding:5px 8px;border:1px solid var(--line);color:#b8b197;border-radius:3px}
.relation-filters button[aria-pressed=true]{color:var(--gold-bright);border-color:#c5b48a88}
.star-links{position:absolute;inset:0;pointer-events:none;z-index:4}
#star-nodes{z-index:6}
.link-label{position:absolute;left:0;top:0;pointer-events:auto;padding:2px 7px;font-size:9px;letter-spacing:.04em;color:#e5dcc3;border:1px solid #c5b48a55;background:#101920f2;border-radius:999px;white-space:nowrap;max-width:88px;overflow:hidden;text-overflow:ellipsis}
.atlas:has(#star-detail:not([hidden])) .star-stage{right:318px}
.link-evidence{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);text-align:left;pointer-events:auto}
.link-evidence p{margin:0 0 8px;font-size:11px;color:#c5b48a}
.link-evidence blockquote{margin:0;font:italic 12px/1.6 Georgia,serif;color:#c8cfc6}
@media(max-width:600px){
.relation-filters{left:50%;top:248px;width:min(320px,calc(100% - 24px));transform:translateX(-50%);justify-content:center}
.star-stage{inset:310px 0 158px}
.atlas:has(#star-detail:not([hidden])) .star-stage{right:0}
.link-label{font-size:9px;padding:2px 6px;max-width:110px}
}
.relation-list{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line);text-align:left}
.relation-list li+li{margin-top:10px}
.relation-list button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:6px 0;text-align:left}
.relation-list strong{font:15px Georgia,serif;color:#e5dcc3}
.relation-list span{font-size:11px;color:#b8b197}
.relation-list small{display:block;font-size:10px;color:#8a938c;line-height:1.55;margin-top:4px}
.star-node.is-org .star-orb{border-radius:12px}
.star-node.is-org .star-orb img{border-radius:9px}