@keyframes eva-glow{0%,100%{filter:drop-shadow(0 0 2px #9489ca)}50%{filter:drop-shadow(0 0 8px #9489ca)}}
@keyframes at-pulse{0%,100%{opacity:0.15}50%{opacity:0.35}}
body{color:#9489ca;font-family:var(--font-cn);overflow-x:hidden;transition:color .3s;background:transparent;min-height:100vh}
body.light{color:#111110}
body::before{background-color:#0F0F0E;background-image:radial-gradient(rgba(148,137,202,0.06) 1px,transparent 1px);background-size:28px 28px}
body.light::before{background-color:#f5f7fa}
.hdr{padding:0 0 16px;z-index:1;transition:background-color .3s}
.hdr h1{font-size:26px;font-weight:700;position:relative;padding:8px 0;color:#9489ca;display:flex;align-items:center;flex-wrap:nowrap;max-width:1200px}
body.light .hdr h1{color:#111110}
.hdr h1 .cn{letter-spacing:3px;margin-right:8px}
.hdr h1 .ipo{color:#9489ca;font-weight:700;margin-right:8px}
body.light .hdr h1 .ipo{color:#111110}
.hdr h1 .desc{color:#9489ca;font-weight:400}
body.light .hdr h1 .desc{color:#111110}
.hdr .sub{font-size:11px;color:#9489ca;letter-spacing:1px;margin-top:4px;padding-bottom:0;max-width:1200px}
body.light .hdr .sub{color:rgba(17,17,16,0.55)}
.hdr .sub::before{content:'>> ';color:#9489ca;font-family:var(--font-mono)}body.light .hdr .sub::before{color:rgba(17,17,16,0.45)}
.hdr-actions{top:16px}
.sb{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;padding:16px 40px;background:rgba(15,15,14,0.6);max-width:1400px;margin-left:auto;margin-right:auto}
body.light .sb{background:rgba(245,247,250,0.6)}
.sc{background:transparent;border:1px solid #9489ca;margin:-1px;padding:12px 16px;text-align:center;position:relative}
body.light .sc{border-color:#534A80}
.sc::before{content:'+';position:absolute;top:4px;left:5px;color:rgba(148,137,202,0.4);font-size:9px;font-family:var(--font-mono);line-height:1}
body.light .sc::before{color:rgba(83,74,128,0.3)}
.sc:hover{background:rgba(55,160,255,0.03)}
body.light .sc:hover{background:rgba(55,160,255,0.05)}
.sc .n{font-size:22px;font-weight:700;color:#9489ca;text-shadow:0 0 12px rgba(148,137,202,0.2)}
body.light .sc .n{color:#111110;text-shadow:none}
.sc .l{font-size:10px;color:#9489ca;letter-spacing:2px;text-transform:uppercase;margin-top:4px}
body.light .sc .l{color:rgba(17,17,16,0.5)}
.sc .l::before{content:'>> ';color:#9489ca;font-family:var(--font-mono);font-size:9px}body.light .sc .l::before{color:rgba(83,74,128,0.5)}
.g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0 40px;background:rgba(15,15,14,0.6);max-width:1400px;margin-left:auto;margin-right:auto}
body.light .g{background:rgba(245,247,250,0.6)}
.cc{background:transparent;border-right:1px solid rgba(148,137,202,0.12);border-bottom:1px solid #9489ca;padding:16px;position:relative}
body.light .cc{border-right-color:rgba(83,74,128,0.15)}
.cc::before{content:'+';position:absolute;top:5px;left:5px;color:rgba(148,137,202,0.2);font-size:9px;font-family:var(--font-mono);line-height:1}
.cc::after{content:'+';position:absolute;bottom:5px;right:5px;color:rgba(148,137,202,0.2);font-size:9px;font-family:var(--font-mono);line-height:1}
.cc:hover{background:rgba(148,137,202,0.02)}
body.light .cc:hover{background:rgba(83,74,128,0.03)}
.cc h3{font-size:13px;color:#9489ca;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;padding-bottom:8px;font-weight:600}
.cc h3::before{content:'=[ ';color:#9489ca;font-size:10px}
.cc h3::after{content:' ]=';color:#9489ca;font-size:10px}
body.light .cc h3{color:#111110}body.light .cc h3::before,body.light .cc h3::after{color:rgba(83,74,128,0.6)}
.note{font-size:11px;color:#9489ca;line-height:1.7;padding:8px 12px;background:transparent;border-top:1px dashed rgba(148,137,202,0.15);margin-top:8px;position:relative}
body.light .note{color:rgba(17,17,16,0.55);border-color:rgba(83,74,128,0.12)}
.note details{margin:8px 0}
.note summary{cursor:pointer;color:#9489ca;font-size:12px;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
body.light .note summary{color:rgba(17,17,16,0.6)}
.note summary::-webkit-details-marker{display:none}
.note summary::before{content:'▸';display:inline-block;transition:transform .2s;font-size:10px}
.note details[open]>summary::before{transform:rotate(90deg)}
.note summary:hover{color:#9489ca}
body.light .note summary:hover{color:#534A80}
.note .table-scroll{margin-top:8px}
.note::before{content:'# ';position:absolute;left:4px;top:8px;color:#9489ca;opacity:0.5;font-family:var(--font-mono);font-size:11px}
body.light .note::before{color:#534A80;opacity:0.3}
.note .hk-rules h4{color:#9489ca;font-size:12px;font-weight:600;margin-bottom:8px;letter-spacing:2px}
body.light .note .hk-rules h4{color:#534A80}
.note .hk-rules>p{font-size:11px;color:#9489ca;line-height:1.7;margin-bottom:8px}
body.light .note .hk-rules>p{color:rgba(17,17,16,0.55)}
.note .rule-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:11px;table-layout:fixed}
.note .rule-table th{background:rgba(148,137,202,0.08);color:#9489ca;padding:4px 8px;
    text-align:left;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
    border-bottom:1px solid rgba(148,137,202,0.15);overflow:hidden;text-overflow:ellipsis}
body.light .note .rule-table th{color:#534A80}
.note .rule-table td{padding:4px 8px;border-bottom:1px solid rgba(148,137,202,0.06);color:#9489ca;font-size:11px;line-height:1.6;white-space:normal;word-break:break-word}
body.light .note .rule-table td{color:#111110}
.note .rule-table tr:hover td{background:rgba(148,137,202,0.02)}
body.light .note .rule-table tr:hover td{background:rgba(83,74,128,0.03)}
.note .rule-table th:first-child,.note .rule-table td:first-child{width:42px;font-weight:600;text-align:center;white-space:nowrap;color:#9489ca}
body.light .note .rule-table th:first-child,body.light .note .rule-table td:first-child{color:#111110}
.note .table-scroll{overflow-x:hidden}
#c4,#c11{height:420px}
.toggle-btn{background:transparent;border:1px solid rgba(148,137,202,0.3);color:#9489ca;
    padding:4px 16px;border-radius:4px;cursor:pointer;font-size:11px;font-family:inherit;
    transition:all .2s;user-select:none;margin:4px 0}
.toggle-btn:hover{background:rgba(148,137,202,0.08);border-color:#9489ca;color:#9489ca}
body.light .toggle-btn{color:#534A80;border-color:rgba(83,74,128,0.25)}
body.light .toggle-btn:hover{background:rgba(83,74,128,0.06);border-color:#534A80;color:#534A80}
#c7{height:420px}
.fw{grid-column:1/-1}
.tc{background:transparent;border-top:1px solid rgba(148,137,202,0.2);
    border-left:1px solid rgba(148,137,202,0.2);border-right:1px solid rgba(148,137,202,0.2);
    border-bottom:1px solid #9489ca;padding:16px;margin:0 40px 20px;position:relative}
body.light .tc{border-color:rgba(83,74,128,0.15);border-bottom-color:#9489ca}
.tc::before{content:'=== DATA TABLE ===';position:absolute;top:-8px;left:16px;font-size:9px;color:rgba(148,137,202,0.4);letter-spacing:2px;background:#0F0F0E;padding:0 8px}
body.light .tc::before{background:#f5f7fa}
.tc h3{font-size:13px;color:#9489ca;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;font-weight:600}
.tc h3::before{content:'=[ ';color:#9489ca;font-size:10px}
.tc h3::after{content:' ]=';color:#9489ca;font-size:10px}
body.light .tc h3{color:#111110}
.table-wrap{width:100%}
table{width:100%;border-collapse:collapse;table-layout:fixed}
.tc table th,.tc table td{padding:8px 12px;text-align:left;border-bottom:1px solid #9489ca;font-size:12px;white-space:normal;word-break:break-word;overflow-wrap:break-word}
.tc table th{color:#9489ca;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:transparent}
body.light .tc table th{color:#534A80}.tc table td{color:#9489ca}.tc table tr:hover td{background:rgba(148,137,202,0.02)}
body.light .tc table tr:hover td{background:rgba(83,74,128,0.03)}
body.light .tc table td{color:#111110}
.ft{text-align:center;padding:16px;color:#9489ca;font-size:10px;letter-spacing:2px;font-family:var(--font-mono)}
body.light .ft{color:rgba(17,17,16,0.35)}
.mecha-canvas-wrap{background:#0F0F0E;padding:8px 0 16px;text-align:center;position:relative}
body.light .mecha-canvas-wrap{background:#f5f7fa}
.mecha-canvas-wrap canvas{display:block;margin:0 auto;width:100%;max-width:400px;height:auto}
.mecha-label{font-size:9px;color:rgba(148,137,202,0.5);letter-spacing:2px;font-family:var(--font-mono);margin-top:8px}
body.light .mecha-label{color:rgba(83,74,128,0.45)}
.dc{background:transparent;border:1px dashed rgba(148,137,202,0.2);padding:16px;position:relative}
.dc::before{content:'=== DISCLAIMER ===';position:absolute;top:-8px;left:16px;font-size:9px;color:rgba(148,137,202,0.5);letter-spacing:2px;background:#0F0F0E;padding:0 8px}
body.light .dc{background:#F5F2F7}
body.light .dc::before{background:#F5F2F7}
.dc h3{font-size:13px;color:#9489ca;margin-bottom:8px;letter-spacing:2px;text-transform:uppercase;font-weight:600}
.dc h3::before{content:'==[! ';font-size:14px;color:#9489ca}
.dc h3::after{content:' ]==';font-size:14px;color:#9489ca}
body.light .dc h3{color:#111110}body.light .dc h3::before,body.light .dc h3::after{color:rgba(83,74,128,0.6)}
.dc p{font-size:12px;color:#9489ca;line-height:1.7;margin-bottom:8px}
body.light .dc p{color:rgba(17,17,16,0.55)}
@media (max-width: 768px){
.hdr-actions{top:12px}
.hdr{padding:0 0 12px}
.hdr h1{font-size:18px;padding:8px 0}
.hdr .sub{font-size:9px}
.sb{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:12px 16px}
.sc{padding:8px 8px}
.sc .n{font-size:18px}
.sc .l{font-size:9px}
.g{grid-template-columns:1fr;gap:0;padding:12px 16px}
.cc{padding:12px;overflow:hidden}
.cc h3{font-size:12px}
.note{font-size:10px;padding:8px 8px 8px 16px}
.cb{height:300px}
.cb-tall{height:500px}
#c1,#c10{height:340px}
#c4,#c11{height:460px}
#c7{height:520px}
#c8{height:360px}
.tc{margin:0 16px 16px;padding:12px}
.tc::before{left:12px;font-size:8px}
.tc table th,.tc table td{font-size:11px;padding:8px 8px}
.ft{padding:16px;font-size:9px}
.dc{padding:12px}
.dc::before{left:12px;font-size:8px}
.dc h3{font-size:12px}
.dc p{font-size:11px;line-height:1.65}
.note .hk-rules h4{font-size:11px}
.note .rule-table th,.note .rule-table td{font-size:10px;padding:4px 8px}
.note .rule-table th:first-child,.note .rule-table td:first-child{width:42px}
}
@media (max-width: 420px){
.sb{grid-template-columns:1fr 1fr}
.cb{height:280px}
.cb-tall{height:520px}
#c4,#c11{height:430px}
#c7{height:480px}
}
/* demo overrides base.css ft-qr-item img width */
.ft-qr-item img{width:160px}