:root{
  --bg:#000;
  --bg2:#050505;
  --panel: rgba(14,14,14,.74);
  --panel2: rgba(18,18,18,.62);
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.16);
  --text:#f2f2f2;
  --muted: rgba(242,242,242,.70);
  --dim: rgba(242,242,242,.42);
  --shadow: 0 18px 70px rgba(0,0,0,.65);
  --radius: 10px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* SAFE DEFAULT: prevents whole page highlight if JS fails */
  --mask: radial-gradient(
    circle 140px at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0) 72%
  );
  --error-bg: rgba(200,60,60,.15);
  --error-border: rgba(200,60,60,.4);
  --error-text: #f5a0a0;
  --topbar-bg: rgba(0,0,0,.62);
}

/* Light theme */
html.light{
  --bg: #f5f5f5;
  --bg2: #eee;
  --panel: rgba(255,255,255,.85);
  --panel2: rgba(255,255,255,.72);
  --line: rgba(0,0,0,.08);
  --line2: rgba(0,0,0,.12);
  --text: #1a1a1a;
  --muted: rgba(0,0,0,.65);
  --dim: rgba(0,0,0,.45);
  --shadow: 0 18px 70px rgba(0,0,0,.12);
  --mask: radial-gradient(
    circle 140px at 50% 50%,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,0) 72%
  );
  --error-bg: rgba(180,40,40,.12);
  --error-border: rgba(180,40,40,.35);
  --error-text: #b91c1c;
  --topbar-bg: rgba(255,255,255,.85);
}

/* grid visible on light background (dark lines, stronger so halo shows) */
html.light .grid::before{
  background:
    linear-gradient(to right, rgba(0,0,0,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 26px 26px;
}
html.light .grid::after{
  background:
    linear-gradient(to right, rgba(0,0,0,.26) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.26) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* lighter vignette in light mode so grid and halo stay visible */
html.light .vignette{
  background: radial-gradient(circle at 50% 15%, transparent 50%, rgba(0,0,0,.2) 95%);
  opacity: .9;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family:var(--mono);
  background: transparent;
  letter-spacing:.2px;
  line-height:1.55;
  overflow-x:hidden;
}

/* solid page background (behind .bg so grid is always visible) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background: var(--bg);
  pointer-events:none;
}

/* background layers */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

.grid{
  position:absolute;
  inset:-2px;
  opacity:1;
}

/* base grid (dim) */
.grid::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.22;
}

/* highlight grid (bright), revealed only near cursor */
.grid::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.98;

  /* JS-built mask with safe fallback */
  -webkit-mask-image: var(
    --mask,
    radial-gradient(circle 140px at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 72%)
  );
  mask-image: var(
    --mask,
    radial-gradient(circle 140px at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 72%)
  );

  -webkit-mask-mode: alpha;
  mask-mode: alpha;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  will-change: -webkit-mask-image, mask-image;
}

.grain{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode:overlay;
}

.scan{
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 6px
  );
  opacity:.05;
}

.vignette{
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 50% 15%, transparent 40%, rgba(0,0,0,.75) 90%);
  opacity:.7;
}

/* a11y */
.skip{
  position:absolute;
  left:-999px;
  top:0;
  background:#000;
  color:#fff;
  padding:.6rem .8rem;
}

.skip:focus{
  left:12px;
  top:12px;
  z-index:9999;
  border-radius:10px;
}

/* topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding: 12px 18px;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand a{
  text-decoration: none;
  color: inherit;
}
.brand a:hover{ opacity: 1; }

/* Home button: one rectangle (chevron + Home + version) */
.topbar-home{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  color: var(--text);
  text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: .35rem .5rem .35rem .4rem;
  transition: border-color .2s, background .2s;
}
.topbar-home:hover{
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}

.topbar-chevron{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.topbar-chevron svg{
  width: 100%;
  height: 100%;
}

.topbar-home-inner{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 0;
}
.topbar-home-text{
  font-size: .82rem;
  letter-spacing: .5px;
}
.topbar-home .version{
  font-size: .62rem;
  letter-spacing: 1.4px;
  color: var(--dim);
  opacity: .85;
}

.left{
  display:flex;
  align-items:center;
  gap:10px;
}

.mark{
  width:10px;
  height:10px;
  border-radius:50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 18px rgba(255,255,255,.25);
}

.label{
  font-size:.86rem;
  letter-spacing:1.2px;
  opacity:.9;
}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.version{
  font-size:.62rem;
  letter-spacing:1.4px;
  color:var(--dim);
  opacity:.85;
}


.center{
  font-size:.78rem;
  letter-spacing:1.8px;
  color:var(--muted);
  text-transform:uppercase;
  text-align:center;
}

.right{
  display:flex;
  justify-content:flex-end;
}

/* THEME TOGGLE */
.theme-toggle{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  position: relative;
  padding: 0;
  line-height: 0;
}

.theme-toggle .icon{
  display: grid;
  place-items: center;
  line-height: 0;
}

.theme-toggle svg{ display:block; }

.theme-toggle:hover{ background: rgba(255,255,255,.06); }

.theme-input{ display: none; }

.theme-toggle .icon{
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  transition: transform 500ms;
  color: var(--text);
}

.icon--moon{ transition-delay: 200ms; }
.icon--sun{ transform: scale(0); }

#switch:checked + .icon--moon{
  transform: rotate(360deg) scale(0);
}

#switch:checked ~ .icon--sun{
  transition-delay: 200ms;
  transform: scale(1) rotate(360deg);
}

html.light .theme-toggle{
  background: rgba(0,0,0,.04);
}
html.light .theme-toggle:hover{
  background: rgba(0,0,0,.08);
}
html.light .topbar-home:hover{
  border-color: rgba(0,0,0,.2);
  background: rgba(0,0,0,.08);
}
html.light .nav a:hover{
  background: rgba(0,0,0,.06);
}

/* layout */
.wrap{
  margin:0 auto;
  padding: 20px 18px 60px;
  width: 100%;
  max-width: 1450px;
}

.layout{
  display:grid;
  gap:14px;
  grid-template-columns: minmax(300px, 1.05fr) minmax(460px, 1.45fr) minmax(280px, 1fr);
  grid-template-rows: auto 260px 260px auto;
}

.tile--hero{
  grid-column: 1 / -1;
  grid-row: 1;
}

.tall{ grid-row: 2 / span 2; }
.wide{ grid-column: 2; grid-row: 2 / span 2; }
.stack:nth-of-type(3){ grid-column: 3; grid-row: 2; }
.stack:nth-of-type(4){ grid-column: 3; grid-row: 3; }

.grid2{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  margin-top: 6px;
}

.tile{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%), var(--panel);
  box-shadow: var(--shadow);
  padding: 14px 14px 16px;
  position:relative;
  overflow:hidden;
}

.tile::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  background: radial-gradient(circle at 70% 0%, rgba(255,255,255,.10), transparent 45%);
  opacity:.35;
  pointer-events:none;
}

.tile:hover{ border-color: rgba(255,255,255,.18); }

/* Nav highlight: border fades bright then back over 3s */
@keyframes nav-highlight{
  0%, 100%{ border-color: var(--line); }
  50%{ border-color: rgba(255,255,255,.6); }
}

@keyframes nav-highlight-light{
  0%, 100%{ border-color: var(--line); }
  50%{ border-color: rgba(0,0,0,.45); }
}

.tile.tile--highlight{
  animation: nav-highlight 3s ease;
}
html.light .tile.tile--highlight{
  animation: nav-highlight-light 3s ease;
}

.tile--hero{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
}

.hero-title{
  margin: 0;
  /* Single clamp: scales smoothly with viewport; no media-query jump */
  font-size: clamp(0.5rem, 7.5vw, 6rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  transform: scale(1);
  transform-origin: center;
}

.kicker{
  font-size:.72rem;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform:uppercase;
}

.title{
  margin-top:6px;
  font-size:1rem;
  opacity:.95;
}

.title.big{
  font-size:1.15rem;
  letter-spacing: .6px;
}

.muted{ color:var(--muted); }
.dim{ color:var(--dim); }

/* justified text in about, contact, and bottom of website stats */
#about p,
#about .list > div,
#contact p.muted,
.tile.tall p.muted{
  text-align: justify;
}

.divider{
  height:1px;
  background: var(--line);
  margin: 12px 0;
}

.tile-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.mono{
  margin-top:12px;
  display:grid;
  gap:8px;
}

.row{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.k{
  color:var(--dim);
  letter-spacing:1px;
}

.v{ color:var(--text); }

/* Raw stats box: two columns, grey labels, white values, native mono font */
.raw-stats{
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,.2);
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, Consolas, monospace;
  font-size: .78rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.raw-stats-col{
  display: grid;
  gap: 6px;
}
.raw-stats .k{ color: var(--dim); letter-spacing: .5px; }
.raw-stats .v{ color: var(--text); }

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.nav a{
  color:var(--text);
  text-decoration:none;
  padding:.35rem .5rem;
  border:1px solid var(--line2);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-size:.86rem;
}

.nav a:hover{ background: rgba(255,255,255,.06); }

.headline{
  margin: 16px 0 0;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing:.2px;
}

.meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top: 18px;
  color: var(--dim);
  font-size: .78rem;
  letter-spacing: 1.2px;
  text-transform:uppercase;
}

.controls{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.knob{
  width:34px;
  height:34px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
  position:relative;
}

.knob::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  top:7px;
  left:7px;
  opacity:.7;
}

.hint{
  margin-top:12px;
  color:var(--muted);
  font-size:.88rem;
}

.frame{
  margin-top: 14px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px;
  background: rgba(0,0,0,.35);
}

.frame-inner{
  height: 86px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.55;
}

/* bottom tiles */
.list{
  margin-top:10px;
  display:grid;
  gap:8px;
  color:var(--muted);
}

.proj{ margin-top:10px; }

a.proj-link{
  display:block;
  text-decoration:none;
  color:inherit;
  margin-top:10px;
  padding:10px 12px;
  margin-left:-12px;
  margin-right:-12px;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition: border-color .2s, background .2s;
  position:relative;
  z-index:1;
  cursor:pointer;
}
a.proj-link:hover{
  border-color:var(--line2);
  background:rgba(255,255,255,.04);
}
html.light a.proj-link:hover{
  border-color: rgba(0,0,0,.2);
  background: rgba(0,0,0,.08);
}
a.proj-link .pname{ color:var(--text); }
a.proj-link .pline{ color:var(--muted); }

.pname{
  letter-spacing:.6px;
  font-size:.95rem;
}

.pline{
  color:var(--muted);
  font-size:.88rem;
  margin-top:6px;
}

.links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.links a{
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line2);
  border-radius: 999px;
  padding:.4rem .6rem;
  background: rgba(255,255,255,.03);
  font-size:.86rem;
  transition: border-color .2s, background .2s;
}
.links a:hover{
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}
html.light .links a:hover{
  border-color: rgba(0,0,0,.2);
  background: rgba(0,0,0,.08);
}

.links a[aria-disabled="true"]{
  opacity:.5;
  pointer-events:none;
}

/* footer */
.footer{
  margin-top: 18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--dim);
  font-size:.82rem;
  letter-spacing: 1px;
  text-transform:uppercase;
}

/* responsive */
/* 3 → 2 columns at 1200px; 3-col scales with window until 1450px (via .wrap max-width) */
@media (max-width: 1200px){
  .layout{
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    grid-template-rows: auto 260px 260px auto auto;
  }

  .tile--hero{ grid-column: 1 / -1; grid-row: 1; }

  /* keep the "control panel" arrangement */
  .tall{ grid-column: 1; grid-row: 2 / span 2; }
  .wide{ grid-column: 2; grid-row: 2 / span 2; }

  /* the two right stacks become the 3rd row, side-by-side */
  .layout > .tile.stack:nth-of-type(3){ grid-column: 1; grid-row: 4; }
  .layout > .tile.stack:nth-of-type(4){ grid-column: 2; grid-row: 4; }

  .grid2{
    grid-column: 1 / -1;
    grid-row: 5;
    grid-template-columns: 1fr 1fr;
  }

  /* third tile in the bottom grid spans full width */
  #contact{ grid-column: 1 / -1; }

  .headline{ font-size: 1.35rem; }
}

/* 2 → 1 column: stack everything full-width (override 2-col placement) */
@media (max-width: 900px){
  .wrap{
    padding-left: 14px;
    padding-right: 14px;
    overflow-wrap: break-word;
  }

  .layout{
    min-width: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  .layout > *{
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
  }

  /* Same specificity as 2-col rules so 1-col wins: force every block into column 1 */
  .layout > .tile.tall,
  .layout > .tile.wide,
  .layout > .tile.stack:nth-of-type(3),
  .layout > .tile.stack:nth-of-type(4),
  .layout > .grid2{
    grid-column: 1;
    grid-row: auto;
  }

  .grid2{
    grid-template-columns: 1fr;
  }

  .grid2 > *{
    min-width: 0;
  }

  .footer{
    flex-wrap: wrap;
  }

  .headline{ font-size: 1.25rem; }
}

/* Single-page layout (e.g. heic-converter) */
.page-single .layout{
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  max-width: 520px;
}
.page-single .layout > .tile{ grid-column: 1; grid-row: auto; }

/* Converter layout: content-fitting tiles, different heights/widths */
/* 3-col mode: col1 = HEIC + Works Cited (same width), col2 = Uploaded stacked above Converted */
.layout.layout--converter{
  grid-template-columns: minmax(280px, 2fr) minmax(200px, 1fr);
  grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) !important;
  align-items: start;
}
.layout.layout--converter > .converter-tile{
  grid-column: 1;
  grid-row: 1;
}
.layout.layout--converter > .converter-preview-col{
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.layout.layout--converter > .converter-reference-tile{
  grid-column: 1;
  grid-row: 2;
}
@media (max-width: 1200px){
  .layout.layout--converter{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto) !important;
  }
  .layout.layout--converter > .converter-tile,
  .layout.layout--converter > .converter-preview-col,
  .layout.layout--converter > .converter-reference-tile{
    grid-column: 1;
  }
  .layout.layout--converter > .converter-tile{ grid-row: 1; }
  .layout.layout--converter > .converter-preview-col{ grid-row: 2; }
  .layout.layout--converter > .converter-reference-tile{ grid-row: 3; }
}
@media (max-width: 900px){
  .layout.layout--converter{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto) !important;
  }
  .layout.layout--converter > .converter-tile,
  .layout.layout--converter > .converter-preview-col,
  .layout.layout--converter > .converter-reference-tile{
    grid-column: 1;
    grid-row: auto;
  }
}

.back-link{
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  margin-top: 8px;
}
.back-link:hover{ color: var(--text); }

/* HEIC converter page */
.converter-summary{
  margin-top: 10px;
}
.converter-summary p{
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.converter-summary .converter-mobile-note{
  margin-top: 10px;
  font-size: .86rem;
  color: var(--dim);
}

.converter-error{
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--error-text);
  word-break: break-word;
}
.converter-error[hidden]{ display: none; }

.converter-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.converter-actions:first-of-type{ margin-top: 0; }

.converter-file-input{
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.converter-btn{
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .5px;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.converter-btn:hover:not(:disabled){
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}
.converter-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.converter-btn--primary{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
}
.converter-btn--primary:hover:not(:disabled){
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.14);
}

/* Light mode: hover shading on buttons (dark tint) */
html.light .converter-btn:hover:not(:disabled){
  border-color: rgba(0,0,0,.2);
  background: rgba(0,0,0,.08);
}
html.light .converter-btn--primary:hover:not(:disabled){
  border-color: rgba(0,0,0,.28);
  background: rgba(0,0,0,.12);
}

.converter-filename{
  font-size: .86rem;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.converter-pipeline{
  margin-top: 14px;
}
.converter-pipeline-label{
  font-size: .72rem;
  letter-spacing: 2px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.converter-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.converter-step{
  font-size: .88rem;
  color: var(--dim);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
}
.converter-step--pending{
  color: var(--dim);
}
.converter-step--active{
  color: var(--text);
  border-color: var(--line2);
  background: rgba(255,255,255,.04);
}
.converter-step--done{
  color: var(--muted);
  border-color: var(--line);
}

.converter-progress-bar{
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
}
.converter-progress-fill{
  height: 100%;
  width: 0%;
  background: var(--line2);
  border-radius: 999px;
  transition: width .4s ease;
}

/* Preview tiles: compact when empty, grow with image (max 180px) */
.converter-preview-tile[aria-hidden="true"]{
  display: none;
}
.converter-preview-tile .converter-preview-wrap{
  margin-top: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-height: 200px;
}
.converter-preview-wrap .converter-preview-img{
  display: block;
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.converter-preview-img.converter-preview-img--placeholder,
.converter-preview-img.converter-preview-img--broken{
  display: none;
}
.converter-preview-fallback{
  font-size: .88rem;
  color: var(--dim);
  padding: 12px 16px;
  text-align: center;
}
.converter-preview-fallback[aria-hidden="true"]{
  display: none;
}
.converter-download-btn{
  margin-top: 12px;
}

/* Reference tile: compact, spacing between kicker, description, and button */
.converter-reference-tile .converter-reference-desc{
  margin: 12px 0 0;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
}
.converter-reference-tile .converter-reference-btn{
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
}

/* Start row: button + loader to the right */
.converter-actions--start{
  align-items: center;
}

/* Cloud loader (grey, to the right of Start button when pipeline runs) */
.converter-loader{
  --cloud-color: rgba(180, 180, 180, 0.9);
  --arrows-color: rgba(220, 220, 220, 0.95);
  --time-animation: 1s;
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}
.converter-loader--visible{
  display: flex;
}
.converter-loader .converter-loader-svg{
  width: 24px;
  height: 24px;
  display: block;
}
.converter-loader rect{
  fill: var(--cloud-color);
}
.converter-loader .converter-loader-arrows{
  transform-origin: 50% 72.8938%;
  fill: var(--arrows-color);
  filter: drop-shadow(0 0 4px rgba(0,0,0,.35));
  animation: loader-rotation var(--time-animation) linear infinite;
}
.converter-loader #loader-shapes g g circle{
  animation: loader-cloud calc(var(--time-animation) * 2) linear infinite;
}
.converter-loader #loader-shapes g g circle:nth-child(2){
  animation-delay: calc((var(--time-animation) * 2) / -3);
}
.converter-loader #loader-shapes g g circle:nth-child(3){
  animation-delay: calc((var(--time-animation) * 2) / -1.5);
}
.converter-loader #loader-lines g line{
  stroke-width: 5;
  transform-origin: 50% 50%;
  rotate: -65deg;
  animation: loader-lines calc(var(--time-animation) / 1.33) linear infinite;
}
@keyframes loader-rotation{
  0%{ transform: rotate(0deg); }
  50%{ transform: rotate(180deg); }
  100%{ transform: rotate(360deg); }
}
@keyframes loader-lines{
  0%{ transform: translateY(-10px); }
  100%{ transform: translateY(8px); }
}
@keyframes loader-cloud{
  0%{ cx: 20; cy: 60; r: 15; }
  50%{ cx: 50; cy: 45; r: 20; }
  100%{ cx: 80; cy: 60; r: 15; }
}

/* Hint bubbles: feature tour on page load */
.hint-bubble{
  position: fixed;
  z-index: 10000;
  left: 0;
  bottom: 0;
  padding: 8px 12px;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.4;
  max-width: 200px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 0) translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.hint-bubble.is-visible{
  opacity: 1;
  transform: translate(-50%, 0) translateY(0);
}
.hint-bubble.is-hiding{
  opacity: 0;
  transform: translate(-50%, 0) translateY(-4px);
}
.hint-bubble::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--line2);
}
/* Left placement: bubble to the left of target, arrow points right */
.hint-bubble[data-placement="left"]{
  transform: translate(0, -50%) translateX(4px);
}
.hint-bubble[data-placement="left"].is-visible{
  transform: translate(0, -50%) translateX(0);
}
.hint-bubble[data-placement="left"].is-hiding{
  transform: translate(0, -50%) translateX(-4px);
}
.hint-bubble[data-placement="left"]::after{
  left: auto;
  right: -6px;
  top: 50%;
  bottom: auto;
  margin-left: 0;
  margin-top: -6px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: var(--line2);
}