@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ── Mono tokens ───────────────────────────── */
:root{
  --bg:#ffffff; --fg:#191919; --sub:#5f5e5b; --mute:#9b9a97;
  --line:#e9e9e7; --soft:#f7f7f5; --card:#ffffff; --inv:#ffffff;
  --r:10px; --font:"Pretendard Variable",Pretendard,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#191919; --fg:#ececeb; --sub:#a5a5a3; --mute:#6f6f6d;
    --line:#2f2f2f; --soft:#232323; --card:#202020; --inv:#191919; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#191919; --fg:#ececeb; --sub:#a5a5a3; --mute:#6f6f6d;
  --line:#2f2f2f; --soft:#232323; --card:#202020; --inv:#191919; color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;display:flex;min-height:100vh;padding:16px;overflow-x:hidden}
/* margin:auto centers when it fits and lets tall widgets grow downward without clipping the top */
.w{width:100%;max-width:520px;display:flex;flex-direction:column;gap:12px;margin:auto}
.w.wide{max-width:860px}
.w.full{max-width:none}

/* typography */
.ttl{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.big{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.03em;line-height:1}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.sub{color:var(--sub)} .mute{color:var(--mute)} .sm{font-size:12px} .c{text-align:center}

/* layout helpers */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.sp{justify-content:space-between}
.row.ct{justify-content:center}
.col{display:flex;flex-direction:column;gap:8px}
.grid{display:grid;gap:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.soft{background:var(--soft);border-radius:var(--r);padding:12px}
hr{border:0;border-top:1px solid var(--line)}
.grow{flex:1;min-width:0}

/* controls */
button,.btn{font:inherit;font-size:13px;font-weight:500;color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}
button:hover{background:var(--soft);border-color:var(--mute)}
button:active{transform:translateY(1px)}
button.pri{background:var(--fg);color:var(--inv);border-color:var(--fg)}
button.pri:hover{opacity:.88}
button.ghost{border-color:transparent;background:transparent}
button.ghost:hover{background:var(--soft)}
button.ghost.pri{background:var(--fg);color:var(--inv);border-color:var(--fg)}
button.icon{padding:6px 9px;line-height:1}
button:disabled{opacity:.4;cursor:default}
input,select,textarea{font:inherit;font-size:13px;color:var(--fg);background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;outline:none;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--fg)}
textarea{resize:vertical;line-height:1.6;width:100%}
input[type=checkbox]{accent-color:var(--fg);width:15px;height:15px;cursor:pointer}
input[type=range]{accent-color:var(--fg);padding:0;border:0;background:none}
label{font-size:12px;color:var(--sub)}
.field{display:flex;flex-direction:column;gap:4px}

/* list */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .x{opacity:0;border:0;background:none;color:var(--mute);padding:2px 6px}
.li:hover .x{opacity:1}
.done{color:var(--mute);text-decoration:line-through}

/* bars */
.bar{height:8px;background:var(--soft);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:var(--fg);border-radius:99px;transition:width .4s}

.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;border:1px solid var(--line);color:var(--sub)}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px}
.empty{color:var(--mute);font-size:13px;text-align:center;padding:16px}
.src{font-size:11px;color:var(--mute);text-align:right}
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--fg);color:var(--inv);
  padding:6px 14px;border-radius:99px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
@media (max-width:420px){body{padding:12px}}