@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Noto+Sans+Thai:wght@400;500;600&display=swap');
:root{color-scheme:dark;--gold:#c28d6f;--red:#e52b45}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#320a12,#090406 70%);color:#f4dfd3;font-family:'Noto Sans Thai',sans-serif;min-height:100svh;padding:24px}.palace{max-width:1200px;margin:auto;border:1px solid #996147;outline:1px solid #492b25;outline-offset:7px;background:#0c0507;box-shadow:0 0 70px #6b061b44;position:relative}.palace:before,.palace:after{content:'✦';position:absolute;z-index:2;color:#da9d76;font-size:26px;top:-18px}.palace:before{left:-10px}.palace:after{right:-10px}.hero{display:grid;grid-template-columns:55% 45%;min-height:570px;overflow:hidden;background:#14070c}.portrait{background:url('assets/desktop.png') left top / auto 116% no-repeat;min-height:570px;mask-image:linear-gradient(to right,#000 86%,transparent)}.intro{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 24px 18px;background:radial-gradient(ellipse,#350c1544,transparent 75%)}.eyebrow{font-size:10px;letter-spacing:3px;color:#c89582}.crown{color:#ecbd94;font-size:36px;text-shadow:0 0 20px #e93841;margin-top:12px}h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(52px,6.8vw,96px);line-height:1;margin:4px 0 0;letter-spacing:3px;color:#ffe0b9;text-shadow:0 0 9px #fb4a3f,0 0 30px #af102a}.logo{width:82%;max-width:340px;display:block;margin:-2px 0 4px;mask-image:radial-gradient(ellipse at center,#000 43%,transparent 72%)}.roles{font-size:11px;letter-spacing:1px;color:#d9ac9c;margin:0}.quote{font-size:18px;margin:17px 0 3px}.divider{color:#d1987d;letter-spacing:3px;margin:6px 0 18px;text-shadow:0 0 10px #e94742}.traits{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;margin:0;list-style:none}.traits li{border:1px solid #985248;border-radius:12px;padding:3px 9px;font-size:15px;color:#e4baa7;box-shadow:inset 0 0 8px #ce233528}.traits span{font-size:10px;vertical-align:middle}.socials,.support{display:grid;gap:16px;padding:18px 24px;border-top:1px solid #895544;background:linear-gradient(180deg,#21090d,#0b0406)}.socials{grid-template-columns:repeat(6,1fr)}.support{grid-template-columns:repeat(4,1fr);padding-top:12px}.card{font:inherit;color:#fff0e5;min-width:0;cursor:pointer;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at top,#4b0b18aa,#0a0306 80%);border:1px solid #a35b47;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);min-height:122px;transition:background .2s,transform .2s,filter .2s;box-shadow:inset 0 0 0 4px #200b0e,inset 0 0 15px #e7274133}.card:after{content:'›';position:absolute;right:9px;bottom:12px;color:#d99e83;font-size:23px}.card:hover{background:radial-gradient(ellipse at top,#781728,#18070e);transform:translateY(-3px);filter:brightness(1.2)}.card:focus-visible{outline:3px solid #ffdda9;outline-offset:-6px}.icon{height:34px;font-size:29px;line-height:1;font-family:Arial,sans-serif;font-weight:bold;color:var(--icon);text-shadow:0 0 15px var(--icon);margin-bottom:10px}.card strong{font-size:13px;font-weight:600}.card small{font-size:9px;color:#cfbfb9;letter-spacing:.5px}.support .card{min-height:102px;border-color:#b52b42}.support .icon{color:#fff0d9;text-shadow:0 0 8px #ff555b,0 0 18px red}footer{text-align:center;font-size:9px;letter-spacing:4px;color:#9f7463;padding:16px}dialog{border:1px solid #b47759;max-width:calc(100% - 40px);width:360px;background:radial-gradient(ellipse at top,#400e1c,#100608);color:#ecd8ca;padding:28px;text-align:center;box-shadow:0 0 70px #a3173644}dialog::backdrop{background:#080207c9;backdrop-filter:blur(5px)}dialog h2{font-size:22px}dialog p{font-size:14px}.close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:24px;color:#d5a083;cursor:pointer}.dismiss{background:#42101e;border:1px solid #a3614b;color:#f7ddcc;padding:8px 28px;border-radius:3px;font:inherit;cursor:pointer}
@media(min-width:1400px){body{padding-top:40px}}@media(max-width:700px){body{padding:12px}.palace{max-width:440px;outline-offset:4px}.hero{display:flex;flex-direction:column;min-height:0}.portrait{min-height:0;height:310px;background-image:url('assets/mobile.png');background-size:100% auto;background-position:center top;mask-image:linear-gradient(to bottom,#000 84%,transparent)}.intro{padding:0 15px 22px;margin-top:-16px;position:relative}.eyebrow{display:none}.crown{font-size:24px;margin:0}h1{font-size:64px}.logo{width:230px;margin-top:0}.roles{font-size:9px;letter-spacing:.2px}.quote{font-size:15px;margin-top:12px}.divider{margin:6px 0 12px}.traits{gap:6px;max-width:310px}.socials{grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 12px}.card{min-height:105px}.card strong{font-size:11px}.card small{font-size:8px}.support{gap:6px;padding:12px 10px}.support .card{min-height:86px}.support .card strong{font-size:9px}.support .card small{display:none}.support .icon{font-size:23px}.support .card:after{font-size:15px;right:6px;bottom:5px}footer{font-size:8px}.icon{font-size:26px}}@media(max-width:360px){.portrait{height:250px}h1{font-size:56px}.logo{width:200px}.card strong{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.icon svg{width:29px;height:29px;fill:currentColor;filter:drop-shadow(0 0 5px currentColor)}

@media(max-width:700px){.portrait{height:auto;aspect-ratio:272 / 205}}

.portrait{background-image:url('assets/profile.png');background-size:contain;background-position:center;background-repeat:no-repeat;mask-image:none}.hero{background:radial-gradient(ellipse at 20% 50%,#430918,#100509 70%)}@media(max-width:700px){.portrait{background-image:url('assets/profile.png');aspect-ratio:1;height:auto;margin:12px 12px 8px}.intro{margin-top: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}

.support{grid-template-columns:repeat(2,minmax(0,1fr))}

.card small{padding:0 8px;text-align:center;max-width:100%;line-height:1.5}
.edit-link{display:block;color:#c79885;margin-top:12px;font-size:11px;letter-spacing:0}.editor{max-width:760px;padding:30px}.editor h1{font-family:'Noto Sans Thai',sans-serif;font-size:30px;margin:24px 0;letter-spacing:0}.editor p{line-height:1.8}.back{color:#e6bea7}.editor-row{display:grid;grid-template-columns:130px 1fr;gap:8px 16px;margin:24px 0}.editor-row label{align-self:center;font-weight:600}.editor-row input{width:100%;min-width:0;padding:12px;background:#190b10;border:1px solid #805147;border-radius:5px;color:#f5e4d9;font:inherit;font-size:14px}.editor-row input:focus{outline:2px solid #dca287}.editor-row small{grid-column:2;color:#bf9c8e}.editor-actions{display:flex;flex-wrap:wrap;gap:12px}.editor-note{font-size:12px;color:#b6988a;border-top:1px solid #54382f;padding-top:18px}#status{color:#eec2a5;font-size:14px}@media(max-width:500px){.editor{padding:20px}.editor-row{grid-template-columns:1fr}.editor-row small{grid-column:1}.editor h1{font-size:26px}}
@media (any-hover:hover) and (any-pointer:fine){
 html,body,body *{cursor:url('assets/cursor/default.png') 9 5,auto !important}
 body a,body a *,body button,body button *,body [role="button"],body [role="button"] *{cursor:url('assets/cursor/pointer.png') 11 3,pointer !important}
 body a:active,body a:active *,body button:active,body button:active *{cursor:url('assets/cursor/pressed.png') 18 20,grabbing !important}
 body input,body textarea,body [contenteditable="true"]{cursor:url('assets/cursor/text.png') 23 24,text !important}
 body button:disabled,body button:disabled *{cursor:not-allowed !important}
}

.loading-screen{position:fixed;inset:0;z-index:9999;background:radial-gradient(ellipse at center,#3a101c,#090406 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;opacity:1;transition:opacity .4s ease}.loading-logo{width:min(620px,85vw);height:auto;max-height:65vh;object-fit:contain;mask-image:radial-gradient(ellipse,#000 42%,transparent 75%);animation:logo-glow 2s ease-in-out infinite}.loading-screen p{font-size:11px;letter-spacing:5px;color:#e7bc9e;margin:8px 0 20px}.loading-dots{display:inline-block;animation:logo-glow 1.2s infinite}.loading-track{width:min(200px,50vw);height:2px;background:#57322f;overflow:hidden}.loading-track span{display:block;width:40%;height:100%;background:#f2b58c;box-shadow:0 0 12px #ff324d;animation:loading-slide 1.2s ease-in-out infinite}.loading-screen.is-ready{opacity:0;pointer-events:none}@keyframes loading-slide{from{transform:translateX(-100%)}to{transform:translateX(350%)}}@keyframes logo-glow{50%{filter:brightness(1.18) drop-shadow(0 0 10px #b32038)}}@media(prefers-reduced-motion:reduce){.loading-logo,.loading-dots,.loading-track span{animation:none}.loading-track span{width:100%}.loading-screen{transition:none}}

.loading-screen[hidden]{display:none}
@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.card{isolation:isolate}
.card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;padding:2px;background:conic-gradient(from var(--border-angle),transparent 0deg 220deg,#a40b24 260deg,#ff304c 300deg,#ffb0aa 320deg,#ff203e 335deg,transparent 360deg);clip-path:inherit;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity .2s}
.card:hover::before,.card:focus-visible::before{opacity:1;animation:red-border-orbit 1.6s linear infinite}
.card:hover,.card:focus-visible{border-color:#ee2842;box-shadow:inset 0 0 0 4px #200b0e,inset 0 0 18px #ef244655}
@keyframes red-border-orbit{to{--border-angle:360deg}}
@media(prefers-reduced-motion:reduce){.card:hover::before,.card:focus-visible::before{animation:none;background:#ff304c}}
/* Short light streaks orbit the border on hover. */
.card::before{padding:2px;background:conic-gradient(from var(--border-angle),transparent 0deg 75deg,#ed1835 80deg,#ffc3b7 86deg,#ff2947 91deg,transparent 97deg 255deg,#ed1835 260deg,#ffc3b7 266deg,#ff2947 271deg,transparent 277deg 360deg)}
.card:hover::before,.card:focus-visible::before{animation:red-border-orbit 1.5s linear infinite;background:conic-gradient(from var(--border-angle),transparent 0deg 75deg,#ed1835 80deg,#ffc3b7 86deg,#ff2947 91deg,transparent 97deg 255deg,#ed1835 260deg,#ffc3b7 266deg,#ff2947 271deg,transparent 277deg 360deg)}