/* SQUISH - Puddy Studios. Brutalist cypherpunk: pure black/white, sharp edges,
   3px borders, instant invert on hover. Fonts are LOCAL COPIES in squish/fonts/
   (relative urls) so the tool is self-contained at any mount point. The heading face is
   PUDDY Odysseus Bold 1.000 (fonts/odysseus/, with its licence; THE FONT SWEEP, 2026-10-08). */

@font-face { font-family:'PUDDY Odysseus'; src:url('fonts/odysseus/PUDDYOdysseus-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'PUDDY Odysseus'; src:url('fonts/odysseus/PUDDYOdysseus-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('fonts/SpaceMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('fonts/SpaceMono-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --bg:#000; --fg:#fff;
  --line:#fff;
  --muted:rgba(255,255,255,.55);
  --faint:rgba(255,255,255,.12);
  --mono:'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --head:'PUDDY Odysseus', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --body:'PUDDY Odysseus', ui-sans-serif, system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--fg); }
/* Zoom is allowed (brand guidelines section 7); each tap control keeps its tap, so a double tap never zooms it. */
button, a, label, input, select{ touch-action:manipulation; }
body{
  font-family:var(--body);
  min-height:100dvh;
  display:flex; flex-direction:column;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
}

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:8px; top:8px; background:#fff; color:#000; padding:8px 12px; z-index:10; }

/* Masthead + footer come from the shared PUDDY TOOLS chrome (../puddy-tools.js),
   which injects its own pt-* styles. No in-page chrome CSS. */

/* Layout */
.wrap{ width:100%; max-width:760px; margin:0 auto; padding:0 20px 64px; flex:1; }
/* A notch (a phone in landscape) or a home bar, in standalone mode: the margins never fall under it. */
.wrap{ padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right)); padding-bottom:calc(64px + env(safe-area-inset-bottom)); }

/* The FOLD: hero + active stage fill exactly one viewport below the fixed nav
   (the chrome sets --pt-nav-h:64px). The drop zone GROWS to fill the leftover
   space, so the first screen is always a clean, full app surface; the SEO
   content starts below it. */
.fold{
  min-height:calc(100dvh - var(--pt-nav-h, 0px));
  display:flex; flex-direction:column; justify-content:center;
  padding:28px 0 24px; box-sizing:border-box;
}
.fold #stage-input{ flex:1; display:flex; flex-direction:column; min-height:0; }
.fold #stage-input .drop{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:260px;
}
.fold #stage-input.panel{ margin-bottom:0; }
/* config/result sit ABOVE the always-visible drop box; gap between them */
.fold #stage-config:not(.hidden), .fold #stage-result:not(.hidden){ margin-bottom:20px; }

.hero{ text-align:center; margin-bottom:30px; }
.title{
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  font-size:clamp(64px, 16vw, 132px); line-height:.92; letter-spacing:.06em;
  margin:0; position:relative; display:inline-block;
}
.tagline{ max-width:46ch; margin:18px auto 0; color:var(--muted);
  font-size:clamp(15px,2.4vw,18px);
  text-wrap:balance; /* even lines, so no word stands alone on the last; a browser without the property ignores it */ }
/* The last sentence is a block of its own inside the tagline. A browser does not balance a block that
   holds forced breaks, and the tagline holds two; this block holds none, so its two lines come out even
   in whatever system face the reader has. No margin and the same line height: the tagline's box does not move. */
.tagline-last{ display:block; margin:0; text-wrap:balance; }
/* The heading shows the formal name: a small PUDDY line above the wordmark (2026-11-04).
   The wordmark keeps its own box, size and glitch: .title sits on a span inside the h1, and
   the h1 inherits the hero's font, so the wordmark's line box has the same strut as when the
   h1 itself was the wordmark. The PUDDY line is a short block of its own in the same face,
   so it cannot widen the page. text-indent balances the tracking after the last letter. */
.brand{ margin:0; font:inherit; }
.brand-top{
  display:block; font-family:var(--head); font-weight:700; text-transform:uppercase; color:#fff;
  font-size:clamp(16px,4vw,33px); line-height:1; letter-spacing:.3em; text-indent:.3em;
  margin:0 0 8px;
}

/* Glitch on the title */
.title::before,.title::after{
  content:attr(data-text); position:absolute; inset:0; background:var(--bg);
  overflow:hidden; clip-path:inset(0 0 0 0);
}
.title::before{ left:3px; text-shadow:-2px 0 #fff; animation:gl1 2.6s infinite steps(2,end); }
.title::after{ left:-3px; text-shadow:2px 0 #fff; animation:gl2 3.4s infinite steps(2,end); }
@keyframes gl1{ 0%,92%,100%{clip-path:inset(100% 0 0 0)} 93%{clip-path:inset(8% 0 78% 0)} 96%{clip-path:inset(52% 0 30% 0)} }
@keyframes gl2{ 0%,90%,100%{clip-path:inset(0 0 100% 0)} 91%{clip-path:inset(40% 0 40% 0)} 95%{clip-path:inset(70% 0 12% 0)} }

/* The hidden attribute must always win. Class rules like .btn{display:inline-block}
   outrank the UA [hidden]{display:none}, so a .btn with hidden=true would still show
   (this leaked the "USE" recommend button onto impossible-target results). */
[hidden]{ display:none !important; }

/* Panels */
.panel{ border:2px solid var(--line); padding:24px; margin-bottom:20px; background:#000; }
.panel.hidden{ display:none; }

/* Drop zone */
.drop{
  border:3px dashed rgba(255,255,255,.45); padding:48px 24px; text-align:center;
  cursor:pointer; transition:border-color .15s, background .15s, transform .05s; outline:0;
}
.drop:hover,.drop:focus-visible{ border-color:#fff; background:rgba(255,255,255,.04); }
.drop.drag{ border-color:#fff; background:rgba(255,255,255,.08); }
.drop-glyph{ font-family:var(--head); font-size:40px; line-height:1; margin-bottom:14px; }
.drop-glyph svg{ height:1em; width:auto; display:inline-block; vertical-align:bottom; }
.drop-head{ font-family:var(--head); letter-spacing:.18em; font-size:26px; margin:0 0 6px; }
.drop-sub{ font-family:var(--mono); font-size:13px; color:var(--muted); margin:0 0 12px; }
.drop-types{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted); margin:0; line-height:1.9; }
.drop-types .lower{ text-transform:none; letter-spacing:.03em; font-size:10px; opacity:.7; }
.drop-privacy{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:#fff;
  opacity:.85; margin:16px 0 0;
}
.drop-privacy .pdot{ color:var(--faint); padding:0 4px; }
.link{ color:#fff; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* Full-window drag overlay: drop a file anywhere to squish it */
.drop-overlay{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.drop-overlay[hidden]{ display:none; }
.drop-overlay-inner{ border:3px dashed #fff; padding:clamp(32px,8vw,72px) clamp(40px,12vw,110px); text-align:center; pointer-events:none; }
.drop-overlay .drop-glyph{ font-family:var(--head); font-size:clamp(40px,9vw,64px); line-height:1; margin-bottom:14px; }
.drop-overlay p{ font-family:var(--head); letter-spacing:.18em; font-size:clamp(22px,5vw,34px); margin:0; }

/* File card */
.filecard{ display:flex; gap:18px; align-items:center; margin-bottom:24px; }
.thumb{ width:96px; height:96px; flex:0 0 auto; border:2px solid var(--line); position:relative; overflow:hidden;
  background: repeating-conic-gradient(rgba(255,255,255,.10) 0 25%, transparent 0 50%) 0 0/16px 16px; }
/* Absolutely fill the box + object-fit:contain so ANY aspect ratio is letterboxed
   inside it. (A % height on a grid/flex child is indefinite and silently fails -
   that was the "image expanding out of the canvas" bug.) */
.thumb img, .thumb video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; image-rendering:auto; }
.thumb audio{ position:absolute; left:6px; right:6px; top:50%; transform:translateY(-50%); width:calc(100% - 12px); }
/* Fallback tile shown when a file type can't render an inline preview (PDF, an MKV/MOV the
   browser won't play, a video/audio/PDF input, an undecodable image) - the format in caps. */
.thumb .type-badge{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#000; color:#fff; font-family:var(--mono); font-weight:700; font-size:20px; letter-spacing:.14em; text-align:center; padding:6px; box-sizing:border-box; }
.thumb.big .type-badge{ font-size:30px; letter-spacing:.18em; }
.thumb.big{ width:160px; height:160px; }

.meta{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; flex:1; }
.meta>div{ min-width:0; }
.meta dt{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted); }
.meta dd{ margin:2px 0 0; font-family:var(--mono); font-size:14px; }
.meta dd.big{ font-size:20px; font-weight:700; }
.ellip{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Target control */
.label{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.16em; margin-bottom:10px; }
.muted{ color:var(--muted); }
.target-row{ display:flex; gap:0; }
.num{
  flex:1; background:#000; color:#fff; border:2px solid var(--line); border-right:0;
  font-family:var(--head); font-size:34px; padding:8px 14px; min-width:0; -moz-appearance:textfield;
}
.num::-webkit-outer-spin-button,.num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.num:focus{ outline:3px solid #fff; outline-offset:-3px; }
.unit{ display:flex; }
.unit-btn{
  background:#000; color:var(--muted); border:2px solid var(--line); border-left-width:0;
  font-family:var(--mono); font-size:14px; letter-spacing:.1em; padding:0 16px; cursor:pointer;
}
.unit-btn+.unit-btn{ border-left-width:0; }
.unit-btn.is-on{ background:#fff; color:#000; }
.presets{ display:flex; gap:10px; margin-top:12px; }
.chip{
  background:#000; color:#fff; border:2px solid var(--line); padding:6px 14px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; cursor:pointer; transition:.12s;
}
.chip:hover{ background:#fff; color:#000; }
.hint{ font-family:var(--mono); font-size:12px; color:var(--muted); margin:12px 0 0; min-height:1.2em; }
.hint.warn{ color:#fff; }

/* Output format selector + mode toggle */
.format, .mode{ margin-bottom:22px; }
.mode[hidden]{ display:none; }
.target[hidden]{ display:none; }
.seg{ display:flex; flex-wrap:wrap; }
.seg-btn, .mode-btn{ background:#000; color:var(--muted); border:2px solid var(--line); border-left-width:0; font-family:var(--mono); font-size:13px; letter-spacing:.08em; padding:10px 18px; cursor:pointer; transition:background .12s, color .12s; }
.seg-btn:first-child, .mode-btn:first-child{ border-left-width:2px; }
.seg-btn:hover, .mode-btn:hover{ color:#fff; }
.seg-btn.is-on, .mode-btn.is-on{ background:#fff; color:#000; }
.seg-btn:focus-visible, .mode-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* Buttons */
.actions{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.btn{
  font-family:var(--mono); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:14px; padding:14px 26px; cursor:pointer; text-decoration:none; display:inline-block;
  border:3px solid var(--line); transition:background .12s, color .12s, transform .05s;
}
.btn.primary{ background:#fff; color:#000; }
.btn.primary:hover{ background:#000; color:#fff; }
.btn.ghost{ background:#000; color:#fff; }
.btn.ghost:hover{ background:#fff; color:#000; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.35; pointer-events:none; }
.btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* Progress */
.progress-wrap{ margin-top:22px; }
.bar{ height:14px; border:2px solid var(--line); padding:2px; }
.bar span{ display:block; height:100%; width:0; background:#fff; transition:width .2s; }
.status{ font-family:var(--mono); font-size:12px; color:var(--muted); margin:8px 0 0; }

/* Result */
.res-head{ font-family:var(--head); letter-spacing:.18em; font-size:22px; margin:0 0 18px; }
.result-grid{ display:flex; gap:22px; align-items:center; }
.result-meta{ flex:1; }
.result-meta .saved-cell, .result-meta .span2{ grid-column:1 / -1; }
.saved-stat{ font-family:var(--head) !important; font-size:clamp(40px,9vw,64px) !important; line-height:.86; font-weight:700; letter-spacing:.01em; }
.mono-sm{ font-size:11px !important; color:var(--muted); line-height:1.5; }
.note{ font-family:var(--mono); font-size:12px; border:2px solid var(--line); padding:12px 14px; margin:18px 0 0; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; line-height:1.5; }
.note[hidden]{ display:none; }
.note-btn{ flex:0 0 auto; padding:8px 16px; font-size:12px; }

/* SQUISH crunch - A hard vertical compress on submit (brutalist, not bouncy) */
@keyframes crunch{ 0%{transform:scaleY(1)} 34%{transform:scaleY(.6) scaleX(1.05)} 68%{transform:scaleY(1.06) scaleX(.99)} 100%{transform:scaleY(1)} }
.filecard.crunch{ animation:crunch .38s cubic-bezier(.5,0,.25,1.3); transform-origin:center bottom; }
.error{ font-family:var(--mono); font-size:13px; border:2px solid #fff; padding:10px 12px; margin:14px 0 0; }

@media (max-width:560px){
  .filecard{ flex-direction:column; align-items:flex-start; }
  .result-grid{ flex-direction:column; align-items:flex-start; }
  .meta{ grid-template-columns:1fr 1fr; }

  /* Format selector can carry up to 5 options (SAME/MP4/MOV/MKV/GIF) - let the
     buttons flex to fill one even row instead of wrapping a lone button below. */
  .seg{ flex-wrap:nowrap; }
  .seg-btn, .mode-btn{ flex:1 1 0; min-width:0; padding-left:8px; padding-right:8px; letter-spacing:.04em; text-align:center; }

  /* Compress the landing rhythm so the fold fits one mobile screen. */
  .wrap{ padding:0 16px 22px; }
  .fold{ padding:14px 0 16px; }
  .fold #stage-input .drop{ min-height:200px; }
  .hero{ margin-bottom:14px; }
  .title{ font-size:clamp(50px,15vw,80px); }
  .brand-top{ font-size:clamp(13px,3.75vw,20px); margin-bottom:6px; }
  .tagline{ margin-top:10px; font-size:13px; }
  .panel{ padding:16px; margin-bottom:14px; }
  .drop{ padding:20px 14px; }
  .drop-glyph{ font-size:32px; margin-bottom:8px; }
  .drop-head{ font-size:22px; }
  .drop-sub{ margin-bottom:8px; }
  .drop-privacy{ margin-top:12px; font-size:10px; }

  .wrap{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
}

/* The narrowest phones and a folded cover screen (below about 340px): every format label and MAX QUALITY fit their buttons. */
@media (max-width:340px){
  .wrap{ padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); }
  .panel{ padding:12px; }
  .seg-btn, .mode-btn{ padding-left:3px; padding-right:3px; font-size:11px; letter-spacing:0; }
}

@media (prefers-reduced-motion:reduce){
  .title::before,.title::after{ animation:none; display:none; }
  .filecard.crunch{ animation:none; }
  *{ transition:none !important; }
}

/* SEO content section - same brutalist language as the panels above */
.seo{ border:3px solid var(--line); padding:26px 24px 30px; margin-top:34px; }
.seo-head{
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  font-size:20px; letter-spacing:.14em; margin:26px 0 12px;
  border-bottom:2px solid var(--line); padding-bottom:8px;
}
.seo-head:first-child{ margin-top:0; }
.seo p{ color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 6px; }
.seo-steps{ list-style:none; counter-reset:sq-step; margin:0; padding:0; }
.seo-steps li{
  counter-increment:sq-step; color:var(--muted); font-size:15px; line-height:1.6;
  padding:10px 0 10px 38px; position:relative; border-bottom:1px solid var(--faint);
}
.seo-steps li:last-child{ border-bottom:none; }
.seo-steps li::before{
  content:counter(sq-step); position:absolute; left:0; top:10px;
  font-family:var(--mono); font-size:13px; width:24px; height:24px;
  border:2px solid var(--line); display:flex; align-items:center; justify-content:center; color:#fff;
}
.seo-step-label{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:#fff; display:block; margin-bottom:2px; }
.seo-faq{ margin:0; }
.seo-faq dt{ font-weight:700; color:#fff; font-size:15px; margin:16px 0 6px; }
.seo-faq dt:first-child{ margin-top:0; }
.seo-faq dd{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.65; }
.seo p.seo-notices{ margin:18px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.08em; }

@media (max-width:560px){
  .seo{ padding:16px 14px 20px; margin-top:22px; }
  .seo-head{ font-size:17px; }
}