:root{color-scheme:dark;font-family:Inter,Noto Sans SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#151817;color:#f6f0e2;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--panel: rgba(28, 31, 29, .9);--panel-soft: rgba(245, 222, 163, .08);--line: rgba(246, 240, 226, .18);--text-muted: #c8c0aa;--gold: #f2c96b;--gold-strong: #ffdd82;--jade: #49c7a0;--ember: #ef785f;--shadow: 0 24px 80px rgba(0, 0, 0, .42)}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:linear-gradient(#15181724,#151817eb),url(/assets/role-preview.png) center 18% / cover fixed}button,input{font:inherit}button{border:0}.shell{width:min(1180px,calc(100% - 40px));min-height:100vh;margin:0 auto;padding:48px 0 36px}.hero{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:28px;align-items:center;min-height:calc(100vh - 210px)}.visual-stage{position:relative;display:grid;align-items:end;justify-items:center;min-height:560px;overflow:hidden;border:1px solid rgba(242,201,107,.2);border-radius:8px;background:radial-gradient(circle at 50% 20%,rgba(73,199,160,.24),transparent 34%),#0c0f0e70;box-shadow:var(--shadow)}.visual-stage:after{position:absolute;inset:auto 0 0;height:36%;content:"";background:linear-gradient(transparent,#0e1110e0)}.role-art{width:min(100%,700px);height:100%;max-height:700px;object-fit:cover;object-position:center top}.unlock-badge{position:absolute;left:20px;bottom:20px;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:10px 14px;border:1px solid rgba(242,201,107,.34);border-radius:999px;background:#141716b8;color:var(--gold-strong);font-weight:700;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.unlock-badge svg,button svg,.faq-item>svg{width:20px;height:20px;flex:0 0 auto}.exchange-panel{display:grid;gap:18px;padding:28px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.panel-heading{display:grid;gap:10px}.eyebrow{margin:0;color:var(--jade);font-size:.85rem;font-weight:800}h1,h2,p{margin:0}h1{max-width:9em;color:#fff9e9;font-size:2.25rem;line-height:1.12}.lede,.hint,.resource-item p,.status{color:var(--text-muted);line-height:1.7}.field-label,.result-label{color:#fff4d7;font-size:.95rem;font-weight:700}.field-row{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:10px}input{width:100%;min-height:52px;padding:0 14px;border:1px solid rgba(246,240,226,.2);border-radius:6px;outline:none;background:#ffffff14;color:#fff}input:focus{border-color:#49c7a0db;box-shadow:0 0 0 3px #49c7a029}input::placeholder{color:#f6f0e270}.icon-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:6px;color:#1c1710;font-weight:800;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}.icon-button{background:linear-gradient(135deg,var(--gold),#f09d60)}.icon-button:hover,.ghost-button:hover{transform:translateY(-1px)}.icon-button:disabled{cursor:wait;opacity:.7;transform:none}.ghost-button{width:100%;border:1px solid rgba(242,201,107,.44);background:#f2c96b1f;color:var(--gold-strong)}.result-panel{display:grid;gap:10px;padding:16px;border:1px solid rgba(73,199,160,.34);border-radius:8px;background:#49c7a01a}.code-output{display:block;min-height:44px;padding:10px 12px;border-radius:6px;background:#00000042;color:#fff;font-family:Cascadia Mono,SFMono-Regular,Consolas,monospace;font-size:1.25rem;font-weight:800;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.status{min-height:28px}.status[data-tone=success]{color:#8ee5c7}.status[data-tone=error]{color:#ff9a86}.resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}.resource-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;min-height:132px;padding:18px;border:1px solid var(--line);border-radius:8px;background:#1c1f1db8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.resource-item h2{margin-bottom:6px;color:#fff7df;font-size:1rem}.qr-pattern{width:96px;aspect-ratio:1;border:8px solid #f6f0e2;border-radius:4px;background:linear-gradient(90deg,#101312 12px,transparent 12px 24px,#101312 24px 36px,transparent 36px 48px,#101312 48px 60px,transparent 60px),linear-gradient(#101312 12px,transparent 12px 24px,#101312 24px 36px,transparent 36px 48px,#101312 48px 60px,transparent 60px),#f6f0e2;background-size:60px 60px}.qr-pattern-alt{filter:hue-rotate(88deg)}.faq-item{grid-template-columns:42px minmax(0,1fr)}.faq-item>svg{color:var(--ember)}@media(max-width:920px){.shell{width:min(100% - 28px,720px);padding-top:24px}.hero{grid-template-columns:1fr;min-height:auto}.visual-stage{min-height:360px}.role-art{max-height:460px}.resources{grid-template-columns:1fr}}@media(max-width:560px){body{background-attachment:scroll}.shell{width:min(100% - 20px,460px);padding-top:14px}.visual-stage{min-height:280px}.unlock-badge{left:12px;bottom:12px}.exchange-panel{padding:20px}h1{font-size:1.75rem}.field-row{grid-template-columns:1fr}.resource-item{grid-template-columns:84px minmax(0,1fr);padding:14px}.qr-pattern{width:84px}}