/* Tonewedge controls. Import tokens.css first. Classes are framework independent. */
.tw-scope{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--tw-case);color:var(--tw-seam);font-synthesis:none}
.tw-scope *{box-sizing:border-box}
.tw-scope :is(button,input,select,textarea){font:inherit}
.tw-scope :is(button,input,select,textarea,a):focus-visible{outline:var(--tw-focus) solid var(--tw-accent);outline-offset:3px}
.tw-button{min-height:var(--tw-touch);padding:var(--tw-space-2) var(--tw-space-3);border:var(--tw-border) solid var(--tw-seam);border-radius:0;background:var(--tw-glass);color:var(--tw-glass-ink);box-shadow:inset 2px 2px 0 var(--tw-glass-light),inset -2px -2px 0 var(--tw-case-low),3px 3px 0 var(--tw-seam);cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.tw-button:hover:not(:disabled){background:var(--tw-glass-light)}
.tw-button:active:not(:disabled),.tw-button[aria-pressed=true]{transform:translate(2px,2px);box-shadow:inset 2px 2px 0 var(--tw-case-low)}
.tw-button:disabled{opacity:.45;cursor:not-allowed}
.tw-button--accent{background:var(--tw-accent);color:var(--tw-seam)}
.tw-button--accent:hover:not(:disabled){background:var(--tw-accent-light)}
.tw-button--dark{background:var(--tw-plate);color:var(--tw-ink);box-shadow:inset 2px 2px 0 var(--tw-plate-light),inset -2px -2px 0 var(--tw-plate-shadow),3px 3px 0 var(--tw-seam)}
.tw-button--dark:hover:not(:disabled){background:var(--tw-recess-light)}
.tw-tabs{display:flex;flex-wrap:wrap;gap:var(--tw-space-2)}
.tw-tab{min-height:var(--tw-touch);padding:var(--tw-space-2) var(--tw-space-3);border:var(--tw-border) solid var(--tw-seam);border-radius:0;background:var(--tw-recess);color:var(--tw-ink);cursor:pointer;text-transform:uppercase}
.tw-tab[aria-selected=true]{background:var(--tw-accent);color:var(--tw-seam);box-shadow:inset 0 -4px 0 var(--tw-accent-low)}
.tw-card{border:var(--tw-border) solid var(--tw-seam);background:var(--tw-plate);color:var(--tw-ink);box-shadow:4px 4px 0 var(--tw-case-low)}
.tw-card__header{padding:var(--tw-space-3);border-bottom:var(--tw-border) solid var(--tw-seam);display:flex;align-items:center;justify-content:space-between;gap:var(--tw-space-2)}
.tw-card__header strong{text-transform:uppercase;font-size:1.1rem}
.tw-card__body{padding:var(--tw-space-3)}
.tw-card__body p{margin:0;line-height:1.45;color:var(--tw-muted)}
.tw-chip{display:inline-block;padding:4px 8px;border:var(--tw-border) solid var(--tw-seam);background:var(--tw-accent);color:var(--tw-seam);font-size:.72rem;text-transform:uppercase;white-space:nowrap}
.tw-field{display:grid;gap:var(--tw-space-1);min-width:0;color:var(--tw-ink)}
.tw-field>span{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.tw-input{width:100%;min-height:var(--tw-touch);padding:var(--tw-space-2);border:var(--tw-border) solid var(--tw-seam);border-radius:0;background:var(--tw-glass);color:var(--tw-glass-ink)}
.tw-input:disabled{opacity:.5}
.tw-toggle{display:inline-flex;align-items:center;gap:var(--tw-space-2);min-height:var(--tw-touch);cursor:pointer;color:var(--tw-ink)}
.tw-toggle input{appearance:none;width:46px;height:28px;margin:0;border:var(--tw-border) solid var(--tw-seam);background:var(--tw-recess);position:relative;cursor:pointer;flex:none}
.tw-toggle input::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--tw-glass);border:1px solid var(--tw-seam)}
.tw-toggle input:checked{background:var(--tw-accent)}
.tw-toggle input:checked::after{left:21px}
.tw-knob{display:grid;justify-items:center;gap:var(--tw-space-2);width:max-content;max-width:100%;color:var(--tw-ink)}
.tw-knob>span{text-transform:uppercase;font-size:.8rem}
.tw-knob__face{width:76px;height:76px;display:grid;place-items:center;border:4px solid var(--tw-seam);background:conic-gradient(from 225deg,var(--tw-accent) 0deg calc(var(--tw-value, .5)*270deg),var(--tw-recess) 0deg 270deg,transparent 270deg);clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%)}
.tw-knob__face::after{content:'';width:48px;height:48px;background:var(--tw-plate);border:3px solid var(--tw-seam);clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
.tw-knob input{width:120px;accent-color:var(--tw-accent)}
.tw-knob output{font-size:.8rem}
@media(max-width:600px){.tw-card__header{align-items:flex-start;flex-direction:column}}