/* Geist + Geist Mono, self-hosted (SIL Open Font License, see fonts/OFL.txt) */
@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --wall:#000000; --panel:#08080A; --raise:#111114; --raise2:#18181C; --ink:#EDEDEF; --muted:#7D7D86; --dim:#4A4A52;
  --line:#222227; --line2:#2E2E35; --accent:#FFFFFF; --accent-ink:#000000; --signal:#5CE1E6;
  --body:"Geist", "Inter", "Segoe UI", system-ui, sans-serif;
  --display:"Geist", "Inter", system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* the studio is intentionally dark in every theme */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --wall:#000000; } }
:root[data-theme="dark"], :root[data-theme="light"]{ --wall:#000000; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0; min-height:100%; background:#000; color:var(--ink); font:14px/1.45 var(--body); -webkit-font-smoothing:antialiased}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:1px solid var(--signal); outline-offset:2px}
::selection{background:var(--signal); color:#000}
aside::-webkit-scrollbar,.ease-list::-webkit-scrollbar{width:8px}
aside::-webkit-scrollbar-thumb,.ease-list::-webkit-scrollbar-thumb{background:var(--line2); border-radius:4px; border:2px solid var(--panel)}

header{display:flex; align-items:center; gap:14px; height:56px; padding:0 18px; border-bottom:1px solid var(--line); background:#000}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; letter-spacing:-.01em; margin:0}
.brand svg{flex:none}
.brand em{font-style:normal; font-weight:400; color:var(--muted)}
.brand span{font-family:var(--mono); font-weight:400; font-size:11px; color:var(--muted); border:1px solid var(--line2); border-radius:4px; padding:1px 6px}
header .spacer{flex:1}
.readout{display:flex; gap:6px; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.readout b{font-weight:400; border:1px solid var(--line); border-radius:4px; padding:3px 8px; background:var(--panel)}
.readout b i{font-style:normal; color:var(--ink)}
.live{display:inline-flex; align-items:center; gap:6px}
.live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal)}
.btn{border:1px solid var(--line2); background:var(--raise); border-radius:6px; padding:8px 14px; cursor:pointer; font-weight:500}
.btn:hover{border-color:var(--dim)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; padding:8px 16px; box-shadow:0 0 0 1px #fff, 0 0 24px rgba(255,255,255,.18)}
.btn.primary:hover{box-shadow:0 0 0 1px #fff, 0 0 32px rgba(255,255,255,.3)}
.btn:disabled{opacity:.45; cursor:not-allowed}

.app{display:grid; grid-template-columns:300px minmax(0,1fr) 320px; height:calc(100vh - 56px); min-height:560px}
aside{background:var(--panel); overflow-y:auto; padding:16px}
aside.left{border-right:1px solid var(--line)}
aside.right{border-left:1px solid var(--line)}
h2{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.02em; color:var(--muted); margin:0 0 12px}
h2::after{content:""; flex:1; height:1px; background:var(--line)}
section+section{margin-top:26px}
.hint{color:var(--muted); font-size:12.5px; margin:0 0 10px}

.cats{margin-bottom:12px}
.cats button{flex:0 0 auto; padding:4px 9px; font-size:12px}
.cats .cnt{font-family:var(--mono); font-size:10px; opacity:.55; margin-left:2px}
.cat-h{display:none}
#tpls.all .cat-h{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-weight:500; font-size:11px; color:var(--muted); margin:18px 0 8px}
#tpls.all .cat-h::after{content:""; flex:1; height:1px; background:var(--line)}
#tpls.all .cat-group:first-child .cat-h{margin-top:2px}
.cat-h:first-child{margin-top:0}
.tpls{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.tpl{border:1px solid var(--line); border-radius:6px; background:var(--raise); padding:3px; cursor:pointer; text-align:left; transition:border-color .15s}
.tpl:hover{border-color:var(--dim)}
.tpl canvas{display:block; width:100%; aspect-ratio:4/5; border-radius:4px; background:#000}
.tpl b{display:block; font-weight:500; font-size:12.5px; margin:6px 4px 3px; color:var(--muted)}
.tpl small{display:none}
.tpl[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink), 0 0 18px rgba(255,255,255,.08)}
.tpl[aria-pressed="true"] b{color:var(--ink)}
.tpl-lock{position:relative; display:flex; aspect-ratio:4/5; border-radius:4px; overflow:hidden; color:var(--muted);
  background:repeating-linear-gradient(135deg, #0B0B0E 0 8px, #0E0E12 8px 16px)}
.tpl-lock video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(3px) saturate(.9); transform:scale(1.06); opacity:.7}
.tpl-badge{position:relative; margin:auto; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 12px; border-radius:6px; color:var(--ink); background:rgba(0,0,0,.45)}
.tpl-lock em{font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; border:1px solid var(--line2); border-radius:3px; padding:1px 6px}
.tpl.locked b{color:var(--dim)}
.tpl.locked:hover .tpl-lock video{opacity:.9}
.tpl.locked:hover b{color:var(--muted)}

.drop{border:1px dashed var(--line2); border-radius:8px; padding:16px; text-align:center; cursor:pointer; background:var(--raise); transition:border-color .15s, background .15s}
.drop:hover{border-color:var(--dim)}
.drop.over{border-color:var(--signal); background:rgba(92,225,230,.06)}
.drop strong{display:block; font-weight:500}
.drop span{color:var(--muted); font-size:12px}

.thumb{position:relative; border-radius:4px; overflow:hidden; cursor:grab; background:var(--line); border:1px solid var(--line)}
.thumb canvas{display:block; width:100%; aspect-ratio:1}
.thumb button{position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:3px; border:0; background:rgba(0,0,0,.75); color:#fff; font-size:13px; line-height:18px; padding:0; cursor:pointer}
.thumb.dragging{opacity:.4}
.row{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px}
.linkbtn{background:none; border:0; padding:0; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line2); cursor:pointer; font-size:12px}
.linkbtn:hover{color:var(--ink)}

.stage{display:flex; flex-direction:column; min-width:0; min-height:0; background:#000 radial-gradient(circle, #1b1b20 1px, transparent 1.2px) 0 0/22px 22px}
.canvas-wrap{flex:1; display:grid; place-items:center; padding:24px; min-height:0}
.frame{position:relative; line-height:0}
.frame::before,.frame::after{content:""; position:absolute; inset:-10px; pointer-events:none;
  background:
    linear-gradient(var(--dim),var(--dim)) 0 0/10px 1px, linear-gradient(var(--dim),var(--dim)) 0 0/1px 10px,
    linear-gradient(var(--dim),var(--dim)) 100% 0/10px 1px, linear-gradient(var(--dim),var(--dim)) 100% 0/1px 10px,
    linear-gradient(var(--dim),var(--dim)) 0 100%/10px 1px, linear-gradient(var(--dim),var(--dim)) 0 100%/1px 10px,
    linear-gradient(var(--dim),var(--dim)) 100% 100%/10px 1px, linear-gradient(var(--dim),var(--dim)) 100% 100%/1px 10px;
  background-repeat:no-repeat}
.frame::after{display:none}
#view{display:block; outline:1px solid var(--line2); box-shadow:0 30px 80px rgba(0,0,0,.8)}
.transport{display:flex; align-items:center; gap:12px; padding:10px 20px 14px; border-top:1px solid var(--line); background:rgba(0,0,0,.7); backdrop-filter:blur(6px)}
.transport input{flex:1}
.transport output{font-family:var(--mono); font-size:12px; color:var(--muted); min-width:96px; text-align:right}
.play{width:32px; height:32px; border-radius:6px; border:1px solid var(--line2); background:var(--raise); cursor:pointer; display:grid; place-items:center; padding:0}
.play:hover{border-color:var(--dim)}

.ctl{margin-top:12px}
.ctl label{display:flex; justify-content:space-between; font-size:12.5px; color:#C9C9CF; margin-bottom:5px}
.ctl label output{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:16px; background:transparent; cursor:pointer; --p:50%}
input[type=range]::-webkit-slider-runnable-track{height:2px; border-radius:1px; background:linear-gradient(var(--ink),var(--ink)) 0 0/var(--p) 100% no-repeat, var(--line2)}
input[type=range]::-moz-range-track{height:2px; background:var(--line2)}
input[type=range]::-moz-range-progress{height:2px; background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; margin-top:-5px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 3px #000, 0 0 0 4px var(--line2)}
input[type=range]::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 3px #000}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #000, 0 0 0 4px var(--signal)}
.seg{display:flex; flex-wrap:wrap; gap:4px}
.seg button{flex:1 1 auto; border:1px solid var(--line); background:var(--raise); border-radius:5px; padding:6px 8px; cursor:pointer; font-size:12.5px; line-height:1.2; color:#C9C9CF}
.seg button:hover{border-color:var(--dim)}
.seg button small{display:block; color:var(--muted); font-size:10.5px; font-family:var(--mono)}
.seg button[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:#000}
.seg button[aria-pressed="true"] small{color:#000; opacity:.6}
input[type=text]{width:100%; border:1px solid var(--line); background:var(--raise); border-radius:5px; padding:8px 10px}
input[type=text]:focus{border-color:var(--dim); outline:none}
.swatches{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.sw{width:24px; height:24px; border-radius:4px; border:1px solid var(--line2); cursor:pointer; padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px #000, 0 0 0 3px var(--ink)}
/* custom color: a rainbow swatch that turns into the chosen color, with a label */
.sw-pick{position:relative; display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 9px 0 4px; border:1px solid var(--line2); border-radius:4px; background:var(--raise); color:var(--muted); font-size:12px; cursor:pointer}
.sw-pick:hover{color:var(--ink); border-color:var(--muted)}
.sw-pick input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0}
.sw-pick i{width:18px; height:18px; border-radius:3px; background:conic-gradient(#f43, #fc3, #3d6, #3cf, #64f, #f3c, #f43); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.sw-pick[aria-pressed="true"]{color:var(--ink); box-shadow:0 0 0 2px #000, 0 0 0 3px var(--ink)}
.sw-pick[aria-pressed="true"] i{background:var(--c)}
.sw-pick:focus-within{outline:1px solid var(--signal); outline-offset:2px}
.check{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#C9C9CF; margin-top:12px; cursor:pointer}
.check input{accent-color:#fff; width:14px; height:14px}
[hidden]{display:none !important}
.ease-box{background:#000; border:1px solid var(--line); border-radius:8px; padding:4px; touch-action:none}
#easeSvg{display:block; width:100%; height:auto; cursor:crosshair; user-select:none}
#easeSvg .h{cursor:grab; fill:#000; stroke:#fff; stroke-width:1.6}
#easeSvg .h:hover,#easeSvg .h.active{fill:#fff}
.ease-nums{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:8px 0}
.ease-nums input{width:100%; text-align:center; border:1px solid var(--line); background:var(--raise); border-radius:5px; padding:6px 2px; font-family:var(--mono); font-size:12px}
.ease-tabs{margin-bottom:6px}
.ease-list{max-height:210px; overflow-y:auto; display:flex; flex-direction:column; gap:1px}
.ease-item{display:flex; align-items:center; justify-content:space-between; gap:8px; border:0; background:none; border-radius:5px; padding:6px 10px; cursor:pointer; text-align:left; font-size:13px; color:#C9C9CF}
.ease-item:hover{background:var(--raise)}
.ease-item[aria-pressed="true"]{background:var(--raise2); color:#fff; box-shadow:inset 2px 0 0 var(--ink)}
.ease-item svg{flex:none; color:var(--muted)}
.ease-item[aria-pressed="true"] svg{color:#fff}
.ease-item .del{margin-left:auto; opacity:.6; font-size:15px; padding:0 4px}
.status{margin:8px 0 0; color:var(--signal); font-family:var(--mono); font-size:11.5px}
.status.err{color:#FF8A7A}
.badge{position:absolute; left:2px; bottom:2px; background:rgba(0,0,0,.8); color:var(--signal); font-family:var(--mono); font-size:9px; border-radius:3px; padding:0 4px}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); display:grid; place-items:center; z-index:10; padding:20px}
.dialog{background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:22px; width:min(380px,100%); box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dialog h3{margin:0 0 6px; font-size:17px; font-weight:600}
.dialog p{margin:0 0 14px; color:var(--muted); font-size:13px; font-family:var(--mono)}
.bar{height:2px; background:var(--line2); overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--signal); box-shadow:0 0 10px var(--signal); transition:width .15s}
.dialog .row{margin-top:16px; justify-content:flex-end}

.tabs{display:flex; border:1px solid var(--line2); border-radius:7px; padding:2px; background:var(--panel)}
.tabs button{border:0; background:none; color:var(--muted); padding:5px 12px; border-radius:5px; cursor:pointer; font-size:13px}
.tabs button[aria-pressed="true"]{background:var(--raise2); color:var(--ink)}
.tabs span{font-family:var(--mono); font-size:10.5px; margin-left:4px; padding:0 5px; border-radius:3px; background:var(--line2); color:var(--ink)}
.btn.wide{width:100%}
.btn.danger:hover{border-color:#FF8A7A; color:#FF8A7A}
.btn-row{display:flex; gap:6px; margin-top:14px; flex-wrap:wrap}
.btn-row .btn{flex:1; padding:7px 8px; font-size:12.5px}
.clip-name{margin:0; font-weight:600}
.app.comp{grid-template-columns:minmax(0,1fr) 320px}
.app.comp aside.left{display:none}
.app.comp .transport{display:none}
.timeline{border-top:1px solid var(--line); background:rgba(0,0,0,.75); padding:10px 16px 14px}
.tl-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.tl-head output{font-family:var(--mono); font-size:12px; color:var(--muted)}
.tl-track{position:relative; height:112px; border:1px solid var(--line); border-radius:6px; background:#050506; overflow:hidden; cursor:pointer; user-select:none; touch-action:none}
.tl-ruler{position:absolute; left:0; right:0; top:0; height:16px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:9.5px; color:var(--dim)}
.tl-ruler i{position:absolute; top:0; height:100%; border-left:1px solid var(--line); padding-left:3px; font-style:normal; line-height:16px}
.tl-clips{position:absolute; left:0; right:0; top:20px; bottom:6px}
.tl-clip{position:absolute; top:0; bottom:0; border:1px solid var(--line2); border-radius:5px; background:var(--raise); overflow:hidden; cursor:grab; display:flex; align-items:stretch}
.tl-clip.sel{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.tl-clip.dragging{opacity:.85; z-index:5; cursor:grabbing; box-shadow:0 8px 24px rgba(0,0,0,.6)}
.tl-clip canvas{height:100%; width:auto; flex:none; background:#000}
.tl-clip .lbl{padding:6px 8px; min-width:0; display:flex; flex-direction:column; justify-content:space-between}
.tl-clip .lbl b{font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-clip .lbl small{font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.tl-clip .hd{position:absolute; top:0; bottom:0; width:9px; cursor:ew-resize; background:rgba(255,255,255,.08); z-index:2}
.tl-clip .hd::after{content:""; position:absolute; top:50%; left:3px; width:3px; height:22px; margin-top:-11px; border-radius:2px; background:var(--muted)}
.tl-clip .hd.l{left:0} .tl-clip .hd.r{right:0}
.tl-clip .hd:hover{background:rgba(255,255,255,.18)}
.playhead{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--signal); box-shadow:0 0 8px var(--signal); pointer-events:none; z-index:6}
.tl-empty{position:absolute; inset:16px 0 0; display:grid; place-items:center; margin:0; color:var(--muted); font-size:13px; text-align:center; padding:0 20px}
.asset-head{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--muted)}
.asset-head span i{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--signal); margin-right:5px; vertical-align:1px}
.assets{display:flex; flex-direction:column; gap:4px; margin-top:4px; padding:4px 2px; max-height:calc(6 * 40px + 5 * 4px + 8px); overflow-x:hidden; overflow-y:auto}
.asset{position:relative; flex:none; height:40px; display:grid; grid-template-columns:auto auto 32px minmax(0,1fr) auto auto; align-items:center; gap:7px; padding:3px 6px 3px 4px; border-radius:6px; border:1px solid var(--line); background:var(--raise)}
.asset[draggable="true"]{cursor:default}
.grip{display:grid; place-items:center; width:16px; height:28px; margin-left:-2px; color:var(--dim); cursor:grab; border-radius:3px}
.grip:hover{color:var(--ink); background:var(--raise2)}
.grip:active{cursor:grabbing}
.asset.drop-before::before,.asset.drop-after::after{content:""; position:absolute; left:4px; right:4px; height:2px; background:var(--signal); box-shadow:0 0 6px var(--signal); border-radius:1px}
.asset.drop-before::before{top:-3px} .asset.drop-after::after{bottom:-3px}
.asset.solo-row .grip{visibility:hidden; pointer-events:none}
.asset canvas{display:block; width:32px; height:32px; border-radius:3px; background:#000}
.asset .meta{min-width:0}
.asset b{display:block; font-size:12.5px; line-height:16px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.asset small{display:block; font-family:var(--mono); font-size:10.5px; line-height:14px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.asset .dot{width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 6px var(--signal)}
.asset.idle > :not(.switch):not(.grip){opacity:.25} .asset.idle .dot{background:transparent; box-shadow:inset 0 0 0 1px var(--dim)}
.asset.off > :not(.switch):not(.grip){opacity:.25} .asset.off .dot{background:transparent; box-shadow:inset 0 0 0 1px var(--dim)}
.asset .ic{background:none; border:0; color:var(--muted); cursor:pointer; padding:2px 4px; font-size:12px; border-radius:4px; font-family:var(--mono)}
.asset .ic:hover{color:var(--ink); background:var(--raise2)}
.asset .ic.del:hover{color:#FF8A7A}
.asset .ic:disabled{opacity:.25; cursor:not-allowed}
.asset .ic:disabled:hover{color:var(--muted); background:none}
.asset .ic svg{display:block}
.switch{-webkit-appearance:none; appearance:none; width:28px; height:16px; margin:0; border-radius:8px; background:var(--line2); position:relative; cursor:pointer; flex:none}
.switch::after{content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--muted)}
.switch:checked{background:var(--ink)}
.switch:checked::after{transform:translateX(12px); background:#000}
.switch:focus-visible{outline:1px solid var(--signal); outline-offset:2px}
.asset.off .switch{opacity:1}
.asset.dragging{opacity:.3}
@media (max-width: 1100px){ .readout{display:none} }
@media (max-width: 980px){
  .app{grid-template-columns:1fr; height:auto}
  .stage{order:-1; height:min(78vh,760px)}
  aside.left,aside.right{border:0; border-top:1px solid var(--line)}
  .tpls{grid-template-columns:repeat(5,1fr)}
}
@media (max-width: 560px){
  .tpls{grid-template-columns:repeat(3,1fr)}
  header{padding:0 12px}
  .brand span,.brand em{display:none}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* ---------- accounts (parts/auth.php, auth.js) ---------- */
.account{display:flex; align-items:center; gap:8px; position:relative; padding-left:14px; margin-left:4px; border-left:1px solid var(--line)}
.account:empty{display:none}
.btn.ghost{background:none; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{color:var(--ink); border-color:var(--line2)}
.avatar{width:32px; height:32px; border-radius:50%; border:1px solid var(--line2); background:var(--raise2); color:var(--ink); font-weight:600; cursor:pointer}
.avatar:hover, .avatar[aria-expanded="true"]{border-color:var(--muted)}
.account-menu{position:absolute; right:0; top:calc(100% + 10px); min-width:220px; background:var(--panel); border:1px solid var(--line2); border-radius:8px; padding:6px; box-shadow:0 20px 50px rgba(0,0,0,.6); z-index:20}
.account-menu p{margin:0; padding:8px 10px 10px; font-family:var(--mono); font-size:11.5px; color:var(--muted); border-bottom:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.account-menu button{display:block; width:100%; text-align:left; background:none; border:0; border-radius:5px; padding:8px 10px; margin-top:4px; color:var(--ink); cursor:pointer}
.account-menu button:hover{background:var(--raise2)}

.auth-dialog{position:relative; width:min(400px,100%); padding:28px}
.auth-dialog h3{font-size:20px; letter-spacing:-.01em; margin:0 0 6px}
.auth-dialog > [data-view] > p{font-family:var(--body); font-size:13px; margin:0 0 20px}
.auth-dialog p b{color:var(--ink); font-weight:500}
.auth-close{position:absolute; top:14px; right:14px; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:6px; background:none; color:var(--muted); cursor:pointer}
.auth-close:hover{background:var(--raise2); color:var(--ink)}
.field{display:block; margin:0 0 14px}
.field > span:first-child{display:block; font-size:12.5px; color:#C9C9CF; margin-bottom:6px}
.field small{display:block; margin-top:6px; font-size:11.5px; color:var(--muted)}
.field input{width:100%; border:1px solid var(--line); background:var(--raise); border-radius:6px; padding:10px 12px; font-size:14px}
.field input:focus{border-color:var(--dim); outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.pw{position:relative; display:block}
.pw input{padding-right:64px}
.pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--muted); font-family:var(--mono); font-size:11px; padding:4px 8px; border-radius:4px; cursor:pointer}
.pw-toggle:hover{color:var(--ink); background:var(--raise2)}
.auth-aside{display:block; margin:-4px 0 18px auto}
.auth-dialog .btn.primary.wide{padding:11px 16px; margin-top:4px}
.auth-dialog .btn.wide:not(.primary){padding:10px 16px}
.auth-error{margin:0 0 14px !important; padding:9px 12px; border:1px solid rgba(255,138,122,.35); background:rgba(255,138,122,.08); border-radius:6px; color:#FFB4A9 !important; font-family:var(--body) !important; font-size:12.5px !important}
.auth-switch{margin:18px 0 0 !important; text-align:center; font-family:var(--body) !important; font-size:12.5px !important}
.auth-switch .linkbtn{font-size:12.5px; color:var(--ink)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
form.busy .btn.primary{opacity:.6; cursor:progress}
@media (max-width:760px){ .account{padding-left:8px} .account .btn.ghost{display:none} }