/* vibecoded app kit v1: tokens, components and app shell shared by every app (from Henry's app-kit-v1 design). */
/* ================= 1. DESIGN TOKENS ================= */
:root{
  /* colour */
  --fw-cream:#f6f6ef;      /* page + alternate band */
  --fw-white:#ffffff;      /* cards, panels, white band */
  --fw-ink:#000000;        /* headings, primary text */
  --fw-text:#1d1d1b;       /* body text */
  --fw-grey:#828282;       /* brand grey: large/decorative text only */
  --fw-muted:#66665f;      /* small secondary text (AA) */
  --fw-line:#e5e5dc;       /* 1px borders */
  --fw-line-2:#c9c9bf;     /* stronger borders, inputs */
  --fw-soft:#ebebe4;       /* fills: tracks, logo slots, thumbs */
  --fw-orange:#ff6600;     /* the accent */
  --fw-orange-d:#e65c00;   /* hover */
  --fw-orange-t:#fff1e6;   /* tint: selection, active rows */
  --fw-orange-ink:#b84a00; /* orange text on white at small sizes (AA) */
  --fw-red:#c62828; --fw-red-t:#fdecea;
  --fw-green:#1a7f45; --fw-green-t:#e8f5ec;
  --fw-blue:#1f5fbf; --fw-blue-t:#e9f0fb;

  /* type */
  --fw-font:'Inter',Verdana,Geneva,sans-serif;
  --fw-head:'Inter Tight','Inter',sans-serif;
  --fw-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --fw-fs-xs:11px; --fw-fs-sm:13px; --fw-fs:15px; --fw-fs-lg:17px;

  /* spacing scale (4px base) */
  --fw-1:4px; --fw-2:8px; --fw-3:12px; --fw-4:16px; --fw-5:24px; --fw-6:32px; --fw-7:48px; --fw-8:64px; --fw-9:96px;

  /* shape */
  --fw-r-sm:4px; --fw-r:8px; --fw-r-lg:12px; --fw-r-pill:999px;
  --fw-border:1px solid var(--fw-line);
  --fw-shadow:none;

  /* layout */
  --fw-bar:44px; --fw-max:1280px; --fw-toolbar-w:84px; --fw-panel-w:288px;
  --fw-focus:0 0 0 2px var(--fw-white),0 0 0 4px var(--fw-orange);
  --fw-ease:cubic-bezier(.3,.8,.3,1);
}

/* ================= 2. BASE ================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fw-cream);color:var(--fw-text);font:var(--fw-fs)/1.55 var(--fw-font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--fw-focus);border-radius:var(--fw-r-sm)}
::selection{background:var(--fw-orange);color:#fff}
[hidden]{display:none!important}
.fw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fw-wrap{max-width:var(--fw-max);margin:0 auto;padding:0 var(--fw-5)}
.fw-ico{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Example tag (identical to homepage) */
.fw-ex{display:inline-block;font:500 10px/1 var(--fw-mono);color:var(--fw-muted);border:var(--fw-border);background:var(--fw-white);border-radius:3px;padding:2px 5px;margin-left:6px;vertical-align:2px;white-space:nowrap}

/* Brand logo slot (identical to homepage, left empty for later injection) */
.brand-logo{display:inline-block;width:28px;height:28px;flex-shrink:0;border-radius:6px;background:#ebebe4 center/contain no-repeat;vertical-align:middle;margin-right:8px}

/* Mono section label: ❯ 01 · apps */
.fw-label{font:500 var(--fw-fs-sm)/1 var(--fw-mono);color:var(--fw-muted)}
.fw-h1{font:800 clamp(28px,4vw,40px)/1.05 var(--fw-head);letter-spacing:-.03em;color:var(--fw-ink)}
.fw-h2{font:800 clamp(28px,4.4vw,46px)/1.05 var(--fw-head);letter-spacing:-.025em;color:var(--fw-ink);margin:14px 0 10px}
.fw-h3{font:700 17px/1.25 var(--fw-head);letter-spacing:-.01em;color:var(--fw-ink)}
.fw-sub{color:var(--fw-muted);font-size:var(--fw-fs-lg);max-width:640px}

/* Card (one style, everywhere) */
.fw-card{background:var(--fw-white);border:var(--fw-border);border-radius:var(--fw-r)}

/* Pill */
.fw-pill{display:inline-flex;align-items:center;gap:6px;font:500 var(--fw-fs-xs)/1 var(--fw-font);color:var(--fw-muted);background:var(--fw-white);border:var(--fw-border);border-radius:var(--fw-r-pill);padding:6px 10px;white-space:nowrap}
.fw-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fw-orange)}

/* ================= 3. BUTTONS ================= */
.fw-btn{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--h);padding:0 16px;border-radius:var(--fw-r);font:600 14px/1 var(--fw-font);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,color .15s;position:relative;user-select:none}
.fw-btn--lg{--h:46px;padding:0 20px;font-size:15px}
.fw-btn--sm{--h:32px;padding:0 12px;font-size:13px;border-radius:6px}
.fw-btn--primary{background:var(--fw-orange);border-color:var(--fw-orange);color:#fff}
.fw-btn--primary:hover,.fw-btn--primary.is-hover{background:var(--fw-orange-d);border-color:var(--fw-orange-d)}
.fw-btn--secondary{background:transparent;border-color:var(--fw-ink);color:var(--fw-ink)}
.fw-btn--secondary:hover,.fw-btn--secondary.is-hover{background:var(--fw-ink);color:#fff}
.fw-btn--ghost{background:transparent;color:var(--fw-ink)}
.fw-btn--ghost:hover,.fw-btn--ghost.is-hover{background:var(--fw-soft)}
.fw-btn--danger{background:transparent;border-color:var(--fw-red);color:var(--fw-red)}
.fw-btn--danger:hover,.fw-btn--danger.is-hover{background:var(--fw-red);color:#fff}
.fw-btn:disabled,.fw-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}
.fw-btn.is-loading{color:transparent!important;pointer-events:none}
.fw-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-color:#fff #fff transparent transparent;animation:fw-spin .7s linear infinite}
.fw-btn--secondary.is-loading::after,.fw-btn--ghost.is-loading::after{border-color:var(--fw-ink) var(--fw-ink) transparent transparent}
.fw-btn--danger.is-loading::after{border-color:var(--fw-red) var(--fw-red) transparent transparent}
@keyframes fw-spin{to{transform:rotate(360deg)}}

/* Icon button */
.fw-icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--fw-r);border:1px solid transparent;background:transparent;color:var(--fw-ink);cursor:pointer;transition:background .15s,border-color .15s}
.fw-icon-btn:hover,.fw-icon-btn.is-hover{background:var(--fw-soft)}
.fw-icon-btn[aria-pressed="true"],.fw-icon-btn.is-active{background:var(--fw-orange-t);color:var(--fw-orange-ink);border-color:#ffd2b3}
.fw-icon-btn:disabled{opacity:.4;cursor:not-allowed}
.fw-icon-btn--sm{width:28px;height:28px;border-radius:6px}
.fw-icon-btn--sm .fw-ico{width:15px;height:15px}

/* Toolbar group */
.fw-toolgroup{display:inline-flex;align-items:center;gap:2px;padding:3px;background:var(--fw-white);border:var(--fw-border);border-radius:var(--fw-r)}
.fw-toolgroup__sep{width:1px;height:20px;background:var(--fw-line);margin:0 4px}

/* Keyboard hint chip */
.fw-kbd{display:inline-flex;align-items:center;gap:6px;font:500 var(--fw-fs-xs)/1 var(--fw-font);color:var(--fw-muted)}
.fw-kbd kbd{font:500 11px/1 var(--fw-mono);color:var(--fw-ink);background:var(--fw-white);border:1px solid var(--fw-line-2);border-bottom-width:2px;border-radius:4px;padding:3px 6px;min-width:22px;text-align:center}

/* ================= 4. FORM CONTROLS ================= */
.fw-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.fw-field__label{font:600 12px/1.2 var(--fw-font);color:var(--fw-ink);display:flex;justify-content:space-between;gap:8px}
.fw-field__label span{font-weight:500;color:var(--fw-muted);font-family:var(--fw-mono)}
.fw-field__hint{font-size:var(--fw-fs-xs);color:var(--fw-muted)}
.fw-field.is-error .fw-input{border-color:var(--fw-red)}
.fw-field.is-error .fw-field__hint{color:var(--fw-red)}
.fw-input,.fw-select{width:100%;height:38px;padding:0 12px;background:var(--fw-white);border:1px solid var(--fw-line-2);border-radius:var(--fw-r);font-size:14px;color:var(--fw-ink);transition:border-color .15s}
.fw-input:hover,.fw-select:hover{border-color:#a9a99f}
.fw-input:focus,.fw-select:focus{outline:none;border-color:var(--fw-orange);box-shadow:0 0 0 3px var(--fw-orange-t)}
.fw-input:disabled{background:var(--fw-cream);color:var(--fw-muted)}
.fw-input--num{font-family:var(--fw-mono);font-variant-numeric:tabular-nums}
.fw-input::placeholder{color:#9a9a92}
.fw-select{appearance:none;padding-right:34px;background:var(--fw-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center no-repeat}
.fw-num{display:flex;align-items:stretch;border:1px solid var(--fw-line-2);border-radius:var(--fw-r);overflow:hidden;background:var(--fw-white);height:38px}
.fw-num:focus-within{border-color:var(--fw-orange);box-shadow:0 0 0 3px var(--fw-orange-t)}
.fw-num .fw-input{border:0;height:auto;border-radius:0;text-align:center;box-shadow:none}
.fw-num button{width:34px;background:var(--fw-cream);border:0;cursor:pointer;font:500 16px/1 var(--fw-mono)}
.fw-num button:hover{background:var(--fw-soft)}

/* Slider */
.fw-range{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;--v:50%}
.fw-range::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(90deg,var(--fw-orange) var(--v),var(--fw-soft) var(--v))}
.fw-range::-moz-range-track{height:4px;border-radius:99px;background:var(--fw-soft)}
.fw-range::-moz-range-progress{height:4px;border-radius:99px;background:var(--fw-orange)}
.fw-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--fw-white);border:2px solid var(--fw-orange)}
.fw-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--fw-white);border:2px solid var(--fw-orange)}
.fw-range:focus-visible{box-shadow:none}
.fw-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--fw-focus)}

/* Toggle */
.fw-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--fw-ink);min-height:32px}
.fw-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.fw-toggle__track{width:36px;height:20px;border-radius:99px;background:var(--fw-line-2);position:relative;transition:background .15s;flex:0 0 auto}
.fw-toggle__track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s var(--fw-ease)}
.fw-toggle input:checked+.fw-toggle__track{background:var(--fw-orange)}
.fw-toggle input:checked+.fw-toggle__track::after{transform:translateX(16px)}
.fw-toggle input:focus-visible+.fw-toggle__track{box-shadow:var(--fw-focus)}
.fw-toggle input:disabled+.fw-toggle__track{opacity:.4}

/* Checkbox (same as homepage calculator) */
.fw-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--fw-ink);min-height:32px}
.fw-check input{position:absolute;opacity:0;width:1px;height:1px}
.fw-check__box{width:20px;height:20px;border:1.5px solid #9a9a92;border-radius:5px;background:#fff;display:grid;place-items:center;transition:background .12s,border-color .12s;flex:0 0 auto}
.fw-check__box::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg) scale(0);transition:transform .12s}
.fw-check:hover .fw-check__box{border-color:var(--fw-orange)}
.fw-check input:checked+.fw-check__box{background:var(--fw-orange);border-color:var(--fw-orange)}
.fw-check input:checked+.fw-check__box::after{transform:translateY(-1px) rotate(45deg) scale(1)}
.fw-check input:focus-visible+.fw-check__box{box-shadow:var(--fw-focus)}

/* Segmented control */
.fw-seg{display:inline-flex;padding:3px;background:var(--fw-soft);border-radius:var(--fw-r);gap:2px}
.fw-seg label{position:relative}
.fw-seg input{position:absolute;opacity:0;width:1px;height:1px}
.fw-seg span{display:block;padding:7px 12px;border-radius:6px;font:500 13px/1 var(--fw-font);color:var(--fw-muted);cursor:pointer;transition:background .15s,color .15s}
.fw-seg input:checked+span{background:var(--fw-white);color:var(--fw-ink);box-shadow:inset 0 0 0 1px var(--fw-line)}
.fw-seg input:focus-visible+span{box-shadow:var(--fw-focus)}

/* Tabs */
.fw-tabs{display:flex;gap:4px;border-bottom:var(--fw-border);overflow-x:auto;scrollbar-width:none}
.fw-tab{background:none;border:0;padding:10px 12px;font:500 14px/1 var(--fw-font);color:var(--fw-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.fw-tab:hover{color:var(--fw-ink)}
.fw-tab[aria-selected="true"]{color:var(--fw-ink);border-bottom-color:var(--fw-orange)}
.fw-tabpanel{padding-top:12px;font-size:14px;color:var(--fw-muted)}

/* Colour swatches */
.fw-swatches{display:flex;flex-wrap:wrap;gap:8px}
.fw-swatch{position:relative}
.fw-swatch input{position:absolute;opacity:0;width:1px;height:1px}
.fw-swatch span{display:block;width:28px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,.12);cursor:pointer;background:var(--c)}
.fw-swatch span.is-clear{background:var(--fw-white);position:relative;overflow:hidden}
.fw-swatch span.is-clear::after{content:"";position:absolute;inset:-4px 13px;background:var(--fw-red);transform:rotate(45deg)}
.fw-swatch input:checked+span{box-shadow:0 0 0 2px var(--fw-white),0 0 0 4px var(--fw-ink)}
.fw-swatch input:focus-visible+span{box-shadow:var(--fw-focus)}

/* ================= 5. FEEDBACK ================= */
/* Drop zone */
.fw-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px 20px;background:var(--fw-white);border:2px dashed var(--fw-line-2);border-radius:var(--fw-r-lg);color:var(--fw-muted);cursor:pointer;transition:border-color .15s,background .15s;min-height:180px}
.fw-drop:hover,.fw-drop.is-over{border-color:var(--fw-orange);background:var(--fw-orange-t)}
.fw-drop.is-over .fw-drop__icon{color:var(--fw-orange);transform:translateY(-3px)}
.fw-drop.is-error{border-color:var(--fw-red);background:var(--fw-red-t)}
.fw-drop.is-error .fw-drop__icon{color:var(--fw-red)}
.fw-drop__icon{width:44px;height:44px;border-radius:10px;background:var(--fw-soft);display:grid;place-items:center;color:var(--fw-ink);transition:transform .2s var(--fw-ease),color .15s}
.fw-drop__icon .fw-ico{width:22px;height:22px}
.fw-drop__title{font:700 17px/1.3 var(--fw-head);color:var(--fw-ink)}
.fw-drop__title u{text-decoration-color:var(--fw-orange);text-underline-offset:3px}
.fw-drop__meta{font:400 12px/1.4 var(--fw-mono);color:var(--fw-muted)}
.fw-drop.is-error .fw-drop__meta{color:var(--fw-red)}
.fw-drop:focus-visible{box-shadow:var(--fw-focus)}

/* Progress */
.fw-progress{height:6px;background:var(--fw-soft);border-radius:99px;overflow:hidden;position:relative}
.fw-progress__bar{display:block;height:100%;background:var(--fw-orange);border-radius:99px;transition:width .4s var(--fw-ease)}
.fw-progress.is-indeterminate .fw-progress__bar{position:absolute;width:35%;animation:fw-indet 1.3s ease-in-out infinite}
@keyframes fw-indet{0%{left:-35%}100%{left:100%}}
.fw-progress-meta{display:flex;justify-content:space-between;font:400 12px/1 var(--fw-mono);color:var(--fw-muted);margin-top:8px}

/* Model download card */
.fw-model{display:flex;gap:12px;padding:14px;align-items:flex-start}
.fw-model__icon{width:36px;height:36px;border-radius:8px;background:var(--fw-orange-t);color:var(--fw-orange-ink);display:grid;place-items:center;flex:0 0 auto}
.fw-model__body{flex:1;min-width:0}
.fw-model__title{font:600 14px/1.3 var(--fw-font);color:var(--fw-ink)}
.fw-model__sub{font-size:12px;color:var(--fw-muted);margin:2px 0 10px}

/* Toasts */
.fw-toast{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;background:var(--fw-white);border:var(--fw-border);border-left:3px solid var(--fw-blue);border-radius:var(--fw-r);font-size:14px;color:var(--fw-ink);max-width:380px}
.fw-toast .fw-ico{margin-top:1px;color:var(--fw-blue)}
.fw-toast p{flex:1}
.fw-toast small{display:block;color:var(--fw-muted);font-size:12px}
.fw-toast--success{border-left-color:var(--fw-green)}.fw-toast--success .fw-ico{color:var(--fw-green)}
.fw-toast--error{border-left-color:var(--fw-red)}.fw-toast--error .fw-ico{color:var(--fw-red)}
.fw-toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:70;pointer-events:none}
.fw-toasts .fw-toast{pointer-events:auto;animation:fw-in .25s var(--fw-ease)}
@keyframes fw-in{from{opacity:0;transform:translateY(8px)}}

/* Modal */
.fw-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index:60}
.fw-overlay.is-open{display:flex}
.fw-modal{width:100%;max-width:440px;background:var(--fw-white);border:var(--fw-border);border-radius:var(--fw-r-lg);overflow:hidden}
.fw-modal__head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:var(--fw-border)}
.fw-modal__body{padding:16px;display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--fw-muted)}
.fw-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:var(--fw-border);background:var(--fw-cream)}
.fw-sigpad{height:120px;border:1px dashed var(--fw-line-2);border-radius:var(--fw-r);background:var(--fw-cream);display:grid;place-items:center;font:italic 600 26px/1 Georgia,serif;color:var(--fw-ink)}

/* Empty state */
.fw-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 16px}
.fw-empty__icon{width:48px;height:48px;border-radius:12px;background:var(--fw-soft);display:grid;place-items:center;margin-bottom:4px}
.fw-empty p{font-size:14px;color:var(--fw-muted);max-width:260px}

/* ================= 6. MEDIA COMPONENTS ================= */
/* Timeline (video editor) */
.fw-timeline{position:relative;background:var(--fw-white);border:var(--fw-border);border-radius:var(--fw-r);padding:8px 0 10px;user-select:none;overflow:hidden}
.fw-timeline__ruler{position:relative;height:20px;margin:0 12px 6px 76px;font:400 10px/1 var(--fw-mono);color:var(--fw-muted)}
.fw-timeline__ruler span{position:absolute;top:0;transform:translateX(-50%)}
.fw-timeline__ruler span::after{content:"";position:absolute;left:50%;top:13px;width:1px;height:5px;background:var(--fw-line-2)}
.fw-track{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:3px 12px}
.fw-track__name{font:500 11px/1 var(--fw-mono);color:var(--fw-muted)}
.fw-track__lane{position:relative;height:36px;background:var(--fw-cream);border-radius:6px}
.fw-track--cap .fw-track__lane{height:24px}
.fw-clip{position:absolute;top:2px;bottom:2px;border-radius:5px;background:#2b2b28;color:#fff;font:500 11px/1 var(--fw-mono);padding:0 8px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;border:1px solid #2b2b28;cursor:pointer}
.fw-clip.is-selected{outline:2px solid var(--fw-orange);outline-offset:1px}
.fw-clip--cap{background:var(--fw-orange-t);color:var(--fw-orange-ink);border-color:#ffd2b3}
.fw-playhead{position:absolute;top:4px;bottom:4px;width:2px;background:var(--fw-orange);pointer-events:none}
.fw-playhead::before{content:"";position:absolute;top:0;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--fw-orange)}

/* File list */
.fw-files{list-style:none;display:flex;flex-direction:column}
.fw-file{display:flex;align-items:center;gap:12px;padding:10px 12px}
.fw-file+.fw-file{border-top:var(--fw-border)}
.fw-file__thumb{width:40px;height:40px;border-radius:6px;background:var(--fw-soft);display:grid;place-items:center;font:600 9px/1 var(--fw-mono);color:var(--fw-muted);flex:0 0 auto;text-transform:uppercase}
.fw-file__thumb.is-done{background:var(--fw-orange-t);color:var(--fw-orange-ink)}
.fw-file__body{flex:1;min-width:0}
.fw-file__name{font-size:14px;color:var(--fw-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-file__meta{font:400 11px/1.4 var(--fw-mono);color:var(--fw-muted)}
.fw-file .fw-progress{margin-top:6px;height:4px}

/* Transcript */
.fw-transcript{display:flex;flex-direction:column}
.fw-line{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:10px 12px;border-radius:6px;cursor:pointer}
.fw-line:hover{background:var(--fw-cream)}
.fw-line.is-active{background:var(--fw-orange-t)}
.fw-line time{font:500 12px/1.6 var(--fw-mono);color:var(--fw-orange-ink)}
.fw-line p{font-size:14px;color:var(--fw-ink)}
.fw-line p b{font-weight:600;color:var(--fw-muted);margin-right:6px;font-size:12px}

/* ================= 7. APP SHELL ================= */
.fw-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* Top bar (homepage bar, slimmer) */
.fw-topbar{position:sticky;top:0;z-index:40;background:var(--fw-orange);color:#000}
.fw-topbar__in{display:flex;align-items:center;gap:16px;height:var(--fw-bar)}
.fw-mark{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--fw-font);color:#000;text-decoration:none;flex:0 0 auto}
.fw-mark__logo{width:22px;height:22px;display:block;border:1.5px solid #fff;flex:0 0 auto}
.fw-topbar__nav{display:flex;gap:2px;font:500 13px/1 var(--fw-mono);flex:1;min-width:0}
.fw-topbar__nav a{padding:6px 8px;border-radius:5px;color:#000;text-decoration:none;white-space:nowrap}
.fw-topbar__nav a:hover{background:rgba(0,0,0,.08)}
.fw-topbar__nav a:focus-visible,.fw-mark:focus-visible,.fw-chip:focus-visible,.fw-buy:focus-visible{box-shadow:0 0 0 2px var(--fw-orange),0 0 0 4px #000}
.fw-topbar__tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.fw-chip{border:1px solid rgba(0,0,0,.35);background:transparent;border-radius:5px;padding:6px 8px;font:500 12px/1 var(--fw-mono);color:#000;cursor:pointer;white-space:nowrap}
.fw-chip:hover{background:rgba(0,0,0,.08)}
.fw-buy{background:#000;color:#fff;border-radius:6px;padding:8px 11px;font:600 12px/1 var(--fw-font);text-decoration:none;white-space:nowrap}
.fw-buy:hover{background:#222}

/* App header strip */
.fw-apphead{background:var(--fw-white);border-bottom:var(--fw-border)}
.fw-apphead__in{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;padding-top:20px;padding-bottom:18px}
.fw-apphead .fw-h1{margin:10px 0 8px}
.fw-replaces{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:14px;color:var(--fw-muted)}
.fw-replaces .fw-brand{display:inline-flex;align-items:center;color:var(--fw-ink)}
.fw-replaces .brand-logo{width:22px;height:22px}
.fw-apphead__right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fw-price{display:flex;align-items:baseline;gap:10px}
.fw-price s{color:var(--fw-muted);font-size:15px;text-decoration-color:var(--fw-orange)}
.fw-price span{color:var(--fw-grey)}
.fw-price b{font:800 36px/1 var(--fw-head);color:var(--fw-orange);letter-spacing:-.03em}
.fw-pills{display:flex;gap:6px;flex-wrap:wrap}

/* Workspace */
.fw-workspace{flex:1;display:grid;grid-template-columns:var(--fw-toolbar-w) minmax(0,1fr) var(--fw-panel-w);min-height:520px;max-width:var(--fw-max);width:100%;margin:0 auto;border-left:var(--fw-border);border-right:var(--fw-border);background:var(--fw-white)}
.fw-toolbar{border-right:var(--fw-border);padding:8px 6px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.fw-tool{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:var(--fw-r);border:1px solid transparent;background:transparent;cursor:pointer;color:var(--fw-ink);font:500 11px/1.1 var(--fw-font);text-align:center;transition:background .15s}
.fw-tool:hover{background:var(--fw-soft)}
.fw-tool[aria-pressed="true"]{background:var(--fw-orange-t);color:var(--fw-orange-ink);border-color:#ffd2b3}
.fw-tool:disabled{opacity:.4;cursor:not-allowed}
.fw-toolbar__sep{height:1px;background:var(--fw-line);margin:6px 8px}
.fw-stage{background:var(--fw-cream);padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0;overflow:auto}
.fw-stage .fw-drop{flex:1;min-height:340px}
.fw-stage__bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.fw-page{background:var(--fw-white);border:var(--fw-border);border-radius:4px;aspect-ratio:1/1.414;width:min(100%,520px);margin:0 auto;padding:8%;display:flex;flex-direction:column;gap:10px}
.fw-page i{display:block;height:8px;border-radius:3px;background:var(--fw-soft)}
.fw-page i.h{height:14px;width:60%;background:#dcdcd2}
.fw-page .fw-page__name{font:500 12px/1.4 var(--fw-mono);color:var(--fw-muted);margin-top:auto}

/* Properties panel (bottom sheet on mobile) */
.fw-panel{border-left:var(--fw-border);display:flex;flex-direction:column;min-width:0;background:var(--fw-white)}
.fw-panel__handle{display:none}
.fw-panel__body{overflow-y:auto}
.fw-psec{padding:16px;border-bottom:var(--fw-border);display:flex;flex-direction:column;gap:12px}
.fw-psec__title{font:500 12px/1 var(--fw-mono);color:var(--fw-muted);text-transform:lowercase}
.fw-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px}
.fw-kv dt{color:var(--fw-muted)}
.fw-kv dd{color:var(--fw-ink);text-align:right;font-family:var(--fw-mono);font-size:12px}
.fw-row2{display:grid;grid-template-columns:1fr 96px;gap:8px}

/* Status bar */
.fw-statusbar{position:sticky;bottom:0;z-index:30;background:var(--fw-white);border-top:var(--fw-border)}
.fw-statusbar__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.fw-status{display:flex;align-items:center;gap:8px;font:500 12px/1.3 var(--fw-mono);color:var(--fw-muted);min-width:0}
.fw-status__dot{width:8px;height:8px;border-radius:50%;background:var(--fw-green);flex:0 0 auto}
.fw-status.is-busy .fw-status__dot{background:var(--fw-orange);animation:fw-blink 1.2s ease-in-out infinite}
@keyframes fw-blink{50%{opacity:.3}}
.fw-status span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-statusbar__actions{display:flex;align-items:center;gap:12px}

/* Footer strip */
.fw-appfoot{background:var(--fw-cream);border-top:3px solid var(--fw-orange)}
.fw-appfoot__in{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;font-size:13px;color:var(--fw-muted)}
.fw-appfoot b{color:var(--fw-ink)}
.fw-appfoot a{color:var(--fw-orange-ink);font-weight:600;text-decoration:none}
.fw-appfoot a:hover{text-decoration:underline}

/* ================= 9. RESPONSIVE ================= */
@media (max-width:1024px){
  :root{--fw-panel-w:248px}
}
@media (max-width:720px){
  :root{--fw-bar:48px}
  .fw-wrap{padding:0 16px}
  .fw-topbar__nav a:not(:first-child){display:none}
  .fw-topbar__nav{flex:0 0 auto}
  .fw-chip [data-ca-short]{display:none}
  .fw-topbar__tools{margin-left:auto;gap:8px}
  .fw-apphead__in{padding-top:16px;padding-bottom:14px}
  .fw-apphead__right{align-items:flex-start}
  .fw-price b{font-size:30px}
  .fw-workspace{grid-template-columns:1fr;border:0;min-height:0}
  /* toolbar becomes a horizontal scroll row */
  .fw-toolbar{flex-direction:row;border-right:0;border-bottom:var(--fw-border);overflow-x:auto;overflow-y:hidden;padding:6px 8px;position:sticky;top:var(--fw-bar);z-index:20;background:var(--fw-white);scrollbar-width:none}
  .fw-toolbar::-webkit-scrollbar{display:none}
  .fw-tool{min-width:64px;flex:0 0 auto}
  .fw-toolbar__sep{width:1px;height:auto;margin:8px 4px}
  .fw-stage{padding:16px}
  .fw-stage .fw-drop{min-height:260px}
  /* panel becomes a bottom sheet */
  .fw-panel{position:sticky;bottom:52px;z-index:25;border-left:0;border-top:var(--fw-border);border-radius:var(--fw-r-lg) var(--fw-r-lg) 0 0;max-height:62vh}
  .fw-panel__handle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 16px 12px;background:none;border:0;cursor:pointer;font:600 14px/1 var(--fw-font);color:var(--fw-ink)}
  .fw-panel__handle::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;border-radius:99px;background:var(--fw-line-2);transform:translateX(-50%)}
  .fw-panel__handle .fw-ico{transition:transform .2s}
  .fw-panel.is-open .fw-panel__handle .fw-ico{transform:rotate(180deg)}
  .fw-panel:not(.is-open) .fw-panel__body{display:none}
  .fw-statusbar__in{min-height:52px}
  .fw-hide-sm{display:none}
  .fw-statusbar .fw-kbd{display:none}
  .fw-toasts{left:16px;right:16px}
  .fw-toast{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ================= 10. BRAND LOGOS (unaltered company icons, self-hosted; sources in /brands/SOURCES.txt) ================= */
.brand-logo[data-brand="adobe-acrobat"]{background-image:url(/brands/adobe-acrobat.png)}
.brand-logo[data-brand="docusign"]{background-image:url(/brands/docusign.png)}
.brand-logo[data-brand="capcut"]{background-image:url(/brands/capcut.png)}
.brand-logo[data-brand="adobe-premiere-pro"]{background-image:url(/brands/adobe-premiere-pro.svg)}
.brand-logo[data-brand="otter-ai"]{background-image:url(/brands/otter-ai.png)}
.brand-logo[data-brand="descript"]{background-image:url(/brands/descript.png)}
.brand-logo[data-brand="remove-bg"]{background-image:url(/brands/remove-bg.svg)}
.brand-logo[data-brand="canva"]{background-image:url(/brands/canva.png)}
.brand-logo[data-brand="adobe-photoshop"]{background-image:url(/brands/adobe-photoshop.png)}
.brand-logo[data-brand="elevenlabs"]{background-image:url(/brands/elevenlabs.svg)}
.brand-logo[data-brand="topaz-labs"]{background-image:url(/brands/topaz-labs.png)}
.brand-logo[data-brand="miro"]{background-image:url(/brands/miro.svg)}
.brand-logo[data-brand="remove-bg"],.brand-logo[data-brand="elevenlabs"],.brand-logo[data-brand="miro"]{background-size:66%}

/* ================= 11. APP INTEGRATION (state classes the existing app scripts toggle) ================= */
.fw-tool.on,.fw-icon-btn.on,.fw-btn--ghost.on,.fw-btn--secondary.on{background:var(--fw-orange-t);color:var(--fw-orange-ink);border-color:#ffd2b3}
.fw-drop.hot{border-color:var(--fw-orange);background:var(--fw-orange-t)}
.fw-overlay.show{display:flex}
.fw-tool .fw-glyph{font:600 16px/18px var(--fw-font);height:18px}
.fw-toolbar .fw-field{padding:4px 2px}
.fw-toolbar .fw-select{height:32px;font-size:12px;padding:0 24px 0 8px;background-position:right 8px center}
.fw-seg button{background:none;border:0;padding:7px 12px;border-radius:6px;font:500 13px/1 var(--fw-font);color:var(--fw-muted);cursor:pointer}
.fw-seg button.on{background:var(--fw-white);color:var(--fw-ink);box-shadow:inset 0 0 0 1px var(--fw-line)}
.fw-note{font-size:12px;color:var(--fw-muted);line-height:1.5}
.fw-note b{color:var(--fw-ink);font-weight:600}
.fw-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fw-btn--block{width:100%}
.fw-checker{background-color:#fff;background-image:linear-gradient(45deg,#ebebe4 25%,transparent 25%),linear-gradient(-45deg,#ebebe4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ebebe4 75%),linear-gradient(-45deg,transparent 75%,#ebebe4 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.fw-stage--split{gap:12px}
.fw-ink-stage{position:relative;background:#111;border-radius:var(--fw-r);overflow:hidden}
.fw-pill--warn{background:var(--fw-orange-t);border-color:#ffd2b3;color:var(--fw-orange-ink)}
.fw-pill--plain::before{display:none}
/* toast element the apps already drive with style.display */
#toast{position:fixed;right:16px;bottom:68px;z-index:70;display:none;max-width:380px;padding:12px 14px;background:var(--fw-white);border:var(--fw-border);border-left:3px solid var(--fw-blue);border-radius:var(--fw-r);font-size:14px;color:var(--fw-ink);font-weight:500;animation:fw-in .25s var(--fw-ease)}
/* busy overlay */
.fw-busy{position:fixed;inset:0;background:rgba(246,246,239,.72);display:none;place-content:center;justify-items:center;gap:12px;z-index:70;font:500 13px/1 var(--fw-mono);color:var(--fw-ink)}
.fw-busy::before{content:"";width:28px;height:28px;border-radius:50%;border:3px solid var(--fw-orange);border-color:var(--fw-orange) var(--fw-orange) transparent transparent;animation:fw-spin .7s linear infinite}
/* footer credits */
.fw-appfoot__credits{width:100%;font-size:11px;color:var(--fw-muted);line-height:1.5}
.fw-appfoot__credits a{font-weight:500}
.fw-appfoot__links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media (max-width:720px){
  #toast{left:16px;right:16px;bottom:64px;max-width:none}
  .fw-toolbar .fw-field{flex:0 0 auto;min-width:96px}
}
/* text-only tools (the app script rewrites their label, e.g. ▶ Play / ❚❚ Pause, ● Record): same height as icon tools */
.fw-tool--text{justify-content:center;min-height:52px;font:600 11.5px/1.25 var(--fw-font);white-space:normal}
@media (max-width:720px){.fw-tool--text{white-space:nowrap}}
.fw-btn--secondary:disabled:hover{background:transparent;color:var(--fw-ink)}
.fw-btn--ghost:disabled:hover,.fw-tool:disabled:hover{background:transparent}
a.fw-tool{text-decoration:none}