/* usetwine.ink — liquid glass layer. Loaded after twine.css; remove the link to go back to flat panels. */
:root {
  --glass-bg: rgba(255, 255, 255, .62); --glass-bg-strong: rgba(255, 255, 255, .85); --glass-border: rgba(255, 255, 255, .95); --glass-edge: rgba(7, 17, 31, .08);
  --glass-shine: #ffffff; --glass-shadow: 0 24px 60px -30px rgba(15, 35, 64, .28), 0 2px 6px rgba(15, 35, 64, .05);
  --blob-1: #a3d6ff; --blob-2: #7cc4ff; --blob-3: #d3e0ee; --blob-4: #eef5fc;
  --r-panel: 26px; --r-pill: 999px; --r-ctl: 16px;
  --line: #d3e0ee; --line-strong: #b7cde3; --panel: transparent; --panel-2: rgba(238, 245, 252, .8);
}
.theme-dark {
  --glass-bg: rgba(124, 196, 255, .06); --glass-bg-strong: rgba(124, 196, 255, .12); --glass-border: rgba(163, 214, 255, .22); --glass-edge: rgba(0, 0, 0, .35);
  --glass-shine: rgba(238, 245, 252, .5); --glass-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 1px 0 rgba(124, 196, 255, .06);
  --blob-1: #1f5fa8; --blob-2: #7cc4ff; --blob-3: #0f2340; --blob-4: #a3d6ff;
  --line: rgba(163, 214, 255, .14); --line-strong: rgba(163, 214, 255, .28); --panel: transparent; --panel-2: rgba(124, 196, 255, .08);
}

/* ---------- ambient background ---------- */
body { position: relative; isolation: isolate; }
body::before, body::after { content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(38vmax 38vmax at 18% 18%, color-mix(in srgb, var(--blob-1) 55%, transparent), transparent 70%),
    radial-gradient(32vmax 32vmax at 82% 28%, color-mix(in srgb, var(--blob-2) 35%, transparent), transparent 70%),
    radial-gradient(36vmax 36vmax at 70% 85%, color-mix(in srgb, var(--blob-3) 40%, transparent), transparent 70%),
    radial-gradient(30vmax 30vmax at 22% 80%, color-mix(in srgb, var(--blob-4) 40%, transparent), transparent 70%);
  filter: blur(40px) saturate(130%); animation: drift 38s ease-in-out infinite alternate;
}
body::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); opacity: .5; mix-blend-mode: overlay; }
.theme-dark body::before { opacity: .6; }
:root:not(.theme-dark) body::before { opacity: .55; }
@keyframes drift { from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } to { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg) scale(1.08); } }

/* ---------- glass recipe ---------- */
.glass, .hero-panel, .chain-panel, .desk-ticket, .stock-picker, #position-content, .payoff-explainer, .step, .rule, .hero-stats div, .account-strip > *, .terms-strip div, .mode-badge, .step-visual, dialog, .toast, .quote-status, .source-toggle, .ticket-direction, .learn-direction, .position-tabs, .quantity, select, input[type="number"], input[type="text"], .refresh-price, .theme-btn, .icon-link, .menu-toggle, .close-dialog, #wallet-options button {
  background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--r-panel);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-edge), var(--glass-shadow);
  position: relative;
}
.hero-panel::before, .chain-panel::before, .desk-ticket::before, .payoff-explainer::before, .step::before, .rule::before, dialog::before, #position-content::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 28%, transparent 46%, transparent 72%, rgba(255,255,255,.10) 100%);
  mask: linear-gradient(#000, transparent 70%); -webkit-mask: linear-gradient(#000, transparent 70%);
}
.theme-dark .hero-panel::before, .theme-dark .chain-panel::before, .theme-dark .desk-ticket::before, .theme-dark .payoff-explainer::before, .theme-dark .step::before, .theme-dark .rule::before, .theme-dark dialog::before, .theme-dark #position-content::before { opacity: .55; }
.hero-stats, .account-strip, .terms-strip, .steps-grid { background: transparent !important; border: 0 !important; gap: 12px !important; }
.hero-stats div, .account-strip > *, .terms-strip div { border-radius: 20px; }
.step { border-radius: var(--r-panel) !important; }
.steps-grid { gap: 14px !important; }
.step-visual, .quote-status, .source-toggle, .ticket-direction, .learn-direction, .position-tabs, .quantity, select, input[type="number"], input[type="text"] { border-radius: var(--r-ctl); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-edge); }
.quote-status { border-style: solid !important; }
.quote-status.unavailable { background: color-mix(in srgb, var(--put) 18%, var(--glass-bg)) !important; border-color: color-mix(in srgb, var(--put) 45%, transparent) !important; }
.refresh-price, .theme-btn, .icon-link, .menu-toggle, .close-dialog { border-radius: var(--r-pill); }
.mode-badge { border-radius: 18px; }
.toast { border-radius: var(--r-pill); color: var(--ink); }
dialog { border-radius: 30px; backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); }
dialog::backdrop { background: rgba(10, 12, 20, .35); backdrop-filter: blur(14px) saturate(120%); }

/* stock list & chain inside glass */
.stock-picker { padding: 6px; overflow: hidden; }
.stock-chip { border: 0 !important; border-radius: 16px; margin: 2px 0; }
.stock-chip.selected { background: var(--glass-bg-strong); box-shadow: inset 0 1px 0 var(--glass-shine), 0 6px 18px -10px rgba(0,0,0,.5); }
.stock-chip.selected::after { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 22px; margin-top: -11px; border-radius: 4px; background: var(--accent); }
.full-chain td { border-bottom-color: var(--line) !important; }
.full-chain button { border-radius: 12px; margin: 3px 0; height: 46px; }
.full-chain button.chosen, .full-chain button[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset; }
.full-chain tr.active-row td.strike-cell { background: transparent; }
.full-chain tr.active-row td.strike-cell strong { color: var(--accent-text); }

/* header & tape */
.header { background: var(--glass-bg) !important; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--glass-border); box-shadow: inset 0 -1px 0 var(--glass-edge), 0 10px 30px -20px rgba(0,0,0,.4); }
.tape { background: transparent; border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#main-nav { padding: 3px; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-edge); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
#main-nav a { border-radius: var(--r-pill); padding: 8px 14px; }
#main-nav a[aria-current] { background: var(--glass-bg-strong); box-shadow: inset 0 1px 0 var(--glass-shine), 0 4px 12px -6px rgba(0,0,0,.4); }
@media (max-width: 760px) { #main-nav { border-radius: 24px; top: 68px; left: 12px; right: 12px; background: var(--glass-bg-strong); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); } }

/* ---------- buttons: liquid pills ---------- */
.btn, .wallet-trigger, .order-button, .position-close, .sample-scenario button {
  border-radius: var(--r-pill) !important; position: relative; overflow: hidden;
  background: var(--glass-bg-strong) !important; color: var(--ink) !important; border: 1px solid var(--glass-border) !important;
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-edge), 0 10px 24px -14px rgba(0,0,0,.5);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s;
}
.btn::after, .wallet-trigger::after, .order-button::after { content: ""; position: absolute; left: 8%; right: 8%; top: 2px; height: 42%; border-radius: var(--r-pill); background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.theme-dark .btn::after, .theme-dark .wallet-trigger::after, .theme-dark .order-button::after { opacity: .45; }
.btn:hover:not(:disabled), .wallet-trigger:hover, .order-button:hover:not(:disabled) { transform: translateY(-1px) scale(1.015); box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-edge), 0 16px 34px -14px rgba(0,0,0,.6); }
.btn:active:not(:disabled), .order-button:active:not(:disabled) { transform: scale(.985); }
.btn-accent, .order-button:not(:disabled), .wallet-trigger { background: color-mix(in srgb, var(--accent) 78%, rgba(255,255,255,.35)) !important; color: var(--accent-ink) !important; border-color: color-mix(in srgb, var(--accent) 60%, #fff) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.15); }
.btn-accent:hover:not(:disabled), .wallet-trigger:hover, .order-button:hover:not(:disabled) { background: var(--accent) !important; }
.btn:disabled, .order-button:disabled { background: var(--glass-bg) !important; color: var(--muted) !important; box-shadow: inset 0 1px 0 var(--glass-shine); transform: none; }
.ticket-direction button, .learn-direction button, .position-tabs button, .source-toggle button { border-radius: var(--r-pill); }
.ticket-direction button.selected, .learn-direction button[aria-pressed="true"], .position-tabs button[aria-selected="true"], .source-toggle button.selected { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px -8px rgba(0,0,0,.6); }
.position-tabs button[aria-selected="true"], .source-toggle button.selected { background: var(--glass-bg-strong); color: var(--ink); }
.quantity button:hover:not(:disabled) { background: var(--glass-bg-strong); }
.quantity input { background: transparent !important; border: 0 !important; border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
input[type="range"] { accent-color: var(--accent); }

/* ---------- refraction on the hero panel & header (Chromium/Safari) ---------- */
@supports (backdrop-filter: url(#lg-refract)) {
  .hero-panel { backdrop-filter: blur(18px) saturate(170%) url(#lg-refract); -webkit-backdrop-filter: blur(18px) saturate(170%) url(#lg-refract); }
}
.hero-panel { border-radius: 30px; padding: 20px; }
.hero-panel .axis { stroke: var(--line-strong); }
.hero-panel .tick { fill: var(--muted); }
.hero-panel .dot { stroke: transparent; }
.hero { background: none; }

/* section rhythm & footer */
main > section, footer { border-bottom: 0; }
:root:not(.theme-dark) 
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } .btn, .order-button, .wallet-trigger { transition: none; } }
@media (max-width: 760px) { .hero-panel { padding: 14px; border-radius: 22px; } .chain-panel, .desk-ticket, .payoff-explainer, .rule, .step { border-radius: 20px !important; } }