/* Layout: "현장 점검 태그". 검정 헤더 + 안전 사선 띠, 본문은 한 열(폰) → 태그 걸이·점검 기록지 두 열(PC).
   상태 = 안전보건표지(금지/경고/안내/지시), 카드 = 점검 꼬리표, 관리율 = 압력계. */
:root{
  --paper:#F1F2EF; --surface:#FFFFFF; --sunk:#E7E9E6; --line:#D9DCD8;
  --fg:#18222E; --fg-2:#4B5663; --fg-3:#7C8696;
  --bar:#18222E; --bar-fg:#FFFFFF; --bar-fg-2:#9AA3AF; --edge:#18222E;
  --yellow:#F5C400; --yellow-ink:#18222E; --yellow-soft:#FFF4C2;
  --red:#D7262F; --red-soft:#FCE6E6; --green:#00915A; --green-soft:#DDF2E8; --blue:#0067B1; --blue-soft:#E0EEF8;
  --tile:#FFFFFF;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F141A; --surface:#17202A; --sunk:#1F2934; --line:#2C3844;
  --fg:#E9EDF1; --fg-2:#B3BDC8; --fg-3:#7F8B97;
  --bar:#0A0E12; --bar-fg:#FFFFFF; --bar-fg-2:#8B95A1; --edge:#000000;
  --yellow-soft:#3A3214; --red-soft:#3A1C1E; --green-soft:#13301F; --blue-soft:#132A3D; --tile:#F1F2EF; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0F141A; --surface:#17202A; --sunk:#1F2934; --line:#2C3844;
  --fg:#E9EDF1; --fg-2:#B3BDC8; --fg-3:#7F8B97;
  --bar:#0A0E12; --bar-fg:#FFFFFF; --bar-fg-2:#8B95A1; --edge:#000000;
  --yellow-soft:#3A3214; --red-soft:#3A1C1E; --green-soft:#13301F; --blue-soft:#132A3D; --tile:#F1F2EF; color-scheme:dark}

*{box-sizing:border-box}
html{background:var(--paper)}
body{background:var(--paper);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
svg{display:block}

/* 헤더 + 안전 띠 */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bar);color:var(--bar-fg)}
.top-in{max-width:1248px;margin:0 auto;padding-inline:16px;display:flex;align-items:center;gap:28px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.tabs{display:flex;gap:24px;align-self:stretch}
.tab{border:0;background:none;color:var(--bar-fg-2);font-weight:500;font-size:14px;padding:0;border-bottom:3px solid transparent;display:flex;align-items:center;gap:8px}
.tab svg{display:none}
.tab[aria-selected="true"]{color:var(--yellow);font-weight:700;border-bottom-color:var(--yellow)}
.site{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--bar-fg-2);flex-wrap:wrap;justify-content:flex-end}
.site b{color:var(--bar-fg);font-size:13px;font-weight:600}
.chip-sample{font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--yellow);border:1px solid var(--yellow);border-radius:3px;padding:0 6px}
.theme{border:1px solid #3A4654;background:none;color:var(--bar-fg);border-radius:999px;padding:3px 10px;font-size:12px}
.stripe{height:8px;background:repeating-linear-gradient(-45deg,#18222E 0 6px,#F5C400 6px 14px)}

main{max-width:1248px;margin:0 auto;padding-inline:16px;padding-block:32px 72px}
.view{display:flex;flex-direction:column;gap:32px}
.eyebrow{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--fg-3)}

/* 히어로 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:stretch}
.brief{display:flex;flex-direction:column;gap:20px;min-width:0}
.headline h1{margin:6px 0 6px;font-size:40px;line-height:1.2;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.headline p{margin:0;font-size:17px;color:var(--fg-2)}
.counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.counter{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-align:left}
.counter .tile{width:52px;height:52px;border-radius:10px;display:grid;place-items:center;flex:none}
.counter .n{font-family:var(--f-mono);font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.03em}
.counter .l{font-size:13px;font-weight:500;color:var(--fg-2)}
.counter .pre{font-style:normal}
.gauge-card{background:var(--bar);color:var(--bar-fg);border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.dial{background:#FFFFFF;border-radius:8px;padding:6px 10px;width:100%;max-width:240px}
.reading{display:flex;align-items:baseline;gap:8px}
.reading b{font-family:var(--f-mono);font-size:34px;color:var(--yellow);letter-spacing:-.03em}
.reading span{font-size:13px;font-weight:500}
.gauge-card small{font-size:12px;color:var(--bar-fg-2)}

/* 태그 걸이 + 기록지 */
.split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
.rack{display:flex;flex-direction:column;gap:32px;min-width:0}
.group{display:flex;flex-direction:column;gap:10px}
.group-h{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:700}
.group-h .cnt{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--fg-3)}
.cat-ic{width:30px;height:30px;border-radius:7px;background:var(--tile);display:grid;place-items:center;border:1px solid var(--line)}

.tag{display:grid;grid-template-columns:88px 0 minmax(0,1fr) auto;align-items:stretch;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-align:left;overflow:hidden;box-shadow:0 2px 0 var(--line)}
.tag:hover{border-color:var(--fg-3)}
.tag[aria-current="true"]{border:2px solid var(--edge);box-shadow:4px 4px 0 var(--edge)}
.stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 4px 12px;color:#FFFFFF}
.stub .hole{width:10px;height:10px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .18);margin-bottom:2px}
.stub .d{font-family:var(--f-mono);font-weight:700;font-size:28px;line-height:1.1;letter-spacing:-.04em}
.stub .u{font-size:11px;font-weight:600}
.tag.over .stub{background:var(--red)} .tag.soon .stub{background:var(--yellow);color:var(--yellow-ink)} .tag.ok .stub{background:var(--green)} .tag.idle .stub{background:var(--blue)}
.tag.idle .stub .d{font-size:15px;font-family:var(--f-body)}
.perf{border-left:2px dashed var(--line)}
.tbody{display:flex;flex-direction:column;gap:5px;padding:13px 16px;min-width:0}
.codeline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.code{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.04em;border:1.2px solid var(--fg);border-radius:3px;padding:0 6px;line-height:16px}
.flag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;background:var(--yellow-soft);border-radius:3px;padding:0 6px;line-height:16px}
.ttl{font-size:16px;font-weight:600;line-height:1.4}
.meta{font-size:13px;color:var(--fg-3)}
.stamp{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:0 16px 0 4px;gap:2px}
.stamp span{font-size:11px;color:var(--fg-3)}
.stamp b{font-family:var(--f-mono);font-size:15px;letter-spacing:.04em}
.more{border:1.5px dashed var(--fg-3);background:none;border-radius:10px;padding:12px;font-weight:600;font-size:13px;color:var(--fg-2)}
.empty{padding:16px;border-radius:10px;background:var(--sunk);color:var(--fg-3);font-size:14px}

.sheet{background:var(--surface);border:2px solid var(--edge);border-radius:12px;box-shadow:6px 6px 0 var(--edge);overflow:hidden}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px)}
.sheet-h{display:flex;align-items:center;gap:12px;background:var(--bar);color:var(--bar-fg);padding:14px 20px}
.sheet-h .ic{width:44px;height:44px;border-radius:8px;background:#FFFFFF;display:grid;place-items:center;flex:none}
.sheet-h .k{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--yellow)}
.sheet-h .v{font-size:13px;font-weight:500}
.sheet-b{padding:22px 24px 24px;display:flex;flex-direction:column;gap:16px}
.sheet-b h2{margin:0;font-size:22px;line-height:1.35;letter-spacing:-.02em;text-wrap:balance}
.status-line{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;flex-wrap:wrap}
.status-line .date{font-family:var(--f-mono);font-weight:500;font-size:13px;color:var(--fg-3)}
.c-over{color:var(--red)} .c-soon{color:#A97F00} .c-ok{color:var(--green)} .c-idle{color:var(--blue)}
:root[data-theme="dark"] .c-soon{color:var(--yellow)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-soon{color:var(--yellow)}}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--yellow-soft);border-radius:8px;padding:12px 14px}
.note b{display:block;font-size:13px}
.note p{margin:2px 0 0;font-size:12px;color:var(--fg-2);line-height:1.5}
.desc{margin:0;font-size:14px;color:var(--fg-2)}
.lines{margin:0;display:flex;flex-direction:column}
.lines div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.lines dt{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--fg-3);padding-top:2px}
.lines dd{margin:0;font-size:14px;font-weight:500;min-width:0}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:2px solid var(--edge);border-radius:8px;background:var(--surface);padding:12px 18px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{flex:1;background:var(--yellow);color:var(--yellow-ink);box-shadow:3px 3px 0 var(--edge)}
.btn.primary:active{transform:translate(3px,3px);box-shadow:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.sheet .close{display:none}
.placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 24px;text-align:center;color:var(--fg-3);font-size:14px}


/* 예시 양식 뷰어: 종이는 두 테마 모두 흰 종이로 고정한다(실제 서류처럼 보이게) */
.formcard{display:flex;align-items:center;gap:12px;border:1.5px solid var(--edge);border-radius:10px;padding:12px 14px;background:var(--sunk);text-align:left;width:100%}
.formcard .ic{width:40px;height:40px;border-radius:8px;background:#FFFFFF;display:grid;place-items:center;flex:none;border:1px solid var(--line)}
.formcard .t{display:flex;flex-direction:column;min-width:0;flex:1}
.formcard .t b{font-size:14px;line-height:1.35}
.formcard .t span{font-size:12px;color:var(--fg-3)}
.formcard .go{font-weight:700;font-size:13px;white-space:nowrap}
.kind{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:3px;padding:1px 6px;white-space:nowrap}
.kind.draft{background:#F5C400;color:#18222E}.kind.official{background:#0067B1;color:#FFFFFF}.kind.issued{background:#00915A;color:#FFFFFF}
.docview{position:fixed;inset:0;z-index:50;background:rgb(10 14 18 / .62);overflow:auto;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.docview[hidden]{display:none!important}
.doc-tools{max-width:820px;margin:0 auto 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.doc-tools .sp{flex:1}
.doc-tools .btn{background:#FFFFFF;color:#18222E;border-color:#18222E}
.doc-tools .btn.primary{background:#F5C400;flex:none}
.doc-tools .btn{padding:9px 14px;font-size:14px}
.toast{color:#FFFFFF;font-size:13px}
.paper{max-width:820px;margin:0 auto;background:#FFFFFF;color:#18222E;border-radius:4px;box-shadow:0 20px 60px rgb(0 0 0 / .35);padding:40px 44px 32px;display:flex;flex-direction:column;gap:20px}
.paper .p-top{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:3px solid #18222E;padding-bottom:10px;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:#4B5663}
.paper h1{margin:0;font-size:26px;letter-spacing:-.02em;text-align:center}
.paper .p-meta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:12px;color:#4B5663}
.paper .p-meta b{color:#18222E;font-weight:600}
.banner-k{display:flex;gap:10px;align-items:flex-start;border-radius:6px;padding:12px 14px;font-size:13px;line-height:1.5}
.banner-k.draft{background:#FFF4C2}.banner-k.official{background:#E0EEF8}.banner-k.issued{background:#DDF2E8}
.banner-k b{display:block}
.p-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1.5px solid #18222E;border-left:1px solid #C9CDC8}
.p-fields div{display:grid;grid-template-columns:110px minmax(0,1fr);border-right:1px solid #C9CDC8;border-bottom:1px solid #C9CDC8}
.p-fields dt{background:#F1F2EF;font-size:12px;font-weight:600;padding:8px 10px;color:#4B5663}
.p-fields dd{margin:0;padding:8px 10px;font-size:13px;min-width:0}
.p-h{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.p-h::before{content:"";width:4px;height:14px;background:#F5C400;border:1px solid #18222E}
.p-tablewrap{overflow-x:auto;border-top:1.5px solid #18222E}
.p-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.p-table th{background:#F1F2EF;font-weight:600;color:#4B5663;text-align:left;padding:8px;border:1px solid #C9CDC8;white-space:nowrap}
.p-table td{padding:8px;border:1px solid #C9CDC8;vertical-align:top}
.p-table tr.blank td{height:30px}
.p-table td.ex{color:#18222E}
.p-checks{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;font-size:13px}
.p-checks li{display:flex;gap:8px;align-items:flex-start}
.p-checks li::before{content:"";flex:none;width:14px;height:14px;border:1.5px solid #18222E;border-radius:2px;margin-top:3px}
.p-official{display:grid;grid-template-columns:110px minmax(0,1fr);border:1px solid #C9CDC8;border-top:1.5px solid #18222E;font-size:13px}
.p-official dt{background:#F1F2EF;font-weight:600;color:#4B5663;padding:8px 10px;border-bottom:1px solid #C9CDC8}
.p-official dd{margin:0;padding:8px 10px;border-bottom:1px solid #C9CDC8}
.p-signs{display:flex;justify-content:flex-end;gap:0}
.p-signs div{width:96px;border:1px solid #18222E;margin-left:-1px;text-align:center;font-size:11px}
.p-signs span{display:block;background:#F1F2EF;border-bottom:1px solid #18222E;padding:3px 0;font-weight:600}
.p-signs i{display:block;height:44px}
.p-note{font-size:12.5px;color:#4B5663;margin:0}
.p-foot{border-top:1px dashed #C9CDC8;padding-top:10px;font-size:11px;color:#7C8696;display:flex;flex-direction:column;gap:2px}
.ex-mark{font-family:var(--f-mono);font-size:10px;font-weight:700;color:#A97F00;margin-left:4px}
@media (max-width:700px){.paper{padding:24px 18px}.p-fields{grid-template-columns:minmax(0,1fr)}.p-checks{grid-template-columns:minmax(0,1fr)}.paper h1{font-size:21px}}

/* 전체 의무 */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--fg-2)}
.chip[aria-pressed="true"]{background:var(--bar);color:var(--yellow);border-color:var(--bar)}
.sub{margin:0;font-size:13px;color:var(--fg-3)}

/* 대표 보고 */
.banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px 28px;overflow:hidden}
.banner h2{margin:6px 0;font-size:30px;letter-spacing:-.03em}
.banner p{margin:0;color:var(--fg-2)}
.laws{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.lawcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px}
.lawcard h3{margin:0;font-size:15px;display:flex;align-items:center;gap:10px}
.rate{font-family:var(--f-mono);font-weight:700;font-size:34px;letter-spacing:-.03em;line-height:1}
.rate small{font-family:var(--f-body);font-size:13px;color:var(--fg-3);font-weight:500;margin-left:6px;letter-spacing:0}
.meter{display:flex;height:12px;border:1.5px solid var(--edge);border-radius:3px;overflow:hidden;background:var(--sunk)}
.meter span{display:block;height:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--fg-2)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend b{font-family:var(--f-mono)}
.foot{font-size:12px;color:var(--fg-3);border-top:1px dashed var(--line);padding-top:14px}

/* 반응형 */
@media (max-width:1000px){.hero{grid-template-columns:minmax(0,1fr)}.gauge-card{flex-direction:row;flex-wrap:wrap;justify-content:space-between}.gauge-card .dial{max-width:200px}}
@media (max-width:899px){
  .split{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0;z-index:30;background:rgb(10 14 18 / .45);display:flex;align-items:flex-end}
  .side[hidden]{display:none!important}
  .side .sheet{width:100%;max-height:88%;overflow:auto;border-radius:18px 18px 0 0;border-width:2px 0 0;box-shadow:none;padding-bottom:env(safe-area-inset-bottom,0px)}
  .sheet .close{display:inline-block;margin-left:auto;border:1px solid #3A4654;background:none;color:var(--bar-fg);border-radius:999px;padding:3px 12px;font-size:13px}
}
@media (max-width:700px){
  .top-in{min-height:56px;gap:12px}
  .site span:not(.chip-sample),.site b{display:none}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:2px solid var(--edge);gap:0;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px))}
  .tab{flex:1;flex-direction:column;gap:3px;color:var(--fg-3);font-size:11px;border-bottom:0;padding:2px 0}
  .tab svg{display:block}
  .tab[aria-selected="true"]{color:var(--fg);border-bottom:0}
  main{padding-block:20px 112px}
  .headline h1{font-size:28px}.headline p{font-size:15px}
  .counters{gap:8px}
  .counter{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .counter .tile{width:36px;height:36px;border-radius:8px}.counter .tile svg{width:22px;height:22px}
  .counter .n{font-size:24px}
  .counter .pre{display:none}
  .gauge-card{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:16px;padding:14px 16px}
  .gauge-card .dial{max-width:132px;padding:4px 6px}
  .reading b{font-size:28px}
  .tag{grid-template-columns:64px 0 minmax(0,1fr) auto}
  .stub .d{font-size:24px}
  .tbody{padding:12px 12px}
  .ttl{font-size:15px}
  .stamp{padding-right:12px}.stamp span{display:none}.stamp b{font-size:13px}
  .banner{grid-template-columns:minmax(0,1fr)}.banner .art{display:none}
}
@media (prefers-reduced-motion:no-preference){.tag,.btn,.chip{transition:border-color .12s,box-shadow .12s,transform .08s}.needle{transition:transform .9s cubic-bezier(.2,.8,.2,1)}}

/* ---- 실사용 화면 추가 요소 ---- */
.record{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;background:var(--sunk);border-radius:10px;padding:14px}
.record label{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--fg-3)}
.record .btn{grid-column:1 / -1}
input[type=date],input[type=text],input[type=number],input:not([type]){font:inherit;font-size:15px;color:var(--fg);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:9px 11px;width:100%;min-width:0}
input:focus{outline:none;border-color:var(--edge)}
.hist{font-size:13px}
.hist ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.hist li{display:flex;gap:10px;align-items:baseline;border-bottom:1px dashed var(--line);padding:4px 0}
.hist li span:nth-child(2){color:var(--fg-2);flex:1;min-width:0}
.link{border:0;background:none;color:var(--fg-3);font-size:12px;text-decoration:underline;padding:0;margin-left:auto}
.onboard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center;max-width:860px;margin:24px auto}
.setup,.card-form{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:2px solid var(--edge);border-radius:12px;box-shadow:6px 6px 0 var(--edge);padding:24px}
.setup h1{margin:0;font-size:28px;letter-spacing:-.02em}.setup p{margin:0 0 6px;color:var(--fg-2)}
.setup label,.card-form label:not(.btn){font-size:13px;font-weight:600;margin-top:4px}
.settings{display:flex;flex-direction:column;gap:20px;max-width:640px}
.card-form h2{margin:0;font-size:18px}
.card-form.danger{border-color:var(--red);box-shadow:6px 6px 0 var(--red)}
.btn.danger{background:var(--red);color:#FFFFFF;border-color:var(--red)}
label.btn{cursor:pointer}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--bar);color:var(--bar-fg);border:2px solid var(--yellow);border-radius:10px;padding:10px 16px;font-size:14px;max-width:calc(100% - 32px)}
.toast[hidden]{display:none!important}
@media (max-width:700px){.onboard{grid-template-columns:minmax(0,1fr)}.onboard .art{display:flex;justify-content:center}.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}