@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  font: 16px/1.55 Inter, system-ui, sans-serif;
  color: #213832;
  background: #f7f8f2;
  --accent: #176b57;
  --accent-hover: #105543;
  --muted: #52635c;
  --border: #dce5dc;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 0 0, #e5f2e6, transparent 52%), #f7f8f2;
}
main { width: min(1040px, calc(100% - 2rem)); margin: 0 auto; padding-bottom: 2rem; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.65rem, 3.8vw, 2.55rem); letter-spacing: -.025em; line-height: 1.22; }
button, input, select { font: inherit; }
button, select { color: inherit; cursor: pointer; }
:focus-visible, .file-picker:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
:disabled { opacity: .5; cursor: default; }
[hidden] { display: none !important; }

.brand { display: flex; align-items: center; gap: .7rem; padding: clamp(1rem, 4vw, 2.2rem) 0; font-size: 1.18rem; font-weight: 750; }
.brand-symbol { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--accent); }
.brand-symbol i { width: 0; height: 0; margin-left: .16rem; border-block: .42rem solid transparent; border-left: .68rem solid #fff; }

.welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1rem, 5vw, 4rem);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: #eef5ec;
}
.welcome-copy > p { margin-top: .85rem; color: var(--muted); }
.steps { list-style: none; counter-reset: instruction; padding: 0; margin: 1.65rem 0 0; display: grid; gap: 1rem; }
.steps li { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: .7rem; align-items: center; }
.steps li::before {
  counter-increment: instruction;
  content: counter(instruction);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  color: #145c48;
  background: #d9eadb;
  font-weight: 700;
}
.steps span { color: var(--muted); font-size: .88rem; }

#login {
  display: grid;
  gap: .55rem;
  padding: clamp(1rem, 3vw, 1.8rem);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgb(32 70 47 / 7%);
}
#login h2 { margin-bottom: .6rem; font-size: 1.3rem; }
#login label { font-weight: 650; font-size: .9rem; }
#login input {
  width: 100%;
  min-width: 0;
  padding: .72rem .8rem;
  color: inherit;
  background: #f8faf7;
  border: 1px solid #cddbcf;
  border-radius: .55rem;
}
#login input::placeholder { color: #65746b; }
.password-field { position: relative; }
#login .password-field input { padding-right: 4.3rem; }
#show-password { position: absolute; right: .4rem; top: .35rem; bottom: .35rem; min-width: 3.3rem; padding: 0 .4rem; border: 0; border-radius: .35rem; background: transparent; color: var(--accent); }
#show-password:hover { background: #e4efe6; }
.primary, .file-picker {
  border: 0;
  border-radius: .65rem;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.primary:hover:not(:disabled), .file-picker:hover { background: var(--accent-hover); }
.primary { margin-top: .55rem; padding: .75rem 1rem; }
.help { color: var(--muted); margin-top: .3rem; font-size: .84rem; }

.file-bar {
  display: grid;
  place-items: center;
  gap: 1rem;
  text-align: center;
  padding: clamp(1.5rem, 6vw, 4rem) 1rem;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 12px 32px rgb(32 70 47 / 6%);
}
.chooser-copy > p { margin-top: .75rem; color: var(--muted); }
.folder { position: relative; width: 3.75rem; height: 2.65rem; margin: .35rem auto 1.5rem; border-radius: .35rem .65rem .65rem .65rem; background: #cde8d7; }
.folder::before { content: ""; position: absolute; top: -.4rem; left: 0; width: 1.55rem; height: .65rem; border-radius: .35rem .35rem 0 0; background: #a6d6b9; }
.folder::after { content: ""; position: absolute; inset: .55rem 0 0; border-radius: .4rem; background: #aedcc2; }
.file-picker { position: relative; flex: none; width: min(100%, 22rem); margin-top: .35rem; padding: .95rem 1.3rem; font-size: 1.12rem; cursor: pointer; }
.file-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-help { color: var(--muted); font-size: .86rem; }
.pick-again { display: none; }
#player[data-has-file] .file-bar {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-bottom: .75rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#player[data-has-file] :is(.chooser-copy, .file-help, .pick-new) { display: none; }
#player[data-has-file] .pick-again { display: inline; }
#player[data-has-file] .file-picker { order: 1; width: auto; margin: 0; padding: .55rem .8rem; font-size: .88rem; }

.player-card {
  color-scheme: dark;
  --accent: #a4e2c7;
  --border: #36433f;
  --muted: #c3d0ca;
  color: #f4faf7;
  background: #182520;
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
}
.screen { position: relative; background: #07090e; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; }
.watermark-layer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
  column-gap: 9%;
  position: absolute;
  inset: 0;
  padding: 5% 9%;
  pointer-events: none;
  overflow: hidden;
}
.watermark {
  grid-row: var(--watermark-row);
  grid-column: 1;
  justify-self: start;
  max-width: 100%;
  color: rgb(255 255 255 / 29%);
  font: italic 700 clamp(.55rem, 1.5vw, .86rem)/1.3 "Space Mono", ui-monospace, monospace;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 1px rgb(0 0 0 / 34%);
  transform: rotate(-11deg);
}
.watermark:nth-child(1) { --watermark-row: 1; }
.watermark:nth-child(2) { --watermark-row: 2; }
.watermark:nth-child(3) { --watermark-row: 3; }
.watermark[data-side="right"] { grid-column: 2; justify-self: end; }
.watermark time { display: block; font-size: .83em; }

.controls {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  padding: 1.5rem clamp(.45rem, 2vw, 1.05rem) .7rem;
  background: linear-gradient(transparent, rgb(0 0 0 / 57%) 48%, rgb(0 0 0 / 83%));
  transition: opacity .18s ease;
}
.screen[data-controls-hidden]:not(:has(.controls :focus-visible)) .controls { opacity: 0; pointer-events: none; }
.controls :focus-visible { outline-color: #fff; outline-offset: 2px; }
.controls input[type="range"] {
  --track-height: 3px;
  --thumb-size: 10px;
  --track-rest: rgb(255 255 255 / 36%);
  appearance: none;
  height: 1.25rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.controls input[type="range"]::-webkit-slider-runnable-track {
  height: var(--track-height);
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--range-progress, 0%), var(--track-rest) var(--range-progress, 0%));
}
.controls input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
  border-radius: 50%;
  background: var(--accent);
}
#seek {
  --track-height: 4px;
  --thumb-size: 12px;
  display: block;
  width: 100%;
  margin-bottom: .15rem;
}
.control-bar { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 1.7fr) minmax(max-content, 1fr); align-items: center; gap: .65rem; }
.control-group, .control-middle, .volume-controls { display: flex; align-items: center; gap: .2rem; }
.primary-controls { justify-self: start; }
.secondary-controls { justify-self: end; }
.control-middle { justify-content: center; min-width: 0; }
.video-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 4px #000;
  font-size: .9rem;
  font-weight: 650;
}
.control-bar button {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .35rem;
  background: rgb(16 21 19 / 40%);
  border: 0;
  border-radius: 999px;
}
.control-bar button:hover:not(:disabled) { background: rgb(255 255 255 / 25%); }
.play-icon {
  width: 0;
  height: 0;
  margin-left: 2px;
  border: .48rem solid transparent;
  border-right: 0;
  border-left: .75rem solid currentColor;
}
#play[data-playing="true"] .play-icon {
  width: .72rem;
  height: .9rem;
  margin-left: 0;
  border: 0;
  border-left: .25rem solid currentColor;
  border-right: .25rem solid currentColor;
}
#clock { padding: 0 .35rem; font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 4px #000; }
#volume { --range-progress: 100%; width: clamp(2rem, 7vw, 4.1rem); }
#sound[data-silent="true"] .sound-waves,
#sound:not([data-silent="true"]) .sound-off { display: none; }
#speed {
  max-width: 5rem;
  height: 2.25rem;
  padding: .15rem .3rem .15rem .55rem;
  background: rgb(16 21 19 / 45%);
  border: 0;
  border-radius: 999px;
  font-size: .85rem;
}
#speed option { background: #1a2320; color: #fff; }

.fullscreen-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(currentColor, currentColor) top left / .35rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 2px .35rem no-repeat,
    linear-gradient(currentColor, currentColor) top right / .35rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 2px .35rem no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / .35rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 2px .35rem no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / .35rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 2px .35rem no-repeat;
}
.player-card:fullscreen {
  border: 0;
  border-radius: 0;
  background: #0c1511;
}
.player-card:fullscreen .screen { width: 100%; height: 100%; overflow: hidden; }
.player-card:fullscreen video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
@media (max-width: 670px) {
  .welcome { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .welcome-copy { padding: .6rem .4rem .2rem; }
  .steps { margin-top: 1rem; }
}
@media (max-width: 540px) {
  .controls { padding-top: .4rem; padding-bottom: .4rem; }
  .control-bar { grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .25rem; }
  .control-bar button, #speed { min-width: 1.9rem; height: 1.9rem; }
  .control-middle { grid-column: 1 / -1; grid-row: 2; }
  .video-title { font-size: .78rem; }
  #clock { padding: 0 .15rem; font-size: .73rem; }
  #speed { max-width: 4.2rem; font-size: .77rem; }
}

@media (prefers-reduced-motion: reduce) { .controls { transition: none; } }

.usage-note {
  margin-top: 1.4rem;
  padding: .75rem .9rem;
  border-left: 3px solid #a6c8b5;
  color: var(--muted);
  font-size: .84rem;
}
.usage-note strong { color: #295440; }
.usage-note p { margin-top: .2rem; }
#slider-dialog {
  width: min(26rem, calc(100% - 1.5rem));
  padding: clamp(1rem, 4vw, 1.4rem);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  color: inherit;
  background: #fff;
  box-shadow: 0 20px 70px rgb(14 32 25 / 28%);
}
#slider-dialog::backdrop { background: rgb(14 32 25 / 54%); }
.slider-heading, .slider-footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.slider-heading h2 { font-size: 1.2rem; }
.icon-close {
  position: relative;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: #eff4f0;
}
.icon-close:hover:not(:disabled) { background: #e2ece4; }
.icon-close::before, .icon-close::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: .8rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.icon-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
#slider-instructions { margin: .35rem 0 .85rem; color: var(--muted); font-size: .9rem; }
.slider-picture { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .65rem; background: #eaf2ec; }
#slider-background { display: block; width: 100%; height: auto; }
#slider-piece { position: absolute; height: auto; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 38%)); }
#slider-range {
  --puzzle-thumb: 2.5rem;
  appearance: none;
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: .65rem 0 .5rem;
  background: transparent;
  cursor: grab;
  touch-action: none;
}
#slider-range:active { cursor: grabbing; }
#slider-range::-webkit-slider-runnable-track { height: 2.25rem; border-radius: 999px; background: #e4eee7; }
#slider-range::-webkit-slider-thumb {
  appearance: none;
  width: var(--puzzle-thumb);
  height: var(--puzzle-thumb);
  margin-top: -.125rem;
  border: 1px solid #c7ddd0;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 5px) center / 12px 13px no-repeat, #fff;
  box-shadow: 0 2px 5px rgb(28 71 51 / 20%);
}
.slider-footer { padding-top: .55rem; border-top: 1px solid var(--border); }
#slider-refresh { flex: none; padding: .25rem .45rem; border: 0; border-radius: .3rem; background: #eff4f0; color: var(--accent); font-size: .82rem; }
#slider-help, .form-message { color: var(--muted); font-size: .82rem; }
.form-message { color: #8a3d2c; }
.form-message:empty { display: none; }
.screen-status {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .75rem;
  pointer-events: none;
}
#status {
  margin: 0;
  max-width: min(95%, 30rem);
  padding: .55rem 1rem;
  border-radius: .6rem;
  text-align: center;
  color: #fff;
  background: rgb(10 22 18 / 86%);
}
#status:empty { display: none; }
.watch-notice {
  position: absolute;
  z-index: 1;
  top: 5%;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 88%;
  padding: .5rem .85rem;
  border-radius: .6rem;
  background: rgb(11 28 20 / 83%);
  color: #f3faf6;
  text-align: center;
  font-size: clamp(.73rem, 1.8vw, .88rem);
  pointer-events: none;
}