:root{--ink:#e8eef1;--mut:#9fb3bb;--acc:#3ec1d3;--bg:#0b1215;--pane:rgba(12,20,24,.82);--line:rgba(255,255,255,.14);--err:#ff8a73}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--acc)}
.ar-page .ar-doc{max-width:36em;margin:0 auto;padding:24px 16px 40px}
.ar-page h1{font-size:24px;margin:0 0 12px}.ar-page h2{font-size:17px;margin:24px 0 8px}
.ar-page ul{padding-left:20px}.ar-page li{margin:6px 0}
.ar-codeform{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:16px 0}.ar-codeform label{display:flex;flex-direction:column;gap:4px;flex:1;min-width:220px;color:var(--mut)}
.ar-codeform input{font:inherit;padding:10px;border-radius:8px;border:1px solid var(--line);background:#121d22;color:var(--ink)}
.ar-codeform button,.ar-btn{font:inherit;padding:10px 14px;min-height:44px;border-radius:9px;border:1px solid var(--line);background:#16242a;color:var(--ink);cursor:pointer}
.ar-btn.on{background:var(--acc);color:#06262b;border-color:transparent;font-weight:600}.ar-primary{background:var(--acc);color:#06262b;font-weight:600;border-color:transparent}
.ar-err{color:var(--err)}
.ar-foot{color:var(--mut);font-size:12px;text-align:center;padding:12px}
.ar-body{overflow:hidden;position:fixed;inset:0;touch-action:none}
#ar-video,#ar-canvas{position:fixed;inset:0;width:100%;height:100%}
#ar-video{object-fit:cover;z-index:0}#ar-video[hidden]{display:none}
#ar-canvas{z-index:1;display:block;touch-action:none}
.ar-overlay{position:fixed;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.ar-overlay>*{pointer-events:auto}
.ar-top-block{display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.ar-top-block>*{pointer-events:auto}
.ar-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;width:100%}
.ar-title{background:var(--pane);border:1px solid var(--line);border-radius:10px;padding:8px 12px;max-width:70%;display:flex;flex-direction:column;gap:2px}
.ar-title span{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-badge{background:var(--pane);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;color:var(--acc);text-transform:uppercase;letter-spacing:.6px}
.ar-hint{background:var(--pane);border:1px solid var(--line);border-radius:10px;padding:8px 12px;max-width:min(92vw,520px);text-align:center;pointer-events:none;font-size:13px}
.ar-hint.err{color:var(--err)}.ar-hint[hidden]{display:none}
.ar-reticle{position:fixed;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:2px solid var(--acc);border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.35);pointer-events:none}
.ar-reticle[hidden]{display:none}
.ar-start{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--pane);border:1px solid var(--line);border-radius:14px;padding:18px;width:min(92vw,420px);display:flex;flex-direction:column;gap:10px;text-align:center}
.ar-start[hidden]{display:none}
.ar-bottom{display:flex;flex-direction:column;gap:6px}
.ar-bottom[hidden]{display:none}
.ar-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--pane);border:1px solid var(--line);border-radius:12px;padding:8px}
.ar-row .ar-btn{padding:8px 11px;min-height:40px;font-size:13px}
.ar-scale,.ar-panels{display:inline-flex;gap:4px}
.ar-sel{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}.ar-sel[hidden]{display:none}
.ar-sel select,.ar-sel input[type=range]{font:inherit;min-height:40px;background:#16242a;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.ar-sel input[type=range]{width:110px;padding:0;accent-color:var(--acc)}
.ar-read{background:var(--pane);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px;min-height:20px;color:var(--ink)}
.ar-read:empty{display:none}
.ar-read b{color:var(--acc)}
@media (max-width:600px){.ar-title{max-width:62%}.ar-row .ar-btn{padding:8px 9px}}