.ui-lab{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;align-items:start}.mock-app{position:relative;display:grid;min-height:460px;grid-template-rows:auto auto 1fr;border:1px solid var(--line-2);border-radius:22px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}.mock-app__bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}.mock-app__avatar{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,var(--panel-2));color:var(--accent);font:700 13px/1 var(--font-display)}.mock-app__who{display:grid;flex:1;min-width:0;line-height:1.25}.mock-app__who b{font:700 17px/1.2 var(--font-display)}.mock-app__who small{color:var(--muted);font-size:13px}.demo-site .mock-icon{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line-2);border-radius:12px;background:var(--panel-2);color:var(--text)}.demo-site .mock-icon:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 50%,var(--line-2));background:var(--panel-2)}.mock-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.demo-site .mock-icon--small{width:34px;height:34px;border-color:transparent;background:transparent;color:var(--muted)}.demo-site .mock-icon--small:hover:not(:disabled){border-color:color-mix(in srgb,var(--clip) 45%,transparent);background:color-mix(in srgb,var(--clip) 10%,transparent);color:var(--clip)}.mock-icon--small svg{width:17px;height:17px}.mock-badge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border:2px solid var(--panel);border-radius:999px;background:var(--heart);color:#fff;font:700 11px/15px var(--font-body);animation:badgeIn .25s ease-out}@keyframes badgeIn{0%{transform:scale(.4)}to{transform:scale(1)}}.mock-tabs{display:flex;gap:4px;margin:14px 18px 0;padding:4px;border-radius:12px;background:var(--panel-2)}.demo-site .mock-tabs button{flex:1;padding:9px 8px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font:600 14px/1 var(--font-body)}.demo-site .mock-tabs button:hover:not(:disabled){background:transparent;color:var(--text)}.demo-site .mock-tabs button[aria-selected=true]{border-color:var(--line);background:var(--panel);box-shadow:0 1px 3px #10241b1f;color:var(--text)}.mock-count:not(:empty){display:inline-block;min-width:18px;margin-left:4px;padding:2px 5px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11px}.mock-panels{padding:16px 18px 20px}.mock-panel{animation:panelIn .2s ease-out}@keyframes panelIn{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:none}}.mock-form{display:grid;gap:14px}.mock-field{display:grid;gap:6px}.mock-field span{color:var(--muted);font-size:13px;font-weight:600}.demo-site .mock-field input{width:100%;padding:11px 12px;border-radius:10px;font-size:15px}.demo-site .mock-field input.is-invalid{border-color:var(--clip);box-shadow:0 0 0 3px color-mix(in srgb,var(--clip) 20%,transparent);animation:shake .32s ease-in-out}@keyframes shake{0%,to{transform:none}25%{transform:translate(-6px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}.mock-hint{margin:-2px 0 0;color:var(--faint);font-size:13px}.mock-hint.is-error{color:#c2412f}body.dark-theme .mock-hint.is-error{color:#ff9d92}.mock-actions{display:flex;justify-content:flex-end;gap:8px}.demo-site .mock-btn{padding:10px 18px;border-radius:10px;font:600 14px/1 var(--font-body)}.demo-site .mock-btn--ghost{border-color:var(--line-2);background:transparent;color:var(--text)}.demo-site .mock-btn--ghost:hover:not(:disabled){background:var(--panel-2)}.demo-site .mock-btn--danger{border-color:color-mix(in srgb,var(--clip) 50%,transparent);background:transparent;color:#c2412f}body.dark-theme .mock-btn--danger{color:#ff9d92}.demo-site .mock-btn--danger:hover:not(:disabled),.demo-site .mock-btn--danger.is-armed{border-color:var(--clip);background:var(--clip);color:#fff}.mock-settings{display:grid;margin:0 0 16px;padding:0;list-style:none}.mock-settings li+li{border-top:1px solid var(--line)}.mock-toggle{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer}.mock-toggle__text{display:grid;flex:1;line-height:1.3}.mock-toggle__text small,.mock-danger small{color:var(--muted);font-size:13px}.mock-toggle input{position:absolute;opacity:0;pointer-events:none}.mock-toggle__track{position:relative;flex-shrink:0;width:46px;height:28px;border-radius:999px;background:var(--line-2);transition:background-color .18s ease}.mock-toggle__track:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .18s ease}.mock-toggle input:checked+.mock-toggle__track{background:var(--accent)}.mock-toggle input:checked+.mock-toggle__track:after{transform:translate(18px)}.mock-toggle input:focus-visible+.mock-toggle__track{outline:2px solid var(--accent);outline-offset:2px}.mock-danger{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--clip) 40%,var(--line-2));border-radius:12px}.mock-danger span{display:grid;line-height:1.3}.mock-list{display:grid;margin:0;padding:0;list-style:none}.mock-message{display:flex;align-items:center;gap:6px;animation:panelIn .2s ease-out}.mock-message+.mock-message{border-top:1px solid var(--line)}.demo-site .mock-message__open{display:flex;flex:1;align-items:center;gap:12px;min-width:0;padding:11px 4px;border:none;border-radius:8px;background:transparent;color:var(--text);text-align:left;white-space:normal}.demo-site .mock-message__open:hover:not(:disabled){background:var(--panel-2)}.mock-message__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:transparent}.mock-message.is-unread .mock-message__dot{background:var(--accent)}.mock-message__text{display:grid;min-width:0;line-height:1.3}.mock-message__text b{font-size:14.5px;font-weight:500}.mock-message.is-unread .mock-message__text b{font-weight:700}.mock-message__text small{overflow:hidden;color:var(--muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.mock-empty{padding:30px 0;color:var(--muted);text-align:center}.mock-toasts{position:absolute;right:14px;bottom:14px;left:14px;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px;pointer-events:none}.mock-toast{display:flex;align-items:center;gap:10px;max-width:100%;padding:10px 10px 10px 14px;border-radius:12px;background:var(--hw-panel);box-shadow:0 14px 30px -12px #0000008c;color:var(--hw-text);font-size:13.5px;pointer-events:auto;animation:toastIn .25s cubic-bezier(.2,.9,.3,1.3)}.mock-toast:before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--led)}.mock-toast--notify:before{background:#6fd6ff}.mock-toast--delete:before{background:var(--clip)}.mock-toast--pop:before{background:var(--vu)}.mock-toast.is-leaving{opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}@keyframes toastIn{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}.mock-toast__text{min-width:0}.demo-site .mock-toast__undo{padding:5px 9px;border:1px solid var(--hw-line-2);border-radius:7px;background:transparent;color:var(--led);font:600 13px/1 var(--font-body)}.demo-site .mock-toast__undo:hover:not(:disabled){background:var(--hw-panel-2)}.demo-site .mock-toast__close{padding:2px 6px;border:none;background:transparent;color:var(--hw-muted);font-size:18px;line-height:1}.demo-site .mock-toast__close:hover:not(:disabled){background:transparent;color:var(--hw-text)}.ui-rack{--mod-color: var(--vu)}.ui-last{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px;border:1px solid var(--hw-line);border-radius:10px;background:var(--hw-ink)}.ui-last__head{display:flex;grid-column:1 / -1;justify-content:space-between}.ui-last__plays{color:var(--hw-faint);font:500 11.5px/1.2 var(--font-mono)}.ui-last__plays b{color:var(--vu)}.ui-last__id{grid-column:1 / -1;overflow:hidden;color:var(--hw-text);font:600 17px/1.3 var(--font-mono);text-overflow:ellipsis;white-space:nowrap}.ui-last__use{grid-column:1 / -1;color:var(--hw-muted);font-size:13px}.ui-last__wave{width:100%;height:56px;margin-top:6px}.ui-last__length{align-self:end;color:var(--hw-faint);font:500 11px/1 var(--font-mono)}.ui-rack__note{margin:-4px 0 0;color:var(--hw-faint);font-size:12.5px;line-height:1.5}.ui-rack__note code{color:var(--hw-muted)}.ui-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:14px;border:1px solid var(--hw-line-2);border-radius:16px;background:var(--hw-panel);box-shadow:var(--shadow)}.demo-site .ui-pad{display:grid;gap:3px;min-width:0;padding:10px;border:1px solid var(--hw-line-2);border-radius:11px;background:var(--hw-ink);box-shadow:0 2px #00000059;color:var(--hw-text);text-align:left;white-space:normal}.demo-site .ui-pad:hover:not(:disabled){border-color:color-mix(in srgb,var(--led) 55%,var(--hw-line-2));background:var(--hw-ink);transform:translateY(-1px)}.ui-pad.is-hit{animation:padHit .45s ease-out}@keyframes padHit{0%{border-color:var(--led);background:color-mix(in srgb,var(--led) 20%,var(--hw-ink));box-shadow:0 0 18px -4px var(--led)}to{background:var(--hw-ink)}}.ui-pad__wave{width:100%;height:34px;margin-bottom:4px}.ui-pad__name{font:600 14px/1.2 var(--font-display)}.ui-pad__id{overflow:hidden;color:var(--led);font:500 11px/1.3 var(--font-mono);text-overflow:ellipsis}.ui-pad__meta{color:var(--hw-faint);font-size:11.5px;line-height:1.3}@media (max-width: 1000px){.ui-board{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width: 860px){.ui-lab{grid-template-columns:minmax(0,1fr)}}@media (max-width: 560px){.ui-board{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}.mock-tabs,.mock-panels{margin-inline:12px}.mock-panels{padding-inline:0}.mock-app__bar{padding:14px 12px}}@media (prefers-reduced-motion: reduce){.mock-panel,.mock-message,.mock-toast,.mock-badge,.ui-pad.is-hit,.mock-field input.is-invalid{animation:none}}