/* PSD to Timelapse tool page. Everything is scoped under .pt so other pages are not touched.
   Look = PixelRec Ultra: black, one blue horizon from the bottom, glass cards, mono labels. */

.pt {
  --pt-card: rgba(255, 255, 255, .035);
  --pt-card-hi: rgba(255, 255, 255, .06);
  --pt-line: rgba(255, 255, 255, .08);
  --pt-line-hi: rgba(255, 255, 255, .14);
  --pt-text: #f3f6fc;
  --pt-muted: #a3acbe;
  --pt-dim: #6d7689;
  --pt-blue: #2e7df6;
  --pt-blue-2: #5b9bff;
  --pt-sky: #9cc4ff;
  --pt-green: #35d07f;
  --pt-head: "Sora", "Inter", system-ui, sans-serif;
  --pt-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color: var(--pt-text);
}
.pt *, .pt *::before, .pt *::after { box-sizing: border-box; }
.pt-sec { padding: 0 24px; position: relative; }
.pt-wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; }
.pt-cap { font: 500 13px/1.3 var(--pt-mono); letter-spacing: .02em; color: var(--pt-sky); }
.pt-cap.is-dim { color: var(--pt-dim); }
.pt h1, .pt h2 { font-family: var(--pt-head); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin: 0; }
.pt-lead { color: var(--pt-muted); font-size: 18px; line-height: 1.6; margin: 0; }
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 26px; border: 1px solid transparent; cursor: pointer;
  font: 600 15.5px/1 "Inter", system-ui, sans-serif; text-decoration: none; white-space: nowrap; color: var(--pt-text);
}
.pt-btn-blue { background: linear-gradient(180deg, #3d8bff, #2a6fe0); color: #fff; border-color: rgba(160, 200, 255, .35); }
.pt-btn-blue:hover { background: linear-gradient(180deg, #4a93ff, #2e78ee); }
.pt-btn-blue[disabled] { opacity: .75; cursor: progress; }
.pt-btn-glass { background: var(--pt-card); border-color: var(--pt-line-hi); }
.pt-btn-glass:hover { background: var(--pt-card-hi); }
.pt-btn-sm { height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14px; }
.pt-link { background: none; border: 0; padding: 0; color: var(--pt-muted); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pt-link:hover { color: var(--pt-text); }

/* one blue horizon from the bottom */
.pt-horizon { --arc: 400px; position: absolute; left: 0; right: 0; bottom: 0; height: 520px; overflow: hidden; pointer-events: none; z-index: 0; }
.pt-horizon::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: radial-gradient(46% 300px at 50% var(--arc), rgba(46, 125, 246, .28), rgba(46, 125, 246, .07) 55%, transparent 80%); }
.pt-horizon::after { content: ''; position: absolute; left: 50%; top: var(--arc); width: 3200px; height: 3200px; transform: translateX(-50%); border-radius: 50%; background: #05060a; box-shadow: 0 -1px 0 rgba(156, 196, 255, .55); }

/* ---------- Top of the page ---------- */
.pt-hero { padding-top: 40px; padding-bottom: 150px; overflow: hidden; }
.pt-hero-grid { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 40px; align-items: center; }
.pt-hero h1 { font-size: clamp(40px, 5vw, 60px); margin: 16px 0 20px; }
.pt-hero .pt-lead { max-width: 480px; }
.pt-drop {
  margin-top: 32px; border: 1.5px dashed rgba(156, 196, 255, .38); border-radius: 22px; background: rgba(46, 125, 246, .05);
  padding: 24px 26px; display: flex; align-items: center; gap: 20px; cursor: pointer; transition: background .2s, border-color .2s;
}
.pt-drop:hover, .pt-drop.is-over { background: rgba(46, 125, 246, .1); border-color: rgba(156, 196, 255, .7); }
.pt-drop-ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(46, 125, 246, .16); display: grid; place-items: center; flex: none; }
.pt-drop b { display: block; font-weight: 600; font-size: 17px; }
.pt-drop span { color: var(--pt-muted); font-size: 14px; }
.pt-drop .pt-btn { margin-left: auto; }
.pt-under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 16px; color: var(--pt-dim); font: 500 12.5px var(--pt-mono); }
.pt-under i { font-style: normal; color: var(--pt-sky); margin-right: 6px; }
.pt-under .pt-link { font: 500 12.5px var(--pt-mono); color: var(--pt-sky); }
.pt-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.pt-stackbox { position: relative; height: 560px; perspective: 2200px; }
.pt-stack { position: absolute; left: 50%; top: 50%; width: 300px; height: 492px; margin: -200px 0 0 -150px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-34deg); }
.pt-sheet { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; transform-style: preserve-3d; animation: pt-float 7s ease-in-out infinite; }
.pt-sheet img { display: block; width: 100%; height: 100%; border-radius: 3px; }
.pt-sheet:nth-child(1) { --z: 0px; }
.pt-sheet:nth-child(2) { --z: 110px; animation-delay: -.4s; }
.pt-sheet:nth-child(3) { --z: 220px; animation-delay: -.8s; }
@keyframes pt-float { 0%, 100% { transform: translateZ(var(--z)); } 50% { transform: translateZ(calc(var(--z) * 1.12 + 6px)); } }
.pt-sheet-tag { position: absolute; left: 100%; top: 10px; margin-left: 12px; white-space: nowrap; font: 500 12px var(--pt-mono); color: var(--pt-muted); }
.pt-stackcap { position: absolute; right: 0; bottom: 0; text-align: right; font-size: 13.5px; color: var(--pt-muted); }

/* ---------- The tool ---------- */
.pt-tool { padding-top: 10px; padding-bottom: 90px; }
.pt-tool[hidden], .pt-done[hidden] { display: none; }
.pt-filebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 18px; border: 1px solid var(--pt-line-hi); background: var(--pt-card); border-radius: 16px; }
.pt-filebar-ic { width: 38px; height: 38px; border-radius: 10px; background: #0f1e3a; color: var(--pt-sky); display: grid; place-items: center; font: 600 11px var(--pt-mono); flex: none; }
.pt-filebar b { font-weight: 600; word-break: break-all; }
.pt-filebar .pt-meta { color: var(--pt-muted); font-size: 14px; }
.pt-filebar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.pt-ok { color: var(--pt-green); font: 500 12.5px var(--pt-mono); }
.pt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; margin-top: 18px; }
.pt-player { border: 1px solid var(--pt-line-hi); border-radius: 18px; background: #090b12; padding: 14px; }
.pt-stage { position: relative; height: 520px; border-radius: 10px; background: #05060a; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pt-stage canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 6px; }
.pt-badge { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 13px; background: rgba(5, 6, 10, .74); font: 500 12px var(--pt-mono); color: var(--pt-text); max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-busy { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #05060a; color: var(--pt-muted); font-size: 15px; text-align: center; padding: 20px; }
.pt-busy[hidden] { display: none; }
.pt-bar { width: 240px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pt-bar i { display: block; height: 100%; width: 0; background: var(--pt-blue); }
.pt-busy.is-error { color: var(--pt-text); }
.pt-busy.is-error .pt-bar { display: none; }
.pt-ctrl { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pt-play { width: 38px; height: 38px; border-radius: 19px; background: #fff; border: 0; display: grid; place-items: center; flex: none; cursor: pointer; }
.pt-time { font: 500 12.5px var(--pt-mono); color: var(--pt-muted); white-space: nowrap; }
.pt-strip { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; position: relative; cursor: pointer; height: 34px; }
.pt-strip canvas { width: 100%; height: 34px; object-fit: cover; border-radius: 3px; opacity: .5; display: block; background: #000; }
.pt-strip canvas.is-past { opacity: 1; }
.pt-head { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; border-radius: 1px; left: 0; pointer-events: none; }
.pt-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.pt-count { border: 1px solid var(--pt-line); border-radius: 14px; padding: 10px 14px; background: rgba(255, 255, 255, .02); }
.pt-count b { display: block; font: 700 22px/1.3 var(--pt-head); letter-spacing: -.02em; }
.pt-count span { font: 500 11.5px var(--pt-mono); color: var(--pt-dim); }

.pt-panel { border: 1px solid var(--pt-line-hi); border-radius: 18px; background: var(--pt-card); padding: 18px; display: flex; flex-direction: column; gap: 16px; align-self: start; }
.pt-panel h3 { font: 500 12px var(--pt-mono); color: var(--pt-dim); margin: 0 0 8px; letter-spacing: .02em; }
.pt-styles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pt-style { border: 1px solid var(--pt-line-hi); border-radius: 12px; padding: 7px; font: 500 12.5px/1.3 "Inter", system-ui, sans-serif; text-align: center; color: var(--pt-muted); background: none; cursor: pointer; }
.pt-style:hover { color: var(--pt-text); }
.pt-style.is-on { border-color: var(--pt-blue); background: rgba(46, 125, 246, .12); color: var(--pt-text); }
.pt-style-pic { display: block; height: 46px; border-radius: 6px; overflow: hidden; position: relative; margin-bottom: 6px; background: #000; }
.pt-style-pic canvas { width: 100%; height: 100%; display: block; }
.pt-seg { display: flex; border: 1px solid var(--pt-line-hi); border-radius: 12px; padding: 3px; gap: 3px; }
.pt-seg button { flex: 1; text-align: center; padding: 6px 0; border-radius: 9px; font: 500 13.5px/1.3 "Inter", system-ui, sans-serif; color: var(--pt-muted); background: none; border: 0; cursor: pointer; }
.pt-seg button:hover { color: var(--pt-text); }
.pt-seg button.is-on { background: rgba(255, 255, 255, .1); color: var(--pt-text); }
.pt-seg small { display: block; font: 500 10.5px var(--pt-mono); color: var(--pt-dim); }
.pt-panel .pt-btn { width: 100%; }
.pt-note { font-size: 12.5px; color: var(--pt-dim); text-align: center; margin: -6px 0 0; }
.pt-hint { font-size: 13px; color: var(--pt-muted); line-height: 1.5; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 181, 71, .08); border: 1px solid rgba(255, 181, 71, .2); }
.pt-hint[hidden] { display: none; }

/* ---------- Done ---------- */
.pt-done { padding-top: 30px; padding-bottom: 180px; overflow: hidden; }
.pt-done-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 60px; align-items: start; }
.pt-phone { border-radius: 34px; border: 1px solid var(--pt-line-hi); background: #0b0d14; padding: 10px; }
.pt-phone video { display: block; width: 100%; border-radius: 26px; background: #000; }
.pt-saved { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--pt-muted); }
.pt-saved span { overflow-wrap: anywhere; min-width: 0; }
.pt-saved i { width: 8px; height: 8px; border-radius: 4px; background: var(--pt-green); flex: none; align-self: center; }
.pt-saved b { color: var(--pt-text); font-weight: 600; }
.pt-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pt-done h2 { font-size: clamp(32px, 4vw, 50px); margin: 14px 0 16px; }
.pt-done h2 span { color: var(--pt-blue-2); }
.pt-done .pt-lead { max-width: 600px; }
.pt-cmp { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.pt-row-lab { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pt-row-lab b { font-weight: 600; font-size: 15px; }
.pt-row-lab span { font: 500 12px var(--pt-mono); color: var(--pt-dim); text-align: right; }
.pt-frames { display: flex; gap: 4px; overflow: hidden; }
.pt-frames canvas, .pt-frames img { height: 92px; width: auto; border-radius: 5px; flex: none; display: block; }
.pt-frames.is-dense { gap: 3px; }
.pt-frames.is-dense img { height: 98px; }
.pt-lost { width: 46px; flex: none; display: grid; place-items: center; color: var(--pt-dim); font: 500 11px/1.3 var(--pt-mono); border: 1px dashed var(--pt-line-hi); border-radius: 5px; text-align: center; height: 92px; }
.pt-buy { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.pt-buy p { color: var(--pt-muted); font-size: 14px; line-height: 1.5; margin: 0; }

/* ---------- Info sections ---------- */
.pt-info { padding-top: 40px; padding-bottom: 40px; }
.pt-info h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 12px 0 26px; }
.pt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pt-card { border: 1px solid var(--pt-line); border-radius: 18px; background: var(--pt-card); padding: 22px; }
.pt-card .pt-cap { margin-bottom: 10px; }
.pt-card h3 { font: 600 18px/1.3 "Inter", system-ui, sans-serif; margin: 0 0 8px; letter-spacing: -.01em; }
.pt-card p { color: var(--pt-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-list li { position: relative; padding-left: 26px; color: var(--pt-muted); font-size: 15px; line-height: 1.55; }
.pt-list li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 9px; height: 9px; border-radius: 5px; background: var(--pt-green); }
.pt-list.is-no li::before { background: transparent; border: 1.5px solid var(--pt-dim); }
.pt-list b { color: var(--pt-text); font-weight: 600; }

/* ---------- Phones and small screens ---------- */
@media (max-width: 980px) {
  .pt-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-stackbox { height: 460px; margin-top: 20px; }
  .pt-stack { margin-top: -150px; transform: rotateX(56deg) rotateZ(-34deg) scale(.75); }
  .pt-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-done-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pt-phone { max-width: 330px; }
  .pt-steps, .pt-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pt-sec { padding-left: 16px; padding-right: 16px; }
  .pt-hero { padding-top: 24px; padding-bottom: 110px; }
  .pt-drop { flex-wrap: wrap; padding: 20px; }
  .pt-drop .pt-btn { margin-left: 0; width: 100%; }
  .pt-stackbox { height: 340px; margin-top: 30px; }
  .pt-stack { transform: rotateX(56deg) rotateZ(-34deg) scale(.52); margin-top: -170px; }
  .pt-stackcap { bottom: -6px; }
  .pt-sheet-tag { display: none; }
  .pt-stage { height: 420px; }
  .pt-counts { grid-template-columns: repeat(2, 1fr); }
  .pt-strip { grid-template-columns: repeat(6, 1fr); }
  .pt-strip canvas:nth-child(2n) { display: none; }
  .pt-filebar-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .pt-frames canvas, .pt-frames img { height: 64px; }
  .pt-frames.is-dense img { height: 68px; }
  .pt-lost { height: 64px; width: 38px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pt-sheet { animation: none; transform: translateZ(var(--z)); } }