/* Shared with the landing and deployment artwork. */
.sanya-site{
 --site-dark:#050e0d;--site-panel:#091915;--site-paper:#f0eee5;
 --site-muted:#b8c7ba;--site-jade:#a7e3d5;--site-amber:#eac38a;--site-line:#95bda338;
 --site-title-font:'Batang',Georgia,serif;--site-gutter:clamp(32px,5vw,96px);
 --site-jade-button:url('/assets/web/art-deployment-crafted-button-jade.a29b66e5c4c63584.webp');
 --site-ink-button:url('/assets/web/art-deployment-crafted-button-ink.184c97f6b6915438.webp');
 --site-ember-button:url('/assets/web/art-deployment-crafted-button-ember.dee2496e1b4c473e.webp');
}
.reference-page{margin:0;background:var(--site-dark);color:var(--site-paper);color-scheme:dark;font-family:Pretendard,system-ui,sans-serif}
.reference-page *{box-sizing:border-box}
.reference-page a{color:inherit;text-decoration:none}
.reference-page :is(button,input){font:inherit}
.reference-page button{cursor:pointer}
.reference-page button:disabled{cursor:wait;opacity:.55}
.reference-page :is(h1,h2,h3,p){margin-top:0;word-break:keep-all;overflow-wrap:break-word}
.reference-page :is(h1,h2,h3),.reference-page :is(h1,h2,h3) em{font-family:var(--site-title-font)!important;font-weight:500}
.reference-page p{line-height:1.85}
.reference-page :is(a,button,input,summary):focus-visible{outline:2px solid var(--site-amber);outline-offset:5px}
.reference-page main:focus{outline:none}
.reference-page ::selection{background:#a7e3d538;color:#fff}
.reference-page .eyebrow{color:var(--site-jade);font-size:10px;letter-spacing:2.5px;font-weight:400;line-height:1.8}
.reference-page .site-skip{position:fixed;top:-80px;left:20px;z-index:100;padding:14px 24px;background:var(--site-panel);color:var(--site-paper)}
.reference-page .site-skip:focus{top:12px}
.site-header{display:flex;align-items:center;gap:28px;min-height:84px;padding:12px 4%;background:var(--site-dark);border-bottom:1px solid var(--site-line)}
.site-brand{display:flex;align-items:center;gap:14px;flex:none}
.site-brand img{display:block;width:88px;height:48px;object-fit:contain}
.site-brand small{color:var(--site-muted);font-size:8px;letter-spacing:1.5px;line-height:1.9}
.site-header nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.site-header nav a{display:flex;align-items:center;min-height:48px;font-size:12px;color:#cbd6c9;letter-spacing:.5px;border-bottom:1px solid transparent}
.site-header nav a:hover{color:var(--site-jade)}
.site-header nav a[aria-current="page"]{color:var(--site-jade);border-color:var(--site-jade)}
.reference-page .site-play{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:54px;padding:15px 24px;border:0;border-radius:0;background:var(--site-jade-button) center/100% 100% no-repeat;color:#e8fff6;font-family:var(--site-title-font)!important;font-size:16px;font-weight:500;letter-spacing:1px;text-shadow:0 2px 4px #000;white-space:nowrap;transition:filter .25s}
.reference-page .site-play:hover{filter:brightness(1.3)}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 4%;border-top:1px solid var(--site-line);color:var(--site-muted);font-size:11px}
.site-footer>a:last-child{display:inline-flex;align-items:center;gap:12px;min-height:44px}
.site-footer a:hover{color:var(--site-jade)}
@media(max-width:760px){
 .reference-page{--site-gutter:22px}
 .site-header{flex-wrap:wrap;gap:10px 16px;padding:12px 20px 0}
 .site-brand img{width:72px;height:40px}
 .site-brand small{display:none}
 .site-header>.site-play{margin-left:auto;min-height:44px;padding:12px 18px;font-size:14px;gap:12px}
 .site-header nav{order:3;flex-basis:100%;justify-content:space-between;margin:0;gap:16px;border-top:1px solid var(--site-line)}
 .site-header nav a{min-height:46px;font-size:11px}
 .site-footer{padding:24px 22px;flex-wrap:wrap;gap:12px 24px}
 .site-footer>span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.reference-page *{transition:none!important;scroll-behavior:auto!important}}
