.webapp-section{padding:48px max(6vw,24px);background:var(--king-grill);border-block:1px solid #fff3d618;scroll-margin-top:95px}
.webapp-inner{max-width:1300px;margin:auto;display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:26px}
.webapp-icon{width:80px;height:80px;border-radius:20px;background:#080808;padding:8px;border:1px solid #fff3d62b}
.webapp-copy .eyebrow{font-size:11px;color:var(--king-yellow);margin-bottom:9px;letter-spacing:.12em}
.webapp-copy h2{font-size:32px;line-height:1.15;margin-bottom:10px}
.webapp-copy>p:last-child{font-size:16px;line-height:1.5;max-width:53ch;color:#d5cbb8}
.webapp-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:15px 23px;border:1px solid var(--king-yellow);border-radius:6px;color:var(--king-yellow);background:transparent;font:600 17px/1.2 var(--font-label);white-space:nowrap;transition:background .2s,color .2s,transform .16s}
.webapp-button svg,.webapp-close svg{width:22px;height:22px;flex:none;stroke-width:1.8}
.webapp-button:active,.webapp-done:active{transform:scale(.97)}.webapp-button:disabled{opacity:.65}.webapp-section[hidden]{display:none}
.webapp-dialog{width:min(500px,calc(100vw - 28px));max-height:calc(100dvh - 36px);padding:38px 32px 30px;border:1px solid #fff3d633;border-radius:16px;background:#181511;color:var(--king-cream);overflow:auto;box-shadow:0 24px 90px #0009}
.webapp-dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.webapp-close{position:absolute;right:14px;top:14px;background:none;border:1px solid #fff3d62c;border-radius:50%;width:44px;height:44px;display:grid;place-items:center}
.webapp-guide-icon{width:64px;height:64px;padding:7px;border-radius:16px;background:#080808;margin-bottom:24px}
.webapp-dialog h2{font-size:32px;line-height:1.16;margin-right:20px}.webapp-dialog>p{font-size:16px;color:#c8c0b3;line-height:1.5;margin-top:15px}.webapp-dialog ol{margin:25px 0;padding-left:23px;font-size:17px;line-height:1.5}.webapp-dialog li{padding:0 0 14px 7px}.webapp-dialog li::marker{color:var(--king-yellow);font-weight:600}.webapp-dialog li:last-child{padding-bottom:0}
.webapp-done{width:100%;min-height:52px;border-radius:6px;background:var(--king-yellow);color:#080808;font:600 18px var(--font-label);transition:transform .16s}
@media(hover:hover) and (pointer:fine){.webapp-button:hover{background:var(--king-yellow);color:#080808}.webapp-close:hover{background:#fff3d611}}
@media(max-width:900px){.webapp-inner{grid-template-columns:72px 1fr;gap:22px}.webapp-icon{width:72px;height:72px;border-radius:18px}.webapp-button{grid-column:2;justify-self:start;margin-top:2px}}
@media(max-width:540px){.webapp-section{padding:34px 24px}.webapp-inner{grid-template-columns:64px 1fr;gap:20px 18px}.webapp-icon{width:64px;height:64px;border-radius:16px;padding:6px}.webapp-copy h2{font-size:26px;line-height:1.2}.webapp-copy>p:last-child{font-size:15px}.webapp-copy .eyebrow{margin-bottom:8px}.webapp-button{grid-column:1/-1;width:100%;min-height:54px}.webapp-dialog{padding:30px 24px 24px}.webapp-dialog h2{font-size:28px}.webapp-dialog ol{font-size:16px}}
@media(prefers-reduced-motion:no-preference){.webapp-dialog[open]{animation:webapp-enter .22s cubic-bezier(.23,1,.32,1)}@keyframes webapp-enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}}
.motion-paused .webapp-dialog{animation:none}