/* Surguch refresh — visual layer, safe to remove by deleting this file and its includes. */
:root {
  --sg-gold: #e7c27b;
  --sg-gold-soft: rgba(231,194,123,.18);
  --sg-ink: #16090e;
  --sg-wine: #35111f;
  --sg-paper: #f7efdf;
  --sg-rose: #d34e62;
}

/* Shared atmosphere */
body.sg-home,
body.sg-create,
body.sg-letter {
  isolation: isolate;
}
body.sg-home::before,
body.sg-create::before,
body.sg-letter::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 18%, rgba(221,164,103,.10), transparent 34%),
    radial-gradient(ellipse at 86% 68%, rgba(155,42,72,.13), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 46%, rgba(0,0,0,.10));
}

/* Landing page */
body.sg-home .wrap { max-width: 1120px; }
body.sg-home header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -20px 18px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(246,237,218,.10);
  background: rgba(21,10,15,.76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.sg-home .logo { letter-spacing: .01em; text-shadow: 0 2px 18px rgba(231,194,123,.18); }
body.sg-home .dot { box-shadow: 0 0 0 5px rgba(192,57,77,.10), 0 8px 24px rgba(192,57,77,.28); }
body.sg-home .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0,1.08fr) minmax(300px,.92fr);
  gap: clamp(24px,4vw,54px);
  min-height: 500px;
  margin: 8px 0 28px;
  padding: clamp(26px,5vw,58px);
  border: 1px solid rgba(231,194,123,.23);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 90% 10%, rgba(192,57,77,.19), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 48%),
    rgba(37,13,23,.72);
  box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07);
}
body.sg-home .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 440px;
  height: 440px;
  right: -170px;
  top: -220px;
  border: 1px solid rgba(231,194,123,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(231,194,123,.025), 0 0 0 68px rgba(231,194,123,.018);
}
body.sg-home .hero::after {
  content: "✦";
  position: absolute;
  right: 7%;
  top: 9%;
  color: rgba(231,194,123,.65);
  font-size: 20px;
  text-shadow: 0 0 24px rgba(231,194,123,.6);
  animation: sg-twinkle 3.5s ease-in-out infinite;
}
body.sg-home .hero > div:first-child { position: relative; z-index: 1; }
body.sg-home .hero .eyebrow { color: var(--sg-gold); letter-spacing: .20em; font-size: 12px; }
body.sg-home h1 {
  max-width: 9.5ch;
  font-size: clamp(48px,7.4vw,84px);
  line-height: .94;
  letter-spacing: -.035em;
  text-shadow: 0 12px 42px rgba(0,0,0,.22);
}
body.sg-home .lead { max-width: 31em; font-size: clamp(16px,1.7vw,19px); line-height: 1.65; color: rgba(246,237,218,.88); }
body.sg-home .cta { gap: 12px; }
body.sg-home .btn {
  box-shadow: 0 10px 28px rgba(192,57,77,.20);
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}
body.sg-home .btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(192,57,77,.28); }
body.sg-home .btn.ghost { box-shadow: inset 0 0 0 1px rgba(246,237,218,.04); }
.sg-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.sg-proof span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 11px;
  border: 1px solid rgba(231,194,123,.19);
  border-radius: 30px;
  background: rgba(231,194,123,.055);
  color: rgba(246,237,218,.79);
  font-size: 12px;
  letter-spacing: .015em;
}
.sg-proof span::before { content: "✦"; color: var(--sg-gold); font-size: 10px; }
body.sg-home .demo { min-height: 410px; }
body.sg-home .env {
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 26px 62px rgba(0,0,0,.42), 0 0 0 10px rgba(231,194,123,.035);
}
body.sg-home .seal { filter: drop-shadow(0 7px 12px rgba(0,0,0,.45)); }
body.sg-home .paper {
  border: 1px solid rgba(118,78,51,.20);
  box-shadow: 0 30px 72px rgba(0,0,0,.45), 0 0 0 8px rgba(231,194,123,.035);
}
.sg-sound-demo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 58px auto 0;
  padding: 10px 16px;
  border: 1px solid rgba(231,194,123,.35);
  border-radius: 30px;
  background: rgba(17,7,12,.38);
  color: rgba(246,237,218,.9);
  font: 600 13px system-ui,sans-serif;
  cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s;
}
.sg-sound-demo:hover { background: rgba(231,194,123,.11); border-color: var(--sg-gold); transform: translateY(-2px); }
.sg-sound-demo .sg-bars { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.sg-sound-demo i { display: block; width: 2px; height: 5px; border-radius: 2px; background: var(--sg-gold); }
.sg-sound-demo.is-playing i { animation: sg-bars .7s ease-in-out infinite alternate; }
.sg-sound-demo.is-playing i:nth-child(2) { animation-delay: .16s; }
.sg-sound-demo.is-playing i:nth-child(3) { animation-delay: .31s; }
.sg-track-demo { margin-left: 8px; }
.sg-track-demo.is-playing { border-color: rgba(231,194,123,.72); background: rgba(231,194,123,.12); }
body.sg-home section { position: relative; padding-top: clamp(42px,6vw,66px); padding-bottom: clamp(42px,6vw,66px); }
body.sg-home section h2 { color: #fff4e4; letter-spacing: -.015em; }
body.sg-home section .sub { max-width: 46em; line-height: 1.65; }
body.sg-home .card {
  border-color: rgba(246,237,218,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: 0 12px 34px rgba(0,0,0,.08), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(8px);
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
body.sg-home .card:hover {
  transform: translateY(-5px);
  border-color: rgba(231,194,123,.32);
  background: linear-gradient(145deg, rgba(231,194,123,.085), rgba(255,255,255,.02));
  box-shadow: 0 20px 44px rgba(0,0,0,.17);
}
body.sg-home .steps li::before { text-shadow: 0 0 18px rgba(231,194,123,.2); }
body.sg-home .occ a { border-color: rgba(231,194,123,.24); background: rgba(255,255,255,.025); transition: .2s ease; }
body.sg-home .occ a:hover { border-color: var(--sg-gold); background: rgba(231,194,123,.10); transform: translateY(-2px); }
body.sg-home .final {
  margin: 20px 0 32px;
  padding: 58px 22px;
  border: 1px solid rgba(231,194,123,.2);
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 0, rgba(192,57,77,.18), transparent 66%), rgba(255,255,255,.025);
}
body.sg-home footer { border-color: rgba(231,194,123,.16); }
.sg-reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.sg-reveal.sg-visible { opacity: 1; transform: none; }

/* Letter view */
body.sg-letter { background-color: #150a0f; }
body.sg-letter .stage { position: relative; }
body.sg-letter .stage::before {
  content: "";
  position: absolute;
  width: min(76vw,560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,194,123,.075), transparent 68%);
  pointer-events: none;
}
body.sg-letter .env { filter: drop-shadow(0 28px 38px rgba(0,0,0,.28)); }
body.sg-letter .paper {
  position: relative;
  width: min(94vw,580px);
  margin: 24px auto 112px;
  padding: clamp(27px,5vw,44px) clamp(21px,5vw,38px) 42px;
  border: 1px solid rgba(128,91,58,.28);
  border-radius: 7px;
  background-color: #f8f0e1;
  box-shadow: 0 35px 85px rgba(0,0,0,.40), 0 0 0 8px rgba(231,194,123,.035);
}
body.sg-letter .paper::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(138,106,74,.13);
  border-radius: 3px;
  pointer-events: none;
}
body.sg-letter .hand, body.sg-letter .fin { position: relative; z-index: 1; }
body.sg-letter .pol { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, opacity .45s; }
body.sg-letter .pol:hover { transform: rotate(0) translateY(-5px) scale(1.045); }
body.sg-letter .mute { border-color: rgba(231,194,123,.4); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.sg-audio-player {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(14px);
  width: min(520px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(231,194,123,.28);
  border-radius: 19px;
  color: #f6edda;
  background: linear-gradient(135deg, rgba(57,20,34,.96), rgba(20,9,15,.97));
  box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.sg-audio-player.is-ready { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.sg-audio-play {
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: #28131b; background: linear-gradient(145deg,#f3d99c,#c99b51);
  font: 700 16px system-ui; cursor: pointer;
  box-shadow: 0 5px 18px rgba(231,194,123,.18);
}
.sg-audio-meta { min-width: 0; }
.sg-audio-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 13px system-ui; letter-spacing: .02em; }
.sg-audio-sub { display: block; margin-top: 3px; color: rgba(246,237,218,.6); font: 11px system-ui; }
.sg-audio-tools { display: flex; align-items: center; gap: 8px; }
.sg-audio-vol { width: 66px; accent-color: var(--sg-gold); }
.sg-audio-progress { grid-column: 2 / 4; width: 100%; height: 3px; margin: -3px 0 0; accent-color: var(--sg-gold); cursor: pointer; }
.sg-audio-time { color: rgba(246,237,218,.56); font: 10px ui-monospace,monospace; white-space: nowrap; }
.sg-audio-player button:focus-visible, .sg-audio-player input:focus-visible { outline: 2px solid var(--sg-gold); outline-offset: 3px; }

/* Create page */
body.sg-create { padding-top: 28px; }
body.sg-create main { max-width: 1080px; }
body.sg-create #form > h1, body.sg-create #done h1, body.sg-create #gate h1, body.sg-create #limit h1 {
  font-size: clamp(38px,5vw,54px);
  letter-spacing: -.025em;
  text-shadow: 0 10px 34px rgba(0,0,0,.18);
}
body.sg-create .card {
  border-color: rgba(231,194,123,.15);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  box-shadow: 0 16px 38px rgba(0,0,0,.10), inset 0 1px rgba(255,255,255,.03);
}
body.sg-create .card h2 { color: #fff1df; }
body.sg-create input:not([type=checkbox]):not([type=range]),
body.sg-create textarea, body.sg-create select {
  border: 1px solid rgba(95,56,44,.12);
  box-shadow: inset 0 1px 2px rgba(40,20,16,.06), 0 2px 10px rgba(0,0,0,.05);
  transition: box-shadow .2s, border-color .2s;
}
body.sg-create input:focus, body.sg-create textarea:focus, body.sg-create select:focus {
  outline: none;
  border-color: rgba(192,57,77,.56);
  box-shadow: 0 0 0 3px rgba(192,57,77,.15);
}
body.sg-create .pvbox { border-color: rgba(231,194,123,.35); box-shadow: 0 18px 42px rgba(0,0,0,.24); }
body.sg-create .pvbar { color: rgba(246,237,218,.8); }
body.sg-create .gow { position: sticky; bottom: 10px; z-index: 15; padding: 8px 0; }
body.sg-create #go { box-shadow: 0 12px 36px rgba(192,57,77,.25); }
.sg-music-preview {
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(231,194,123,.20);
  border-radius: 14px;
  background: rgba(231,194,123,.055);
}
.sg-music-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sg-music-preview-title { color: #f7ead3; font: 600 14px system-ui; }
.sg-music-preview-desc { margin: 5px 0 0; color: rgba(246,237,218,.6); font-size: 12px; line-height: 1.5; }
.sg-music-preview-controls { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.sg-music-preview-controls button, .sg-music-use {
  flex: 0 0 auto; border: 1px solid rgba(231,194,123,.35); border-radius: 30px;
  padding: 8px 13px; background: rgba(231,194,123,.12); color: #f6edda;
  font: 600 13px system-ui; cursor: pointer;
}
.sg-music-use { margin-top: 10px; background: rgba(231,194,123,.08); }
.sg-music-use:hover, .sg-music-preview-controls button:hover { background: rgba(231,194,123,.18); }
.sg-music-preview-controls input { min-width: 70px; flex: 1; accent-color: var(--sg-gold); }
.sg-music-preview-status { display: block; min-height: 15px; margin-top: 7px; color: rgba(246,237,218,.55); font-size: 11px; }

@keyframes sg-twinkle { 0%,100%{opacity:.45;transform:scale(.9)} 50%{opacity:1;transform:scale(1.13)} }
@keyframes sg-bars { from{height:4px} to{height:14px} }

@media (max-width: 759px) {
  body.sg-home header { margin-left: -20px; margin-right: -20px; }
  body.sg-home .hero { grid-template-columns: 1fr; min-height: 0; padding: 27px 21px 34px; border-radius: 23px; }
  body.sg-home h1 { max-width: 10ch; font-size: clamp(46px,13vw,68px); }
  body.sg-home .demo { min-height: 330px; }
  .sg-sound-demo { margin-top: 52px; }
  .sg-audio-player { grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; padding: 10px 11px; border-radius: 16px; }
  .sg-audio-play { width: 38px; height: 38px; }
  .sg-audio-vol { width: 48px; }
  body.sg-letter .paper { margin-bottom: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-reveal, .sg-sound-demo, .sg-sound-demo i, body.sg-home .hero::after { transition: none !important; animation: none !important; }
}