:root{
  --bg:#0B0A09;
  --ink:#EDE6D8;
  --dim:#948A7A;
  --gold:#E7B45E;
  --gold-hi:#F6D89B;
  --line:rgba(237,230,216,.16);
  --line-strong:rgba(237,230,216,.34);
  --mono:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,monospace;
  --blur:11px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.5;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- фон: мозаика ---------- */

#mosaic{
  position:fixed;
  /* вылезаем за края, чтобы блюр не давал светлую кайму по периметру */
  inset:calc(var(--blur) * -2);
  width:calc(100% + var(--blur) * 4);
  height:calc(100% + var(--blur) * 4);
  filter:blur(var(--blur));
  z-index:0;
}

.scrim{
  position:fixed;inset:0;z-index:1;
  background:
    radial-gradient(132% 104% at 50% 46%, rgba(11,10,9,.20) 0%, rgba(11,10,9,.50) 56%, rgba(11,10,9,.76) 100%);
}

.grain{
  position:fixed;inset:0;z-index:2;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ---------- каркас ---------- */

.shell{
  position:relative;z-index:3;
  height:100%;
  max-width:560px;
  margin:0 auto;
  padding:clamp(24px,5vh,56px) 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(26px,5vh,48px);
  overflow-y:auto;
}

.micro{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
}
.micro .dot{opacity:.5;margin:0 2px}

/* ---------- шапка ---------- */

.head{display:flex;flex-direction:column;gap:14px}

.wordmark{
  font-size:clamp(38px,11vw,66px);
  font-weight:700;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
  /* тонкая золотая заливка — намёк на то, что будет дальше */
  background:linear-gradient(176deg,var(--gold-hi) 6%,var(--gold) 44%,#A8762D 96%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lede{
  color:var(--dim);
  font-size:13px;
  line-height:1.65;
  max-width:46ch;
}

/* ---------- панель ввода ---------- */

.panel{
  border:1px solid var(--line);
  background:rgba(10,9,8,.55);
  padding:clamp(20px,4vh,30px) clamp(18px,4vw,28px);
  display:flex;
  flex-direction:column;
  gap:22px;
}

.field{position:relative;display:flex;flex-direction:column;gap:9px}

.lbl{transition:color .18s ease}
.lbl .opt{opacity:.55;letter-spacing:.12em}
.field:focus-within .lbl{color:var(--gold)}

.field input{
  appearance:none;
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-strong);
  padding:6px 46px 10px 0;
  color:var(--ink);
  font-family:var(--mono);
  font-size:clamp(19px,5vw,24px);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:border-color .18s ease;
}
.field input::placeholder{color:rgba(148,138,122,.4);letter-spacing:.06em}
.field input:focus{outline:none;border-bottom-color:var(--gold)}

.count{
  position:absolute;
  right:0;bottom:11px;
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--dim);
  opacity:.55;
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}

/* ---------- выбор стиля ---------- */

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  appearance:none;
  padding:9px 13px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--dim);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.chip[aria-checked="true"]{
  color:#14100A;
  background:var(--gold);
  border-color:var(--gold);
}

/* ---------- кнопка ---------- */

.go{
  appearance:none;
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:15px 22px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#14100A;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .1s ease;
}
.go:hover:not(:disabled){background:var(--gold-hi);border-color:var(--gold-hi)}
.go:active:not(:disabled){transform:translateY(1px)}
.go:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.go:disabled{
  background:transparent;
  border-color:var(--line);
  color:var(--dim);
  cursor:not-allowed;
}
.go svg{transition:transform .18s ease}
.go:hover:not(:disabled) svg{transform:translateX(3px)}

.hint{
  font-size:11px;
  letter-spacing:.06em;
  color:var(--dim);
  opacity:.7;
  min-height:1.4em;
}
.hint.ready{color:var(--gold);opacity:1}

/* ---------- подвал ---------- */

.foot{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:2px;
  opacity:.55;
}

@media (max-height:620px){
  .lede{display:none}
  .shell{justify-content:flex-start;gap:22px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* ============================================================
   СЦЕНА
   ============================================================ */

.stage{
  position:fixed;
  inset:0;
  z-index:20;
  background:#070605;
  opacity:0;
  transition:opacity .32s ease;
  display:flex;
  flex-direction:column;
}
.stage.on{opacity:1}

/* Кадр квадратный: так не видно краёв сцены по бокам,
   и картинку удобнее пересылать. */
.viewport{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(8px,2vh,20px);
}
.viewport canvas{
  display:block;
  background:#070605;
}

/* ---------- таймлайн ---------- */

.strip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 clamp(16px,4vw,32px);
  transition:opacity .35s ease;
}

.tbtn{
  appearance:none;
  flex:none;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  font-size:11px;
  line-height:1;
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}
.tbtn:hover{border-color:var(--gold);color:var(--gold)}
.tbtn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

.scrub{
  appearance:none;
  flex:1;
  height:22px;
  background:transparent;
  cursor:pointer;
}
.scrub::-webkit-slider-runnable-track{
  height:2px;
  background:var(--line-strong);
}
.scrub::-moz-range-track{height:2px;background:var(--line-strong)}
.scrub::-webkit-slider-thumb{
  appearance:none;
  width:12px;height:12px;
  margin-top:-5px;
  background:var(--gold);
  border:0;
  border-radius:0;
}
.scrub::-moz-range-thumb{
  width:12px;height:12px;
  background:var(--gold);
  border:0;
  border-radius:0;
}
.scrub:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}

.clock{
  flex:none;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}

/* ---------- панель управления ---------- */

.stage-ui{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:14px clamp(16px,4vw,32px) clamp(16px,3vh,26px);
  transition:opacity .35s ease,transform .35s ease;
}

.stage-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* на проекторе панели мешают — уводим их, пока никто не шевелится */
.stage.idle .stage-ui,
.stage.idle .strip{
  opacity:0;
  pointer-events:none;
}
.stage.idle .stage-ui{transform:translateY(10px)}

/* ---------- скачивание ---------- */

.save{display:flex}

.fmt{
  appearance:none;
  padding:11px 26px 11px 13px;
  border:1px solid var(--line-strong);
  border-right:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  /* своя стрелка: родная в разных браузерах выглядит по-разному */
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 14px) 15px, calc(100% - 9px) 15px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.fmt:hover{border-color:var(--gold);color:var(--gold)}
.fmt:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.fmt option{background:#14120F;color:var(--ink)}

.ghost{
  appearance:none;
  padding:11px 15px;
  border:1px solid var(--line-strong);
  background:rgba(7,6,5,.5);
  color:var(--ink);
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.ghost:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.ghost:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.ghost:disabled{opacity:.4;cursor:not-allowed}

.go.tight{
  margin-top:0;
  padding:11px 17px;
  font-size:11px;
  letter-spacing:.16em;
}

.note{
  position:absolute;
  left:0;right:0;
  top:clamp(10px,2vh,18px);
  text-align:center;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  padding:0 20px;
  pointer-events:none;
}
.note.ok{color:var(--gold)}
.note.warn{color:#E08A6A}

body.staged{overflow:hidden}

@media (max-width:560px){
  .stage-ui{justify-content:center}
  .stage-actions{justify-content:center;width:100%}
  .ghost,.go.tight,.fmt{padding:10px 12px;font-size:10px;letter-spacing:.12em}
  .fmt{padding-right:24px;background-position:calc(100% - 13px) 14px,calc(100% - 8px) 14px}
  .strip .ghost{padding:9px 10px}
  .clock{display:none}
}