:root {
  --paper: #f6f7f4; --paper-2: #fff; --erased: #e0e3e0; --pencil: #1f2433;
  --pencil-60: rgba(31, 36, 51, .6); --pencil-45: rgba(31, 36, 51, .45);
  --pencil-25: rgba(31, 36, 51, .25); --pencil-12: rgba(31, 36, 51, .12);
  --marker: #c4562f; --pen: #3b4f9e; --postit: #e6ebfa; --postit-2: #dcefe4; --postit-3: #f8e5dc;
  --font-body: 'LXGW WenKai Screen', 'KaiTi', 'STKaiti', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'LXGW WenKai Screen', monospace;
  --radius-wobble-sm: 180px 15px 180px 15px / 15px 180px 15px 180px;
  --radius-pill: 999px 18px 999px 18px / 18px 999px 18px 999px;
  --shadow-soft: 3px 3px 0 0 rgba(31, 36, 51, .1);
  --shadow-hand-sm: 2px 2px 0 0 var(--pencil);
  --ok: #2f7d4f; --warn: #9a5b0c;
  color-scheme: light;
}
html[data-theme='dark'] { --ok: #7fbf9a; --warn: #e0b35a; color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body { font-family: var(--font-body); color: var(--pencil); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
code, kbd { font-family: var(--font-mono); }
.lab {
  padding: .85rem .9rem 1rem;
  background-color: var(--paper);
  background-image: radial-gradient(var(--erased) 1px, transparent 1px);
  background-size: 20px 20px;
}
.lab-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; margin-bottom: .75rem; }
.lab-tag { padding: 0 .6rem; border: 2px solid var(--pencil); border-radius: var(--radius-wobble-sm); background: var(--postit); font-size: .82rem; transform: rotate(-2deg); }
.lab-title { flex: 1; min-width: 12rem; margin: 0; font-size: 1.02rem; font-weight: 700; font-synthesis: weight; }
.lab-btn {
  padding: .05rem .75rem; font-size: .85rem; line-height: 1.6; background: var(--paper-2);
  border: 2px solid var(--pencil); border-radius: var(--radius-pill); box-shadow: var(--shadow-hand-sm);
  cursor: pointer; transition: transform .1s ease, box-shadow .1s ease, background-color .1s ease;
}
.lab-btn:hover { background: var(--marker); color: #fff; transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--pencil); }
.lab-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.lab-btn:disabled { opacity: .45; cursor: default; background: var(--paper-2); color: var(--pencil); transform: none; box-shadow: var(--shadow-hand-sm); }
.lab-btn.is-quiet { border-width: 1.5px; box-shadow: none; }
:focus-visible { outline: 2px dashed var(--marker); outline-offset: 2px; }

.stage { display: grid; gap: .9rem; }
.stage > * { min-width: 0; }
.panel { position: relative; padding: .7rem .75rem .8rem; background: var(--paper-2); border: 2px solid var(--pencil); border-radius: 12px 18px 14px 16px / 16px 14px 18px 12px; box-shadow: var(--shadow-soft); }
.panel-title { margin: 0 0 .55rem; font-size: .85rem; color: var(--pencil-60); }
.panel-title b { color: var(--pencil); }
.empty { margin: 0; color: var(--pencil-45); font-size: .85rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.card { display: grid; grid-template-columns: auto 1fr; gap: 0 .4rem; padding: .35rem .5rem .4rem; text-align: left; background: var(--paper); border: 1.5px solid var(--pencil-45); border-radius: 7px; cursor: pointer; }
.card:hover { border-color: var(--pen); }
.card-icon { grid-row: span 2; align-self: center; font-size: .9rem; }
.card.is-dir .card-icon, .card.is-dir .card-name { color: var(--pen); }
.card.is-exec .card-name { color: var(--ok); }
.card.is-link .card-name { color: var(--warn); }
.card-name { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { grid-column: 2; font-family: var(--font-mono); font-size: .68rem; color: var(--pencil-45); }
.card-peek { grid-column: 1 / -1; margin-top: .15rem; font-family: var(--font-mono); font-size: .68rem; line-height: 1.35; color: var(--pencil-60); overflow: hidden; }

.task {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .2rem .7rem;
  margin-top: .85rem; padding: .5rem .75rem; background: var(--postit);
  border: 2px solid var(--pencil); border-radius: var(--radius-wobble-sm);
}
.task-count { padding-top: .1rem; font-size: .78rem; color: var(--pencil-60); white-space: nowrap; }
.task-count b { color: var(--pencil); }
.task-text { margin: 0; font-size: .93rem; line-height: 1.55; }
.task-text code, .chips code {
  padding: 0 .3em; font-size: .82em; background: var(--paper-2); border: 1.5px solid var(--pencil-45);
  border-radius: 4px; cursor: pointer; white-space: normal; overflow-wrap: anywhere;
}
.task-text code:hover, .chips code:hover { border-color: var(--marker); color: var(--marker); }
.task-dots { grid-column: 1 / -1; display: flex; gap: .25rem; }
.task-dots i { width: .55rem; height: .55rem; border: 1.5px solid var(--pencil-45); border-radius: 50% 45% 55% 50%; }
.task-dots i.done { background: var(--marker); border-color: var(--marker); }
.task-dots i.now { border-color: var(--pencil); background: var(--paper-2); }
.task.is-done { background: var(--postit-2); }
.stamp {
  display: inline-block; margin-right: .4rem; padding: 0 .45rem; border: 2px solid var(--marker);
  border-radius: 4px 6px 5px 7px / 6px 4px 7px 5px; color: var(--marker); font-weight: 700;
  font-size: .85rem; letter-spacing: .08em; transform: rotate(-4deg);
  animation: stamp .35s cubic-bezier(.2, .9, .3, 1.3);
}
@keyframes stamp { from { transform: scale(1.6) rotate(-12deg); opacity: 0; } }
.task-list { grid-column: 1 / -1; font-size: .82rem; }
.task-list summary { cursor: pointer; color: var(--pencil-60); }
.task-list ol { margin: .3rem 0 .1rem; padding-left: 1.4rem; }
.task-list li.done { color: var(--pencil-45); text-decoration: line-through; }
.task-list li.now { font-weight: 700; }

.editor { margin-top: .85rem; padding: .6rem .75rem .7rem; background: var(--paper-2); border: 2px solid var(--pen); border-radius: 10px 14px 12px 12px / 12px 12px 14px 10px; }
.editor[hidden] { display: none; }
.editor-head { margin: 0 0 .4rem; font-size: .85rem; }
.editor-head code { font-weight: 700; }
.editor textarea {
  display: block; width: 100%; min-height: 7.5rem; padding: .45rem .55rem; font-family: var(--font-mono);
  font-size: .82rem; line-height: 1.5; color: var(--pencil); background: var(--paper);
  border: 1.5px solid var(--pencil-45); border-radius: 6px; resize: vertical;
}
.editor-tools { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.editor-tools .spacer { flex: 1; }

.term { margin-top: .85rem; background: var(--paper-2); border: 2px solid var(--pencil); border-radius: 10px 16px 12px 14px / 14px 12px 16px 10px; box-shadow: var(--shadow-soft); }
.term-out {
  max-height: 17.5rem; min-height: 5.5rem; overflow-y: auto; padding: .55rem .8rem .3rem;
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; tab-size: 8; scrollbar-width: thin; scrollbar-color: var(--pencil-25) transparent;
}
.t-line { min-height: 1.5em; }
.t-line.t-cmd { margin-top: .3rem; }
.t-line.t-cmd:first-child { margin-top: 0; }
.t-prompt, .t-dir { color: var(--pen); }
.t-exec { color: var(--ok); }
.t-link, .t-err { color: var(--marker); }
.t-note { color: var(--pen); font-family: var(--font-body); font-size: 1.05em; }
.t-intro { color: var(--pencil-60); font-family: var(--font-body); font-size: 1.05em; }
.t-hint { color: var(--pencil-60); }
.term-line { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem .4rem .8rem; border-top: 1.5px dashed var(--pencil-25); }
.term-line label { flex: none; font-family: var(--font-mono); font-size: .78rem; white-space: nowrap; }
.term-line input { flex: 1; min-width: 0; padding: .2rem 0; font-family: var(--font-mono); font-size: .85rem; color: var(--pencil); background: transparent; border: 0; outline: 0; caret-color: var(--marker); }
.term-line input::placeholder { color: var(--pencil-25); }
.term-line .lab-btn { flex: none; padding: 0 .6rem; }
.term:focus-within { border-color: var(--pen); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem; font-size: .78rem; color: var(--pencil-60); }
@media (max-width: 560px) {
  .lab { padding: .7rem .6rem .8rem; }
  .term-line input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}