@font-face { font-family:'Onest';src:url('/fonts/Onest-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap; }
@font-face { font-family:'Onest';src:url('/fonts/Onest-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap; }
@font-face { font-family:'Onest';src:url('/fonts/Onest-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap; }
@font-face { font-family:'Onest';src:url('/fonts/Onest-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap; }
@font-face { font-family:'Onest';src:url('/fonts/Onest-800.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap; }

:root {
  --bg-deep: #003f40;
  --bg-mid: #04504f;
  --bg-panel: #06504f;
  --accent: #00a6a0;
  --accent-strong: #009b9a;
  --accent-soft: rgba(0, 166, 160, 0.18);
  --text-main: #eafffb;
  --text-dim: #9fd8d3;
  --border: rgba(0, 166, 160, 0.4);
  --danger: #ff6b6b;
  --radius: 16px;
  --radius-pill: 999px;
  font-size: 16px;
}

/* ---------- 2026 public glass UI ---------- */
.public-home,
.public-tutorial {
  --glass-fill: rgba(201, 255, 246, 0.075);
  --glass-fill-hover: rgba(201, 255, 246, 0.13);
  --glass-border: rgba(154, 255, 237, 0.16);
  --glass-border-strong: rgba(154, 255, 237, 0.3);
  --public-accent: #53f4d9;
  background: radial-gradient(circle at 104% 42%, rgba(0,168,154,.34), transparent 42%), radial-gradient(circle at -12% -8%, rgba(35,187,174,.18), transparent 34%), linear-gradient(145deg,#011b1d 0%,#002d2e 58%,#004e4a 100%);
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.public-home .page,.public-tutorial .page { width:100%;align-items:stretch;max-width:960px;margin:0 auto;padding:32px 30px 64px; }
.public-home .site-header,.public-tutorial .site-header { max-width:none;margin:0 0 28px; }
.public-home .site-title { color:#bafff4;font-size:.86rem;letter-spacing:.14em;text-shadow:none; }
.public-home .site-title,
.header-badge,
.public-tutorial .header-link,
.tutorial-duration,
.tutorial-eyebrow,
.public-home .tile-platforms,
.copy-content small,
.copy-action {
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.header-badge,.public-tutorial .header-link { display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--glass-border);border-radius:999px;background:rgba(196,255,246,.07);color:#bafff4;font-size:.7rem;letter-spacing:.04em;text-decoration:none;backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%); }
.home-hero { margin-bottom:28px; }
.home-hero h1,.tutorial-hero h1 { margin:0;color:#effffb;font-size:clamp(2rem,5vw,3rem);line-height:1.08;letter-spacing:-.035em; }
.home-hero p,.tutorial-hero p { max-width:620px;margin:14px 0 0;color:#a9c9c5;font-size:1rem;line-height:1.55; }
.public-home .tile-panel { max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0; }
.public-home .tile-btn { min-height:142px;padding:20px;flex-direction:row;justify-content:space-between;align-items:flex-start;border:1px solid var(--glass-border);border-radius:22px;background:var(--glass-fill);box-shadow:0 18px 44px rgba(0,14,15,.16),inset 0 1px 0 rgba(255,255,255,.025);text-align:left;backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%); }
.public-home .tile-btn:hover,.public-home .tile-btn:focus-visible { transform:translateY(-3px);border-color:var(--glass-border-strong);background:var(--glass-fill-hover);box-shadow:0 22px 52px rgba(0,14,15,.23),0 0 30px rgba(0,211,189,.08);outline:none; }
.tile-label { display:flex;flex-direction:column;gap:26px; }
.tile-label strong { color:#effffb;font-size:1rem;letter-spacing:0; }
.public-home .tile-platforms { color:var(--public-accent);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase; }
.tile-arrow { color:var(--public-accent);font-size:1.4rem;line-height:1; }
.public-home .site-footer { opacity:.48; }
.public-tutorial .page { max-width:760px; }
.tutorial-duration { color:#8eb5b0;font-size:.75rem; }
.tutorial-hero { margin-bottom:32px; }
.tutorial-eyebrow { margin-bottom:10px;color:var(--public-accent);font-size:.72rem;font-weight:700;letter-spacing:.11em; }
.public-tutorial .tile-content { max-width:none;gap:20px; }
.public-tutorial .block-text,.public-tutorial .block-copy { border:1px solid var(--glass-border);border-radius:22px;background:var(--glass-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%); }
.public-tutorial .block-text { padding:20px; }
.public-tutorial .block-text .ql-editor { color:#eafff9;font-size:1rem;line-height:1.7; }
.public-tutorial .block-video video,.public-tutorial .block-video iframe,.public-tutorial .block-image img { border:1px solid var(--glass-border);border-radius:22px;background:rgba(0,20,21,.42);box-shadow:0 22px 56px rgba(0,13,14,.28); }
.public-tutorial .block-copy { width:100%;min-height:76px;justify-content:space-between;padding:12px 12px 12px 18px;font-family:inherit;text-align:left; }
.copy-content { min-width:0;display:flex;flex-direction:column;gap:4px; }
.copy-content small { color:#7fc8bc;font-size:.58rem;font-weight:700;letter-spacing:.08em; }
.copy-content small.domain-letter-note,.domain-letter-note { color:#67ff99;font-size:.78em;font-weight:850;letter-spacing:normal;text-decoration:underline;text-decoration-color:rgba(103,255,153,.55);text-underline-offset:2px; }
.public-tutorial .domain-url-check { color:#67ff99;font-weight:900; }
.copy-content strong { overflow-wrap:anywhere;color:#effffb;font-size:.92rem; }
.copy-action { flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:16px;background:rgba(83,244,217,.16);color:#c8fff6;font-size:.72rem;font-weight:700; }
.public-tutorial .toast { bottom:max(22px,env(safe-area-inset-bottom));background:rgba(205,255,247,.94);color:#003c38;box-shadow:0 14px 40px rgba(0,12,13,.35);backdrop-filter:blur(18px); }
@media (max-width:720px) {
  .public-home .page,.public-tutorial .page { padding:max(24px,env(safe-area-inset-top)) 16px max(42px,env(safe-area-inset-bottom)); }
  .public-home .site-header,.public-tutorial .site-header { margin-bottom:24px; }
  .home-hero { margin-bottom:20px; }
  .home-hero h1,.tutorial-hero h1 { font-size:2.05rem; }
  .home-hero p,.tutorial-hero p { font-size:.92rem; }
  .public-home .tile-panel { display:flex;gap:12px; }
  .public-home .tile-btn { min-height:64px;padding:12px 14px 12px 17px;align-items:center;border-radius:20px; }
  .tile-label { gap:2px; }
  .tile-label strong { font-size:1rem; }
  .public-tutorial .block-copy { align-items:center; }
}
@media (prefers-reduced-motion:reduce) { .public-home .tile-btn,.toast { transition:none; } }

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html { background:#011b1d; }
body.public-home,body.public-tutorial { min-height:100vh;min-height:100dvh;overscroll-behavior-y:none; }

body {
  background: radial-gradient(circle at 50% -10%, #0a6b68 0%, var(--bg-deep) 55%, #002829 100%);
  background-attachment: fixed;
  color: var(--text-main);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

a {
  color: var(--accent);
}

/* ---------- Layout shells ---------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 64px;
}

.site-header {
  width: 100%;
  max-width: 720px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.site-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 18px var(--accent-soft);
}

.header-link {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: 0.2s;
}

.header-link:hover {
  color: var(--text-main);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-soft);
}

/* ---------- Tile list panel ---------- */

.tile-panel {
  width: 100%;
  max-width: 480px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tile-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: rgba(0, 166, 160, 0.08);
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.tile-btn:hover,
.tile-btn:focus-visible {
  transform: translateY(-2px);
  background: rgba(0, 166, 160, 0.14);
  border-color: var(--accent);
  box-shadow: 0 0 22px var(--accent-soft);
}

.tile-platforms {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.empty-hint {
  text-align: center;
  color: var(--text-dim);
  padding: 12px;
}

/* ---------- Tile content page ---------- */

.tile-content {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.back-link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.back-link:hover {
  color: var(--accent);
}

.block {
  border-radius: var(--radius);
}

.block-text {
  background: rgba(0, 20, 21, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}

.block-text .ql-editor {
  padding: 0;
  color: var(--text-main);
  font-size: 1rem;
}

.block-image img {
  max-width: 100%;
  border-radius: var(--radius);
  display: block;
  margin: 0 auto;
}

.block-video video,
.block-video iframe {
  max-width: 100%;
  border-radius: var(--radius);
  display: block;
  margin: 0 auto;
  border: none;
  aspect-ratio: 16 / 9;
}

.block-copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  cursor: pointer;
  font-family: 'Consolas', monospace;
  color: var(--text-main);
  transition: 0.15s;
}

.block-copy:hover {
  background: rgba(0, 166, 160, 0.28);
  box-shadow: 0 0 16px var(--accent-soft);
}

.block-copy .copy-icon {
  opacity: 0.7;
  font-size: 0.9rem;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent-strong);
  color: #002829;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Forms / admin ---------- */

.panel {
  width: 100%;
  max-width: 480px;
  background: rgba(0, 20, 21, 0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel h1,
.panel h2 {
  margin: 0 0 6px;
}

label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

input[type='text'],
input[type='password'],
input[type='url'],
textarea,
select {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-main);
  font-size: 0.95rem;
  font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

button {
  cursor: pointer;
  font-family: inherit;
}

.btn {
  background: var(--accent);
  color: #00201f;
  border: none;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  transition: 0.15s;
}

.btn:hover {
  background: var(--accent-strong);
  box-shadow: 0 0 16px var(--accent-soft);
}

.btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
}

.btn.secondary:hover {
  border-color: var(--accent);
}

.btn.danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.btn.danger:hover {
  background: rgba(255, 107, 107, 0.12);
}

.btn.small {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.error-msg {
  color: var(--danger);
  font-size: 0.85rem;
  min-height: 1.2em;
}

.row {
  display: flex;
  gap: 10px;
}

.row.between {
  justify-content: space-between;
  align-items: center;
}

.checkbox-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-main);
  font-size: 0.9rem;
}

/* ---------- Admin dashboard list ---------- */

.admin-shell {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 20, 21, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.tile-row .name {
  font-weight: 600;
  flex: 1;
}

.tile-row .platforms {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.order-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-btns button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 4px;
  width: 24px;
  height: 20px;
  font-size: 0.7rem;
  line-height: 1;
}

.order-btns button:hover {
  border-color: var(--accent);
}

/* ---------- WYSIWYG editor (Teletype-style) ---------- */

.editor-shell {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wysiwyg-title {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 2rem;
  font-weight: 700;
  padding: 6px 2px;
  margin-bottom: 6px;
}

.wysiwyg-title::placeholder {
  color: var(--text-dim);
  opacity: 0.5;
}

.wysiwyg-title:focus {
  outline: none;
}

.wysiwyg-body {
  display: flex;
  flex-direction: column;
}

.editor-block {
  position: relative;
  padding: 2px 46px 2px 2px;
}

.editor-block-controls {
  position: absolute;
  top: 4px;
  right: 0;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.editor-block:hover .editor-block-controls,
.editor-block:focus-within .editor-block-controls {
  opacity: 1;
  pointer-events: auto;
}

.eb-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(0, 20, 21, 0.6);
  color: var(--text-dim);
  font-size: 0.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eb-btn:hover {
  border-color: var(--accent);
  color: var(--text-main);
}

.eb-btn.eb-danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.insert-line {
  position: relative;
  height: 26px;
  display: flex;
  align-items: center;
}

.insert-plus {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(0, 20, 21, 0.5);
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.insert-line:hover .insert-plus,
.insert-line.always-visible .insert-plus,
.insert-line.menu-open .insert-plus {
  opacity: 0.7;
}

.insert-plus:hover {
  opacity: 1 !important;
  border-color: var(--accent);
  color: var(--accent);
}

.insert-menu {
  position: absolute;
  left: 34px;
  top: 0;
  display: flex;
  gap: 6px;
  background: rgba(0, 20, 21, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

.insert-menu button {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.insert-menu button:hover {
  background: var(--accent-soft);
  color: var(--text-main);
}

.wysiwyg-empty {
  color: var(--text-dim);
  opacity: 0.6;
  cursor: text;
  padding: 6px 2px;
}

.editor-block .block-text,
.editor-block .block-image,
.editor-block .block-copy,
.editor-block .block-video {
  margin: 0;
}

.editor-block .ql-container.ql-bubble {
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 1rem;
}

.editor-block .ql-editor {
  padding: 0;
}

.editor-block .ql-editor.ql-blank::before {
  color: var(--text-dim);
  opacity: 0.55;
  font-style: normal;
  left: 0;
}

.ql-bubble .ql-tooltip {
  background: #04302f;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ql-bubble .ql-tooltip-arrow {
  border-bottom-color: #04302f;
}

.ql-bubble .ql-stroke {
  stroke: var(--text-dim);
}

.ql-bubble .ql-fill {
  fill: var(--text-dim);
}

.ql-bubble .ql-picker {
  color: var(--text-dim);
}

.ql-bubble .ql-active .ql-stroke {
  stroke: var(--accent);
}

.ql-bubble .ql-active .ql-fill {
  fill: var(--accent);
}

.ql-bubble .ql-toolbar button:hover .ql-stroke {
  stroke: var(--accent);
}

.editor-block .block-image,
.editor-block .block-video {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editor-block .upload-drop {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
}

.editor-block .upload-drop:hover {
  border-color: var(--accent);
  color: var(--text-main);
}

.editor-block .media-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.editor-block .media-toolbar input[type='text'],
.editor-block .media-toolbar input[type='url'] {
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-main);
  font-size: 0.8rem;
}

.editor-block .media-toolbar input[type='range'] {
  width: 100px;
}

.editor-block .block-copy {
  border-style: solid;
  cursor: default;
}

.editor-block .copy-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.editor-block .copy-fields input,
.editor-block .copy-fields textarea {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: inherit;
  padding: 0;
  resize: vertical;
}

.editor-block .copy-fields input {
  font-weight: 600;
}

.editor-block .copy-fields textarea {
  font-family: 'Consolas', monospace;
  font-size: 0.85rem;
  color: var(--text-dim);
  min-height: 40px;
}

.editor-block .copy-fields input:focus,
.editor-block .copy-fields textarea:focus {
  outline: none;
}

.save-indicator {
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.2s;
  position: absolute;
  top: 4px;
  right: 40px;
}

.save-indicator.show {
  opacity: 0.6;
}

footer.site-footer {
  margin-top: auto;
  padding-top: 40px;
  font-size: 0.75rem;
  color: var(--text-dim);
  opacity: 0.6;
}

@media (max-width: 560px) {
  .tile-panel {
    padding: 8px 4px;
    gap: 14px;
  }

  .tile-btn {
    font-size: 1rem;
    padding: 15px 16px;
  }

  .site-title {
    font-size: 1.15rem;
  }

  .panel,
  .admin-shell,
  .editor-shell,
  .tile-content {
    max-width: 100%;
  }
}

/* ---------- Refined liquid glass public theme ---------- */
.public-home,
.public-tutorial {
  position: relative;
  overflow-x: hidden;
  background:
    linear-gradient(135deg, #00140e 0%, #063723 44%, #002219 72%, #064a2f 100%);
  background-size: 220% 220%;
  animation: background-drift 18s ease-in-out infinite alternate;
  isolation: isolate;
}

.public-home::before,
.public-home::after,
.public-tutorial::before,
.public-tutorial::after {
  position: fixed;
  z-index: 0;
  width: min(78vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  content: '';
  pointer-events: none;
  filter: blur(8px);
  opacity: .82;
  will-change: transform;
}

.public-home .page,
.public-tutorial .page {
  position: relative;
  z-index: 1;
}

.public-home::before,
.public-tutorial::before {
  top: -38vw;
  right: -24vw;
  background: radial-gradient(circle, rgba(39, 207, 123, .38) 0%, rgba(10, 111, 68, .2) 38%, transparent 70%);
  animation: glass-orbit-a 16s ease-in-out infinite alternate;
}

.public-home::after,
.public-tutorial::after {
  bottom: -42vw;
  left: -28vw;
  background: radial-gradient(circle, rgba(44, 169, 102, .18) 0%, rgba(5, 116, 69, .16) 42%, transparent 70%);
  animation: glass-orbit-b 20s ease-in-out infinite alternate;
}

.public-home .page::before,
.public-tutorial .page::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.025), transparent 28%),
    radial-gradient(circle at 50% 115%, rgba(53, 210, 128, .12), transparent 46%);
}

.public-home .site-header,
.public-tutorial .site-header,
.home-hero,
.tutorial-hero,
.public-home .tile-btn,
.public-tutorial .block {
  animation: glass-rise .7s cubic-bezier(.2,.8,.2,1) both;
}

.home-hero { animation-delay: .06s; }
.public-home .tile-btn:nth-child(1),.public-tutorial .block:nth-child(1) { animation-delay: .11s; }
.public-home .tile-btn:nth-child(2),.public-tutorial .block:nth-child(2) { animation-delay: .16s; }
.public-home .tile-btn:nth-child(3),.public-tutorial .block:nth-child(3) { animation-delay: .21s; }
.public-home .tile-btn:nth-child(4),.public-tutorial .block:nth-child(4) { animation-delay: .26s; }
.public-home .tile-btn:nth-child(5),.public-tutorial .block:nth-child(5) { animation-delay: .31s; }

.header-badge,
.public-tutorial .header-link {
  border-color: rgba(213,255,248,.11);
  background: linear-gradient(135deg, rgba(221,255,250,.11), rgba(115,255,234,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 28px rgba(0,8,9,.14);
}

.public-home .tile-btn {
  position: relative;
  overflow: hidden;
  border-color: rgba(205,255,247,.105);
  background:
    linear-gradient(135deg, rgba(227,255,250,.115) 0%, rgba(122,255,232,.047) 48%, rgba(255,255,255,.025) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,71,68,.18),
    0 14px 38px rgba(0,9,10,.16);
  backdrop-filter: blur(30px) saturate(145%);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), background .38s ease, box-shadow .38s ease;
}

.public-home .tile-btn::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: '';
  pointer-events: none;
  background: radial-gradient(260px circle at var(--shine-x, 78%) -20%, rgba(214,255,248,.24), transparent 58%);
  opacity: .65;
  transition: opacity .35s ease, transform .5s ease;
}

.public-home .tile-btn::after {
  position: absolute;
  top: -85%;
  left: -45%;
  width: 40%;
  height: 260%;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(226,255,250,.12), transparent);
  transform: rotate(18deg) translateX(-220%);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.public-home .tile-btn:hover,
.public-home .tile-btn:focus-visible {
  transform: translateY(-5px) scale(1.012);
  border-color: rgba(154,255,237,.21);
  background: linear-gradient(135deg, rgba(224,255,250,.16), rgba(66,239,213,.075));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 24px 55px rgba(0,10,11,.25), 0 0 36px rgba(42,238,209,.08);
}

.public-home .tile-btn:hover::before,
.public-home .tile-btn:focus-visible::before { opacity: 1;transform: scale(1.08); }
.public-home .tile-btn:hover::after,
.public-home .tile-btn:focus-visible::after { transform: rotate(18deg) translateX(520%); }
.public-home .tile-btn:active { transform: translateY(-1px) scale(.985);transition-duration:.1s; }
.tile-label,.tile-arrow { position: relative;z-index: 1; }
.tile-arrow { display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:rgba(83,244,217,.07);transition:transform .35s ease,background .35s ease; }
.public-home .tile-btn:hover .tile-arrow { transform:translateX(3px);background:rgba(83,244,217,.14); }

.public-tutorial .block-text,
.public-tutorial .block-copy {
  border-color: rgba(205,255,247,.1);
  background: linear-gradient(135deg, rgba(228,255,251,.11), rgba(100,255,230,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 16px 42px rgba(0,9,10,.17);
  backdrop-filter: blur(30px) saturate(145%);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
}

.public-tutorial .block-video video,
.public-tutorial .block-video iframe,
.public-tutorial .block-image img {
  border-color: rgba(205,255,247,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 68px rgba(0,8,9,.3);
}

.public-tutorial .block-copy {
  transition: transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.public-tutorial .block-copy:hover { transform:translateY(-2px);background:linear-gradient(135deg,rgba(152,255,238,.16),rgba(60,233,209,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 48px rgba(0,9,10,.23),0 0 32px rgba(42,238,209,.08); }
.public-tutorial .block-copy:active { transform:scale(.985); }
.copy-action { box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:background .25s ease,transform .25s ease; }
.public-tutorial .block-copy:hover .copy-action { background:rgba(83,244,217,.23);transform:scale(1.03); }

@keyframes glass-rise {
  from { opacity:0;transform:translateY(16px); }
  to { opacity:1;transform:translateY(0); }
}
@keyframes background-drift {
  0% { background-position: 0% 35%; }
  50% { background-position: 70% 65%; }
  100% { background-position: 100% 25%; }
}
@keyframes glass-orbit-a {
  from { transform:translate3d(4vw,-3vh,0) scale(.92); }
  to { transform:translate3d(-14vw,14vh,0) scale(1.16); }
}
@keyframes glass-orbit-b {
  from { transform:translate3d(-4vw,5vh,0) scale(.94); }
  to { transform:translate3d(16vw,-13vh,0) scale(1.18); }
}

@media (max-width:720px) {
  .public-home .tile-btn { border-radius:24px; }
  .public-home .tile-btn::before { background:radial-gradient(220px circle at 88% -35%,rgba(214,255,248,.22),transparent 60%); }
  .tile-arrow { width:32px;height:32px; }
  .public-tutorial .block-text,.public-tutorial .block-copy,.public-tutorial .block-video video,.public-tutorial .block-video iframe,.public-tutorial .block-image img { border-radius:24px; }
}

@media (prefers-reduced-motion:reduce) {
  .public-home,.public-tutorial,.public-home::before,.public-home::after,.public-tutorial::before,.public-tutorial::after,.public-home .site-header,.public-tutorial .site-header,.home-hero,.tutorial-hero,.public-home .tile-btn,.public-tutorial .block { animation:none; }
  .public-home .tile-btn::after { display:none; }
}

/* ---------- Tiffany CTA tutorial buttons ---------- */
.public-home .tile-panel {
  width: 100%;
  max-width: 560px;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.public-home .tile-btn {
  width: 100%;
  min-height: 62px;
  padding: 6px 7px 6px 20px;
  align-items: center;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(115deg, #075137 0%, #096846 52%, #117b52 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 12px 30px rgba(13, 114, 70, .16),
    0 4px 10px rgba(0, 14, 15, .22);
}

.public-home .tile-btn::before {
  background: linear-gradient(105deg, rgba(255,255,255,.1), transparent 42%, rgba(255,255,255,.07));
  opacity: 1;
}

.public-home .tile-btn:hover,
.public-home .tile-btn:focus-visible {
  border: 0;
  background: linear-gradient(115deg, #09603f 0%, #0d7750 50%, #188c5e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 18px 38px rgba(20, 145, 87, .2),
    0 5px 14px rgba(0, 14, 15, .25);
}

.public-home .tile-label {
  flex: 1;
  gap: 1px;
}

.public-home .tile-icon {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-right: 11px;
  border-radius: 50%;
  background: rgba(231, 248, 239, .14);
  color: rgba(243, 255, 248, .9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 14px rgba(0,25,16,.2);
  font: 700 .9rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
}

.public-home .tile-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-home .tile-icon--v2raytun {
  background: #000;
}

.public-home .tile-icon--v2raytun img {
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  max-width: none;
}

.public-home .tile-label strong {
  color: #f3fffc;
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -.015em;
}

.public-home .tile-platforms {
  color: rgba(239,255,251,.72);
  font-size: .59rem;
  font-weight: 650;
}

.public-home .tile-arrow {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 20px;
  background: rgba(235,248,239,.92);
  color: #06442d;
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.65rem;
  font-weight: 500;
  box-shadow: inset 0 1px 0 #fff, 0 4px 13px rgba(0, 72, 67, .15);
}

.public-home .tile-btn:hover .tile-arrow,
.public-home .tile-btn:focus-visible .tile-arrow {
  transform: translateX(2px) scale(1.035);
  background: #fff;
}

@media (max-width:720px) {
  .public-home .tile-panel { gap: 10px; }
  .public-home .tile-btn { min-height: 60px;padding: 6px 7px 6px 18px;border-radius: 30px; }
  .public-home .tile-arrow { width:46px;height:46px;flex-basis:46px;border-radius:19px; }
  .public-home .tile-icon { width:40px;height:40px;flex-basis:40px;margin-right:10px; }
}

/* ---------- Subtle technical background ---------- */
.public-home .page::after,
.public-tutorial .page::after {
  position: fixed;
  z-index: -1;
  inset: -80px;
  content: '';
  pointer-events: none;
  opacity: .2;
  background-image:
    radial-gradient(circle, rgba(119, 240, 170, .55) 0 1px, transparent 1.5px),
    linear-gradient(rgba(100, 220, 150, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 220, 150, .14) 1px, transparent 1px);
  background-size: 96px 96px, 48px 48px, 48px 48px;
  background-position: 24px 24px, 0 0, 0 0;
  mask-image: radial-gradient(ellipse at center, #000 15%, rgba(0,0,0,.72) 52%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 15%, rgba(0,0,0,.72) 52%, transparent 86%);
  animation: technical-grid-drift 24s linear infinite;
  will-change: background-position, transform;
}

@keyframes technical-grid-drift {
  0% { background-position: 24px 24px, 0 0, 0 0; transform: perspective(700px) rotateX(1deg) scale(1.02); }
  50% { background-position: 72px 48px, 24px 12px, 24px 12px; transform: perspective(700px) rotateX(2deg) scale(1.035); }
  100% { background-position: 120px 72px, 48px 24px, 48px 24px; transform: perspective(700px) rotateX(1deg) scale(1.02); }
}

@media (max-width:720px) {
  .public-home .page::after,
  .public-tutorial .page::after {
    opacity: .16;
    background-size: 84px 84px, 42px 42px, 42px 42px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .public-home .page::after,
  .public-tutorial .page::after { animation: none; }
}
/* ---------- VTSLY brand mark ---------- */
.public-home .brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.public-home .brand-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 3px;
  border: 1px solid rgba(192, 255, 224, .2);
  border-radius: 50%;
  background: rgba(1, 42, 31, .78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 7px 22px rgba(0,18,12,.22);
}

.public-home .brand-logo img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: contain;
}

.public-home .site-actions { display:flex;align-items:center;gap:9px; }
.public-home .site-qr {
  display:flex;align-items:center;gap:10px;max-width:210px;padding:6px 7px 6px 12px;
  border:1px solid var(--glass-border);border-radius:19px;background:rgba(196,255,246,.07);
  color:#d9fff4;text-decoration:none;backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);transition:background .2s ease,border-color .2s ease;
}
.public-home .site-qr:hover { border-color:var(--glass-border-strong);background:rgba(196,255,246,.12); }
.public-home .site-qr-caption { max-width:112px;font-size:.62rem;font-weight:650;line-height:1.35; }
.public-home .site-qr img { width:72px;height:72px;flex:0 0 72px;padding:5px;border-radius:12px;background:#fff;object-fit:contain; }
.public-home .bot-link { min-height:58px;display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(154,255,237,.2);border-radius:17px;background:linear-gradient(145deg,rgba(0,166,160,.28),rgba(0,75,67,.3));color:#dffff5;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.public-home .bot-link:hover { border-color:rgba(154,255,237,.4);background:rgba(0,166,160,.28);transform:translateY(-1px); }
.public-home .bot-link svg { width:23px;height:23px;flex:0 0 23px;color:#69e1c2; }
.public-home .bot-link span { display:grid;gap:2px; }
.public-home .bot-link strong { font-size:.75rem;line-height:1.2; }
.public-home .bot-link small { color:#a9d7c9;font-size:.57rem;line-height:1.2; }
@media(max-width:480px) {
  .public-home .site-actions { gap:7px; }
  .public-home .site-qr { max-width:158px;gap:6px;padding:5px 6px 5px 8px;border-radius:15px; }
  .public-home .site-qr-caption { max-width:80px;font-size:.52rem; }
  .public-home .site-qr img { width:56px;height:56px;flex-basis:56px;padding:4px;border-radius:10px; }
  .public-home .bot-link { width:52px;min-height:56px;flex:0 0 52px;flex-direction:column;justify-content:center;gap:2px;padding:4px;border-radius:15px; }
  .public-home .bot-link svg { width:20px;height:20px;flex-basis:20px; }
  .public-home .bot-link strong { font-size:.62rem; }
  .public-home .bot-link small { display:none; }
  .public-home .brand-logo { width:32px;height:32px;flex-basis:32px; }
  .public-home .brand-lockup { gap:7px; }
}

@media (max-width:720px) {
  .public-home .brand-logo { width:38px;height:38px;flex-basis:38px; }
  .public-home .brand-lockup { gap:9px; }
}
.public-home .support-note,
.public-tutorial .support-note {
  display: inline;
  color: #d8ffea;
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-color: rgba(103, 231, 156, .72);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.public-home .key-support-accent { color:#39f279;font-weight:950;text-shadow:0 0 14px rgba(57,242,121,.28); }
/* ---------- Compact copy blocks ---------- */
.public-tutorial .block-copy {
  min-height: 56px;
  padding: 7px 7px 7px 14px;
  border-radius: 18px;
}
.public-tutorial .copy-content { gap: 2px; }
.public-tutorial .copy-content small { font-size: .52rem; }
.public-tutorial .copy-content strong { font-size: .84rem; }
.public-tutorial .copy-action {
  min-height: 36px;
  padding: 0 11px;
  border-radius: 13px;
  font-size: .65rem;
}
@media (max-width:720px) {
  .public-tutorial .block-copy { min-height:54px;padding:6px 6px 6px 13px;border-radius:17px; }
  .public-tutorial .copy-action { min-height:34px;border-radius:12px; }
}
/* Keep tutorial screenshots readable and within a comfortable viewing size. */
.public-tutorial .block-image {
  display: flex;
  justify-content: center;
}
.public-tutorial .block-image img {
  width: min(100%, 680px) !important;
  max-width: 100%;
  max-height: 72vh;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}
@media (max-width:720px) {
  .public-tutorial .block-image img {
    width: min(100%, 520px) !important;
    max-height: 68vh;
  }
}
.public-tutorial .device-warning {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(103, 255, 153, .42);
  border-radius: 12px;
  background: rgba(30, 138, 79, .24);
  color: #8dffae;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(119, 239, 165, .8);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.public-tutorial .device-warning-phrase { color:#67ff99;font-weight:950;text-decoration-color:#67ff99; }

/* Numbered tutorial headings use a bright green marker across every guide. */
.public-tutorial .block-text .ql-editor h2 .step-number {
  display:inline-grid;place-items:center;min-width:1.55em;height:1.55em;margin-right:.28em;padding:0 .2em;
  border:1px solid #a5ffc0;border-radius:50%;
  background:linear-gradient(145deg,#67ff99,#18d86a);
  color:#003b21;font-size:.78em;font-weight:950;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 0 20px rgba(57,242,121,.48);
  vertical-align:.08em;
}
.public-tutorial .tutorial-image-frame { position:relative;display:inline-block;max-width:100%;line-height:0; }
.public-tutorial .tutorial-image-frame img { display:block; }
.public-tutorial .tutorial-arrow { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible; }

/* ---------- Happ guide choice flow ---------- */
.happ-guide { width:100%; }
.coupon-cta { position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;overflow:hidden;margin-top:24px;padding:clamp(20px,3vw,32px);border:1px solid rgba(111,255,171,.32);border-radius:28px;background:radial-gradient(ellipse at 0% 0%,rgba(57,242,121,.2),transparent 58%),linear-gradient(125deg,rgba(9,67,45,.82),rgba(3,31,25,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 46px rgba(0,10,8,.23); }
.coupon-cta::after { position:absolute;z-index:-1;right:14%;top:-90px;width:210px;height:210px;border:1px solid rgba(111,255,171,.12);border-radius:50%;box-shadow:0 0 0 24px rgba(111,255,171,.025),0 0 0 50px rgba(111,255,171,.02);content:""; }
.coupon-cta-copy { min-width:0; }
.coupon-cta-eyebrow { color:#67ff99;font-size:.68rem;font-weight:900;letter-spacing:.12em; }
.coupon-cta h2 { margin:7px 0 8px;color:#effff5;font-size:clamp(1.2rem,2.4vw,1.65rem);line-height:1.2; }
.coupon-cta p { max-width:66ch;margin:0;color:#bdd8c7;font-size:.9rem;line-height:1.65; }
.coupon-cta p strong { color:#8affad;font-weight:850; }
.coupon-cta-button { min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 19px;border:1px solid rgba(185,255,207,.85);border-radius:18px;background:linear-gradient(135deg,#74ffa1,#2be77b);color:#003b23;text-decoration:none;font-size:.88rem;font-weight:850;white-space:nowrap;box-shadow:0 8px 26px rgba(33,225,113,.2),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; }
.coupon-cta-icon { width:30px;height:30px;flex:0 0 30px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,45,30,.24)); }
.coupon-cta-button strong { font-weight:950; }
.coupon-cta-button:hover,.coupon-cta-button:focus-visible { outline:none;transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 12px 32px rgba(33,225,113,.32),inset 0 1px 0 rgba(255,255,255,.8); }
.coupon-cta-arrow { margin-left:3px;font-size:1.05rem; }
.happ-guide-lead { margin:0 0 14px;color:#39f279;font-size:clamp(1rem,2.2vw,1.35rem);font-weight:850;line-height:1.35;letter-spacing:.035em;text-transform:uppercase;text-shadow:0 0 16px rgba(57,242,121,.28); }
.happ-choice-list,.happ-format-list { display:grid;gap:12px; }
.happ-choice,.happ-format-button {
  width:100%;min-height:78px;display:flex;align-items:center;gap:14px;padding:13px 16px;
  border:1px solid rgba(191,255,222,.13);border-radius:24px;
  background:linear-gradient(135deg,rgba(220,255,237,.105),rgba(116,229,165,.035));
  color:#edfff4;text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 30px rgba(0,10,8,.15);
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.happ-choice:hover,.happ-choice:focus-visible,.happ-format-button:hover,.happ-format-button:focus-visible,
.happ-choice[aria-expanded="true"],.happ-format-button[aria-pressed="true"] {
  outline:none;border-color:rgba(145,245,183,.4);
  background:linear-gradient(135deg,rgba(64,182,111,.24),rgba(107,235,154,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 14px 34px rgba(0,15,9,.22),0 0 24px rgba(93,217,139,.08);
}
.happ-choice:active,.happ-format-button:active { transform:scale(.985); }
.happ-choice-index { width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:1px solid #a5ffc0;border-radius:50%;background:linear-gradient(145deg,#67ff99,#18d86a);color:#003b21;font-size:.74rem;font-weight:950;box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 0 18px rgba(57,242,121,.42); }
.happ-choice-copy,.happ-format-button>span:nth-child(2) { min-width:0;flex:1;display:grid;gap:4px; }
.happ-choice-copy strong,.happ-format-button strong { font-size:.96rem;font-weight:750;line-height:1.3; }
.happ-choice-copy small,.happ-format-button small { color:#a9cdb5;font-size:.73rem;line-height:1.4; }
.happ-fast-badge { width:max-content;max-width:100%;display:inline-flex;align-items:center;margin-right:5px;padding:3px 7px;border:1px solid rgba(255,209,102,.62);border-radius:999px;background:rgba(255,193,69,.15);color:#ffd166;font-size:.58rem;font-weight:950;letter-spacing:.055em;line-height:1.2;vertical-align:middle;box-shadow:0 0 10px rgba(255,193,69,.12); }
.happ-choice-arrow { width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:50%;background:rgba(224,255,235,.08);color:#b9f4cd;font-size:1.45rem;line-height:1;transition:transform .2s ease; }
.happ-choice[aria-expanded="true"] .happ-choice-arrow { transform:rotate(90deg); }
.happ-choice-panel { margin-top:14px;padding:18px;border:1px solid rgba(191,255,222,.12);border-radius:24px;background:rgba(0,27,17,.44); }
.happ-choice-panel[hidden],.happ-format-panel[hidden] { display:none; }
.happ-choice-panel h2 { margin:0 0 12px;color:#f0fff5;font-size:1.12rem;line-height:1.3; }
.happ-choice-panel>p,.happ-video-caption { margin:0 0 14px;color:#c0dcc9;font-size:.9rem;line-height:1.6; }
.happ-choice-panel>p.happ-purchase-note { margin:0 0 14px;padding:11px 13px;border:1px solid rgba(103,255,153,.34);border-radius:15px;background:linear-gradient(110deg,rgba(57,242,121,.14),rgba(20,126,69,.12));color:#d5f2de;font-weight:700; }
.happ-purchase-note strong { color:#67ff99;font-weight:900; }
.happ-bot-link { width:max-content;max-width:100%;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;margin:0 0 14px;padding:0 17px;border:1px solid rgba(112,255,167,.32);border-radius:16px;background:linear-gradient(135deg,rgba(57,242,121,.2),rgba(22,157,88,.18));color:#9bffb8;text-decoration:none;font-size:.9rem;font-weight:800;box-shadow:0 0 20px rgba(57,242,121,.12);transition:background .2s ease,transform .2s ease,border-color .2s ease; }
.happ-bot-link:hover,.happ-bot-link:focus-visible { border-color:rgba(112,255,167,.6);background:linear-gradient(135deg,rgba(57,242,121,.3),rgba(22,157,88,.26));transform:translateY(-1px); }
.happ-replace-steps { display:grid;gap:11px;margin:0;padding-left:1.5rem;color:#c0dcc9;font-size:.9rem;line-height:1.6; }
.happ-replace-steps li { padding-left:3px; }
.happ-replace-steps li::marker { color:#67ff99;font-weight:900; }
.happ-replace-steps strong { color:#f0fff5;font-weight:800; }
.happ-inline-refresh-icon { width:19px;height:19px;display:inline-block;margin:0 2px;object-fit:contain;vertical-align:middle; }
.happ-choice-panel>p.happ-replace-note { display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding:12px 13px;border:1px solid rgba(103,255,153,.36);border-radius:15px;background:linear-gradient(110deg,rgba(57,242,121,.15),rgba(20,126,69,.12));color:#8dffae;font-size:.82rem;font-weight:650; }
.happ-replace-note>span:last-child { flex:1; }
.happ-replace-note strong { color:#67ff99;font-weight:900; }
.happ-attention-icon { width:23px;height:23px;flex:0 0 23px;display:grid;place-items:center;margin-top:1px;border:1px solid rgba(165,255,192,.85);border-radius:50%;background:linear-gradient(145deg,#67ff99,#18d86a);color:#003b21;font-size:.84rem;font-weight:950;line-height:1;box-shadow:0 0 14px rgba(57,242,121,.4); }
.happ-format-list { margin-top:10px; }
.happ-format-button { min-height:68px;border-radius:19px; }
.happ-format-button>span:first-child { width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid rgba(255,119,114,.55);border-radius:11px;background:linear-gradient(145deg,rgba(255,56,50,.32),rgba(217,0,24,.2));color:#ff625b;font-size:1.25rem;box-shadow:0 0 14px rgba(255,32,42,.16); }
.happ-format-panel { margin-top:18px; }
.happ-steps { display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:happ-step; }
.happ-steps li { min-width:0;padding:14px;border:1px solid rgba(191,255,222,.1);border-radius:20px;background:rgba(220,255,237,.045);counter-increment:happ-step; }
.happ-step-title { display:flex;align-items:center;gap:9px;color:#effff5;font-size:.92rem;font-weight:750;line-height:1.4; }
.happ-step-title::before { content:counter(happ-step);width:27px;height:27px;flex:0 0 27px;display:grid;place-items:center;border:1px solid #a5ffc0;border-radius:50%;background:linear-gradient(145deg,#67ff99,#18d86a);color:#003b21;font-size:.68rem;font-weight:900;box-shadow:0 0 14px rgba(57,242,121,.35); }
.happ-steps li p { margin:9px 0 12px;color:#b5d2bf;font-size:.82rem;line-height:1.55; }
.happ-domain-fallback { display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px;border:1px solid rgba(255,91,104,.62);border-radius:15px;background:linear-gradient(110deg,rgba(255,58,73,.19),rgba(112,20,31,.23));color:#ffe2e4;font-size:.82rem;line-height:1.55;box-shadow:0 0 18px rgba(255,45,62,.08); }
.happ-domain-fallback>span:last-child { flex:1; }
.happ-domain-fallback strong { display:block;margin-top:4px;color:#ff6974;font-weight:950;letter-spacing:.025em; }
.happ-domain-warning-icon { width:23px;height:23px;flex:0 0 23px;display:grid;place-items:center;margin-top:1px;border:1px solid rgba(255,171,177,.9);border-radius:50%;background:linear-gradient(145deg,#ff7b83,#ed2438);color:#4b0710;font-size:.84rem;font-weight:950;line-height:1;box-shadow:0 0 14px rgba(255,55,72,.35); }
.happ-domain-compare { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px; }
.happ-domain-compare>span { min-width:0;display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px 8px;border:1px solid rgba(255,127,137,.32);border-radius:10px;background:rgba(89,13,23,.32);color:#ffdadd;font-size:.73rem;font-weight:750; }
.happ-domain-compare>span:last-child { border-color:rgba(103,255,153,.36);background:rgba(9,69,40,.36);color:#d6ffe2; }
.happ-domain-compare code { color:#fff3f3;font-size:.69rem;font-weight:850;overflow-wrap:anywhere; }
.happ-domain-compare>span:last-child code { color:#72ff9d; }
.happ-steps li img { display:block;width:min(100%,340px);max-height:54vh;margin:0 auto;object-fit:contain;border:1px solid rgba(216,255,231,.12);border-radius:17px;background:#07120e; }
.happ-guide-video { display:block;width:100%;max-height:72vh;margin:0 auto;border:1px solid rgba(216,255,231,.14);border-radius:20px;background:#020605; }
.public-tutorial .video-download { width:max-content;max-width:100%;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;padding:0 14px;border:1px solid rgba(154,255,237,.2);border-radius:14px;background:rgba(83,244,217,.1);color:#cafff2;text-decoration:none;font-size:.8rem;font-weight:750;transition:background .2s ease,border-color .2s ease; }
.public-tutorial .video-download:hover { border-color:rgba(154,255,237,.4);background:rgba(83,244,217,.18); }
.happ-computer-steps li img { width:100%;max-width:1160px;max-height:78vh; }
.happ-annotated-image { position:relative;width:100%;max-width:1160px;margin:0 auto;line-height:0; }
.happ-computer-steps .happ-annotated-image img { display:block;width:100%;max-width:none; }
.happ-annotated-image svg { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.happ-domain-copy { width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:8px 9px 8px 14px;border:1px solid rgba(191,255,222,.14);border-radius:17px;background:linear-gradient(110deg,rgba(36,117,83,.45),rgba(4,56,39,.55));color:#effff5;text-align:left;cursor:pointer; }
.happ-domain-copy>span:first-child { display:grid;gap:3px; }
.happ-domain-copy small { color:#a9d7bf;font-size:.62rem;font-weight:800;letter-spacing:.06em; }
.happ-domain-copy small.domain-letter-note { color:#67ff99;font-size:.66rem;letter-spacing:normal; }
.happ-domain-copy strong { font-size:.92rem; }
.happ-domain-copy .copy-action { min-height:36px;display:grid;place-items:center;padding:0 12px;border-radius:12px;background:rgba(55,158,117,.36);color:#ddffed;font-size:.7rem;font-weight:800; }
@media(max-width:720px) {
  .coupon-cta { grid-template-columns:1fr;gap:17px;margin-top:18px;padding:19px;border-radius:23px; }
  .coupon-cta p { font-size:.84rem; }
  .coupon-cta-button { width:100%;min-height:52px; }
  .happ-guide-lead { font-size:1rem; }
  .happ-choice,.happ-format-button { min-height:76px;padding:12px 13px;border-radius:21px; }
  .happ-choice-copy strong,.happ-format-button strong { font-size:.9rem; }
  .happ-choice-copy small,.happ-format-button small { font-size:.7rem; }
  .happ-choice-panel { padding:14px;border-radius:21px; }
  .happ-steps li { padding:11px;border-radius:18px; }
  .happ-steps li img { width:min(100%,300px);max-height:56vh;border-radius:15px; }
  .happ-computer-steps li img { width:100%;max-height:78vh; }
  .happ-guide-video { max-height:68vh;border-radius:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .happ-choice,.happ-format-button,.happ-choice-arrow { transition:none; }
}

/* Prominent first-page reminder for desktop VPN tutorials */
.tutorial-important-note { display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;padding:15px 17px;border:1px solid rgba(255,180,75,.55);border-radius:19px;background:linear-gradient(110deg,rgba(142,81,25,.32),rgba(74,48,17,.4));color:#fff0d8;box-shadow:0 8px 28px rgba(0,0,0,.13),inset 0 1px rgba(255,242,220,.06); }
.tutorial-important-note>span:last-child { display:grid;gap:5px;min-width:0;font-size:.88rem;line-height:1.5; }
.tutorial-important-note strong { color:#ffd18a;font-weight:850; }
.tutorial-important-note em { color:#ffb547;font-style:normal;font-weight:950;letter-spacing:.025em; }
.tutorial-important-note b { color:#ffd18a;white-space:nowrap; }
.tutorial-important-icon { width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;border:1px solid rgba(255,216,157,.9);border-radius:50%;background:linear-gradient(145deg,#ffd18a,#ff9f2e);color:#4a2600;font-size:.9rem;font-weight:950;box-shadow:0 0 14px rgba(255,159,46,.3); }
@media(max-width:720px) { .tutorial-important-note { gap:9px;margin-bottom:14px;padding:12px;border-radius:16px; } .tutorial-important-note>span:last-child { font-size:.8rem; } }
.happ-final-fallback { margin-top:10px;padding:10px 12px;border:1px solid rgba(255,181,71,.4);border-radius:13px;background:rgba(103,64,17,.2);color:#ffe6bf;font-size:.8rem;line-height:1.5; }
.happ-final-fallback strong { color:#ffc466;font-weight:900; }
.happ-computer-steps .happ-final-fallback { max-width:1160px;margin-right:auto;margin-left:auto; }