.moook-demo{cursor:default;touch-action:manipulation;-webkit-user-select:none;user-select:none;outline:none;justify-items:center;gap:1.25rem;width:100%;padding:3.25rem 1rem 1.25rem;display:grid;position:relative}.moook-demo:focus-visible .moook-device{box-shadow:0 0 0 2px var(--focus), 0 12px 32px light-dark(#00000014,#0006)}.moook-kinds{background:var(--line);border-radius:2rem;gap:.125rem;padding:.125rem;display:flex;position:absolute;top:.875rem;left:50%;transform:translate(-50%)}.moook-kinds button{height:1.5rem;color:var(--fg-soft);font-size:.75rem;font-weight:var(--weight);white-space:nowrap;border-radius:2rem;padding:0 .625rem;transition:background .15s,color .15s}.moook-kinds button[data-active=true]{color:var(--fg);background:var(--bg);box-shadow:0 0 0 1px light-dark(#0000000a,#ffffff0a)}.moook-device{-webkit-user-select:none;user-select:none;background:light-dark(#e7e5df,#232320);border-radius:1.25rem;align-items:center;gap:.75rem;padding:.875rem;transition:box-shadow .2s;display:flex;box-shadow:inset 0 0 0 1px light-dark(#0000000d,#ffffff0d),0 12px 32px light-dark(#00000014,#0006)}.moook-screen{color:#eeeef2;width:320px;height:170px;font-family:var(--font-sans);background:#0b0b0d;border-radius:.375rem;font-size:13px;font-weight:500;position:relative;overflow:hidden}.moook-header{color:#96989f;align-items:center;gap:12px;height:20px;padding:0 8px;font-size:10px;font-weight:500;display:flex}.moook-header span{align-items:center;gap:5px;display:flex}.moook-header i{border-radius:50%;width:6px;height:6px}.moook-list{position:relative}.moook-highlight{will-change:transform;background:#24252a;border-radius:8px;height:26px;position:absolute;top:2px;left:4px;right:4px}.moook-row{grid-template-columns:4px 1fr auto 40px;align-items:center;gap:10px;height:30px;padding:0 10px;display:grid;position:relative}.moook-row i{border-radius:2px;height:16px}.moook-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.moook-detail{color:#96989f;font-size:10px}.moook-time{color:#5c5e66;text-align:right;font-variant-numeric:tabular-nums;font-size:10px}.moook-demo i[data-state=need]{background:#ff453a}.moook-demo i[data-state=done]{background:#ffd60a}.moook-demo i[data-state=work]{background:#30d158}.moook-buttons{gap:.5rem;display:grid}.moook-buttons button{width:2rem;height:2rem;color:var(--fg-soft);background:var(--bg);transition:transform .12s var(--ease-snappy), color .15s ease;border-radius:50%;place-items:center;display:grid;box-shadow:0 0 0 1px light-dark(#00000014,#ffffff14),0 1px 2px light-dark(#00000014,#0006)}.moook-buttons button:hover{color:var(--fg)}.moook-buttons button:active{transform:scale(.92)}.moook-buttons svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:.75rem;height:.75rem}.moook-trace{width:280px;height:40px;overflow:visible}.moook-trace line{stroke:var(--line);stroke-width:1px;stroke-dasharray:2 3}.moook-trace polyline{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .25s var(--ease-smooth)}.moook-demo[data-holding=true] .moook-trace polyline{stroke-width:2.5px}.moook-hint{color:var(--fg-soft);font-size:.6875rem;font-weight:var(--weight);margin:-.5rem 0 0;transition:color .2s}.moook-demo[data-holding=true] .moook-hint{color:var(--accent)}@media (hover:none){.moook-keys{display:none}}@media (width<=520px){.moook-demo{padding-top:1rem}.moook-kinds{margin-top:1.5rem;position:static;transform:none}.moook-kinds button{padding:0 .5rem;font-size:.6875rem}.moook-device{flex-direction:column;gap:.625rem;padding:.625rem}.moook-screen{zoom:.86}.moook-buttons{grid-auto-flow:column}}.tear-demo{cursor:default;touch-action:manipulation;-webkit-user-select:none;user-select:none;outline:none;justify-items:center;gap:.75rem;width:100%;padding:3.25rem 1rem 1.25rem;display:grid;position:relative}.tear-demo:focus-visible .tear-device{box-shadow:0 0 0 2px var(--focus), 0 12px 32px light-dark(#00000014,#0006)}.tear-modes{background:var(--line);border-radius:2rem;gap:.125rem;padding:.125rem;display:flex;position:absolute;top:.875rem;left:50%;transform:translate(-50%)}.tear-modes button{height:1.5rem;color:var(--fg-soft);font-size:.75rem;font-weight:var(--weight);white-space:nowrap;border-radius:2rem;padding:0 .625rem;transition:background .15s,color .15s}.tear-modes button[data-active=true]{color:var(--fg);background:var(--bg);box-shadow:0 0 0 1px light-dark(#0000000a,#ffffff0a)}.tear-device{background:light-dark(#e7e5df,#232320);border-radius:1.25rem;align-items:center;gap:.75rem;padding:.875rem;transition:box-shadow .2s;display:flex;box-shadow:inset 0 0 0 1px light-dark(#0000000d,#ffffff0d),0 12px 32px light-dark(#00000014,#0006)}.tear-screen{width:320px;height:170px;font-family:var(--font-sans);border-radius:.375rem;display:block}.tear-pause{width:2rem;height:2rem;color:var(--fg-soft);background:var(--bg);transition:transform .12s var(--ease-snappy), color .15s ease;border-radius:50%;place-items:center;display:grid;box-shadow:0 0 0 1px light-dark(#00000014,#ffffff14),0 1px 2px light-dark(#00000014,#0006)}.tear-pause:hover{color:var(--fg)}.tear-pause:active{transform:scale(.92)}.tear-pause svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:.75rem;height:.75rem}.tear-pause .fill{fill:currentColor}.tear-stat{color:var(--fg-soft);font-size:.75rem;font-weight:var(--weight);font-variant-numeric:tabular-nums;margin:.25rem 0 0;transition:color .2s}.tear-stat[data-torn=true]{color:var(--accent)}.tear-hint{color:var(--fg-2);font-size:.6875rem;font-weight:var(--weight);margin:0;transition:color .2s}.tear-demo[data-holding=true] .tear-hint{color:var(--accent)}@media (width<=520px){.tear-demo{padding-top:1rem}.tear-modes{margin-top:1.5rem;position:static;transform:none}.tear-modes button{padding:0 .5rem;font-size:.6875rem}.tear-device{flex-direction:column;gap:.625rem;padding:.625rem}.tear-screen{zoom:.86}}