:root{ --bg: #ffffff; --bg-soft: #fbfbfd; --bg-dark: #1d1d1f; --txt: #1d1d1f; --txt-2: #6e6e73; --txt-3: #86868b; --rule: #d2d2d7; --rule-soft: #e8e8ed; --blue: #0071e3; --blue-hover: #0077ed; --orange: #ff9500; --green: #34c759; --red: #ff3b30; } *{box-sizing:border-box;margin:0;padding:0} html,body{ background:var(--bg);color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif; font-weight:400;line-height:1.47;letter-spacing:-0.003em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; overflow-x:clip; /* doesn't create a scroll container -> header position:sticky actually sticks */ } a{color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px} a:hover{text-decoration-color:currentColor} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} [id]{scroll-margin-top:64px} /* sticky header clearance for in-page anchors */ /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:50; backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); background:rgba(255,255,255,0.78); border-bottom:1px solid var(--rule-soft); } .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:13px;font-weight:500;max-width:720px;margin:0 auto} /* variant B: narrower span, balanced */ .nav .brand{display:flex;align-items:center;gap:10px;color:var(--txt);font-weight:600;letter-spacing:-0.005em} a.brand{text-decoration:none} a.brand:hover{text-decoration:none;opacity:.7} .brand .mark{ width:26px;height:26px;border-radius:7px;background:#1d1d1f; display:flex;align-items:center;justify-content:center;color:#fff; font-family:'Fraunces',serif;font-weight:600;font-size:14px;line-height:1; } .nav ul{display:flex;gap:26px;list-style:none;align-items:center} .nav ul a.lang-switch{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:11px;letter-spacing:0.06em; border:1px solid var(--rule);border-radius:6px; padding:3px 8px;color:var(--txt-3); } .nav ul a.lang-switch:hover{ text-decoration:none;border-color:var(--txt-2);color:var(--txt); } .nav ul a{text-decoration:none} .nav ul a:hover{text-decoration:underline;text-decoration-color:currentColor} .btn{ display:inline-flex;align-items:center;gap:8px; background:#1d1d1f;color:#fff; padding:10px 18px;font-family:inherit;font-weight:500;font-size:14px; border:none;border-radius:980px;cursor:pointer; transition:background .15s ease;text-decoration:none; } .btn:hover{background:#000;color:#fff;text-decoration:none} .btn.lg{padding:13px 26px;font-size:15px} .btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--rule)} .btn.ghost:hover{background:var(--bg-soft);color:var(--txt)} /* ---------- hero ---------- */ .hero{padding:72px 0 48px;background:var(--bg-soft);text-align:center} .hero .eyebrow{ display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--txt);font-weight:500; margin-bottom:18px; } .hero .eyebrow::before{content:"";width:6px;height:6px;background:var(--txt);border-radius:50%} .hero h1{ font-family:'Fraunces','New York',ui-serif,Georgia,serif;font-weight:500; font-size:clamp(44px,7.2vw,84px);line-height:1.02;letter-spacing:-0.022em; color:var(--txt);margin:0 auto 22px;max-width:14ch; } .hero h1 em{font-style:italic;color:#4f3aa8} .hero .lede{ max-width:640px;margin:0 auto 32px; font-size:20px;line-height:1.4;color:var(--txt-2);font-weight:400;letter-spacing:-0.011em; } .hero .lede em{color:var(--txt);font-style:italic;font-weight:500} .hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .hero .meta-line{margin-top:24px;font-size:13px;color:var(--txt-3)} /* ---------- Hero grid: copy on the left, slab thumbnail on the right ---------- */ .hero-grid{ display:grid;grid-template-columns:1fr auto; gap:56px;align-items:center; max-width:1000px;margin:0 auto;text-align:left; } .hero-grid .hero-copy{min-width:0} .hero-grid h1{margin-left:0;margin-right:0;max-width:14ch} .hero-grid .lede{margin-left:0;margin-right:0} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px} .hero-cta .btn-primary, .hero-cta .btn-ghost{ appearance:none;border:0;cursor:pointer;font:inherit; letter-spacing:-0.005em;text-decoration:none; display:inline-flex;align-items:center;gap:8px; border-radius:10px; } .hero-cta .btn-primary{ background:var(--txt);color:#fff;font-weight:500;font-size:14px; padding:13px 22px; } .hero-cta .btn-primary:hover{background:#000} .hero-cta .btn-ghost{ background:transparent;color:var(--txt-2); border:1px solid var(--rule);font-weight:400;font-size:13px; padding:12px 18px; } .hero-cta .btn-ghost:hover{border-color:var(--txt);color:var(--txt)} .hero-slab{ background:#0a0a0a;color:#f5f5f7;border-radius:6px; width:148px;height:208px;padding:14px 12px; display:flex;flex-direction:column; box-shadow:0 12px 32px rgba(0,0,0,0.18),0 2px 6px rgba(0,0,0,0.08); transform:rotate(-3deg);transition:transform .25s ease; flex-shrink:0;text-decoration:none; } .hero-slab, .hero-slab *{text-decoration:none} .hero-slab:hover{transform:rotate(-1deg) translateY(-2px)} .hero-slab-title{ font-family:'Iowan Old Style','Fraunces','New York',ui-serif,Georgia,serif; font-weight:400;font-size:15px;line-height:1.04;letter-spacing:-0.012em; margin:0;color:#f5f5f7; } .hero-slab-lanes{margin:auto 0;width:100%;display:block} .hero-slab-author{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:7.5px;letter-spacing:0.08em;text-transform:uppercase; color:#86868b;margin-top:6px; } @media(max-width:720px){ .hero{padding:56px 0 40px;text-align:center} .hero-grid{ grid-template-columns:1fr;gap:22px;text-align:center; } .hero-grid .hero-copy{order:2} .hero-grid .hero-slab{ order:1;justify-self:center; width:112px;height:158px;transform:rotate(-2deg); } .hero-grid h1{margin-left:auto;margin-right:auto} .hero-grid .lede{margin-left:auto;margin-right:auto} .hero-cta{justify-content:center} } /* ---------- marquee strip ---------- */ .strip{ overflow:hidden;border-top:none;border-bottom:1px solid var(--rule-soft); background:var(--bg); } .strip .track{ display:flex;gap:48px;padding:18px 0;white-space:nowrap; animation:slide 38s linear infinite; font-size:14px;color:var(--txt-2);font-weight:500;letter-spacing:-0.005em; } .strip .track span{display:inline-flex;align-items:center;gap:14px} .strip{margin-top:-72px;padding-bottom:0} .strip .track span::after{content:"·";color:var(--txt);font-weight:600} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Quiet sources strip — sits at the bottom of the audit section as a restrained acknowledgement of the disciplines the book draws on. No heading; the dots-separated list reads as a calm footer. */ .sources-strip{ margin:48px auto 0;padding-top:18px; border-top:1px solid #1c1c1e; display:flex;justify-content:center;flex-wrap:wrap; gap:6px 14px; font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:11.5px;color:#86868b;letter-spacing:0.02em; text-align:center; } .sources-strip span{position:relative;padding-right:14px} .sources-strip span:not(:last-child)::after{ content:"·";position:absolute;right:0;color:#3a3a3e;font-weight:600; } @media (max-width:560px){ .sources-strip{margin-top:32px;gap:4px 10px;font-size:10.5px} .sources-strip span{padding-right:10px} } /* ---------- sections ---------- */ section{padding:104px 0;background:var(--bg)} section.soft{background:var(--bg-soft)} /* Use --no-bottom on the upper section and --no-top on the lower section to collapse the gap between two adjacent sections so they read as a continuous block. The card-pair section 03 + signup uses this. */ section.no-bottom{padding-bottom:0} section.no-top{padding-top:32px} .sec-head{margin:0 auto 56px;max-width:780px;text-align:center} .sec-head .num{display:block;font-size:14px;color:var(--txt);font-weight:500;margin-bottom:10px;letter-spacing:-0.005em} .sec-head h2{ font-family:inherit;font-weight:600;color:var(--txt); font-size:clamp(28px,4.2vw,46px);letter-spacing:-0.02em;line-height:1.1; } .sec-head p{ font-size:18px;color:var(--txt-2);margin-top:14px;line-height:1.45; max-width:60ch;margin-left:auto;margin-right:auto; } /* ---------- USP panels (12-col grid) ---------- */ .panels{display:grid;grid-template-columns:repeat(12,1fr);gap:16px} /* Section 5 — Workspace preview. Dark surface mirroring the audit's #calc palette: black section bg, dark card surfaces, light text. Two-tab toggle (Dashboard / Argument log) shares a single headline + subhead + email CTA. Both preview surfaces are forced to a matched min-height so toggling doesn't reflow the page. Sample data wears a "preview" pill so it isn't mistaken for live numbers. */ #workspace{background:#0a0a0a;color:#f5f5f7;padding-top:88px;padding-bottom:96px} #workspace .sec-head{margin-bottom:24px} #workspace .sec-head .num{color:#6e6e73} #workspace .sec-head h2{color:#f5f5f7} #workspace .sec-head p{color:#a1a1a6} .ws-toggle{ position:relative;display:inline-flex;align-items:stretch; background:rgba(255,255,255,0.03);border:1px solid #2a2a2c; border-radius:999px;padding:3px;gap:0;margin-bottom:18px; } .ws-tab{ background:transparent;border:1px solid transparent;cursor:pointer; padding:6px 18px;font-family:inherit;font-size:13px;font-weight:500; color:#86868b;border-radius:999px;letter-spacing:-0.005em; transition:background-color .15s,color .15s,border-color .15s; } .ws-tab.active{ background:rgba(245,245,247,0.08);color:#f5f5f7; border-color:rgba(245,245,247,0.22);font-weight:600; } .ws-tab:not(.active):hover{color:#f5f5f7} .ws-view{ position:relative;border-radius:14px;padding:18px;margin-bottom:0; box-sizing:border-box;min-height:380px; display:flex;flex-direction:column;justify-content:space-between;gap:10px; } .ws-view-a{background:#111;border:1px solid #1c1c1e} .ws-view-b{background:#111;border:1px solid #1c1c1e} .ws-view .ws-stats{margin-bottom:0} .ws-view .ws-card{margin-bottom:0} .ws-view[hidden]{display:none} .ws-preview-pill{ position:absolute;top:14px;right:16px; font-size:11px;color:#86868b;background:#0a0a0a; padding:3px 10px;border-radius:999px;border:1px solid #2a2a2c; letter-spacing:0.02em; } .ws-preview-pill-on-light{background:#1c1c1e;border-color:transparent;color:#86868b} .ws-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px} .ws-stat{ background:#0a0a0a;border-radius:8px;padding:12px 14px; display:flex;flex-direction:column;justify-content:center; min-height:72px;box-sizing:border-box; } .ws-stat-lbl{font-size:12px;color:#86868b;margin-bottom:6px} .ws-stat-v{font-size:22px;font-weight:500;color:#f5f5f7;font-variant-numeric:tabular-nums;line-height:1} .ws-stat-v-sm{font-size:16px;line-height:1.1;margin-top:0} .ws-card{background:#0a0a0a;border-radius:8px;padding:12px 14px;margin-bottom:10px} .ws-card-lbl{font-size:12px;color:#86868b;margin-bottom:8px} .ws-chart{width:100%;height:60px;display:block} .ws-last{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:#f5f5f7;margin-bottom:0} .ws-last em{font-style:normal;font-weight:500;color:#f5f5f7} .ws-last .ws-dot{color:#6e6e73} .ws-logger-lbl{font-size:13px;color:#86868b;margin-bottom:12px} .ws-logger-fields{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} .ws-logger-fields input, .ws-logger-fields select{ font:inherit;font-size:14px;padding:8px 12px; border:1px solid #2a2a2c;border-radius:8px;background:#0a0a0a;color:#f5f5f7; } .ws-logger-fields input::placeholder{color:#6e6e73} .ws-logger-row{display:flex;gap:8px} .ws-logger-row select{flex:1} .ws-logger-output{background:#0a0a0a;border-radius:8px;padding:12px 14px} .ws-logger-out-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px;color:#86868b} .ws-logger-risk{font-size:11px} .ws-cycle{width:100%;height:70px;display:block} .ws-cycle-labels{display:flex;justify-content:space-between;font-size:11px;color:#6e6e73;margin-top:4px} .ws-signup{display:flex;gap:8px;max-width:480px} .ws-signup input{ flex:1;font:inherit;font-size:14px;padding:10px 14px; border:1px solid #2a2a2c;border-radius:8px;background:#111;color:#f5f5f7; } .ws-signup input::placeholder{color:#6e6e73} .ws-signup button{ cursor:pointer;font:inherit;font-weight:600;font-size:14px; padding:10px 18px;border-radius:8px; background:rgba(245,245,247,0.08); border:1px solid rgba(245,245,247,0.22); color:#f5f5f7;letter-spacing:-0.005em; transition:background .15s,border-color .15s; } .ws-signup button:hover{ background:rgba(245,245,247,0.14); border-color:rgba(245,245,247,0.35); } /* Replaces the email-signup form while the course is still in development. Sits flush against the bottom edge of the preview grid — no CTA energy, no gap above it, just a quiet metadata line. */ .ws-status{ font-size:12.5px;color:#6e6e73;letter-spacing:0.02em; margin:3px 0 0; } /* Quiet text trigger that collapses the whole preview surface (toggle + both views + status note) behind a single sage word. Sits centered below the section subcopy. */ .ws-preview-collapse{margin:0} .ws-preview-collapse > summary{ list-style:none;cursor:pointer;user-select:none; background:transparent;border:0;padding:6px 4px; color:#7fa39a;font:inherit;font-size:14px;font-weight:500; letter-spacing:-0.005em; display:block;width:fit-content;margin:0 auto; transition:opacity .15s; } .ws-preview-collapse > summary::-webkit-details-marker{display:none} .ws-preview-collapse > summary::marker{content:''} .ws-preview-collapse > summary:hover{opacity:0.7} .ws-preview-body{margin-top:24px} .ws-cohort-head{font-size:13px;color:#86868b;margin-bottom:14px;margin-top:2px} .ws-cohort-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:#f5f5f7;line-height:1.45} .ws-cohort-list li{display:flex;gap:10px;align-items:flex-start} .ws-cohort-list li::before{content:"";flex:0 0 6px;width:6px;height:6px;background:#7fa39a;border-radius:50%;margin-top:8px} .ws-cohort-weeks{display:grid;grid-template-columns:repeat(6,1fr);gap:6px} .ws-cohort-week{ background:#1c1c1e;border-radius:6px;padding:8px 6px; text-align:center;font-size:11.5px;color:#f5f5f7;font-weight:500;letter-spacing:-0.005em; } .ws-cohort-wk-n{display:block;font-size:10px;color:#86868b;font-weight:500;margin-bottom:3px;letter-spacing:0.04em;text-transform:uppercase} @media(max-width:640px){ .ws-cohort-weeks{grid-template-columns:repeat(3,1fr)} } @media(max-width:640px){ .ws-stats{grid-template-columns:repeat(2,1fr)} .ws-signup{flex-direction:column;max-width:none} .ws-view{min-height:0} } .panel{ background:#fff;border:1px solid var(--rule-soft);border-radius:18px; padding:32px 30px;position:relative; display:flex;flex-direction:column;gap:18px; } .panel.col-4{grid-column:span 4} .panel.col-6{grid-column:span 6} .panel.col-7{grid-column:span 7} .panel.col-5{grid-column:span 5} .panel.col-12{grid-column:span 12} @media(max-width:900px){.panel.col-4,.panel.col-7,.panel.col-5,.panel.col-6{grid-column:span 12}} .panel .label{font-size:13px;font-weight:500;color:var(--txt-3)} .panel .label .id{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums} .panel h3{ font-family:inherit;font-weight:600;color:var(--txt); font-size:22px;line-height:1.2;letter-spacing:-0.014em;margin:10px 0 10px; } .panel p{font-size:16px;color:var(--txt-2);line-height:1.5;max-width:50ch} .panel p em{font-style:italic;color:var(--txt);font-weight:500} /* One-line caption that sits under a principle's visual. Always visible even when the prose details are collapsed, so the visual is never mute. */ .panel p.panel-caption{ font-size:13.5px;color:var(--txt-3);font-style:italic; margin:10px 0 0;line-height:1.4;max-width:none; } /* Section 2 principle prose collapses behind a + chip so the visuals read first. Click expands the body; click again collapses it. */ .principle-toggle{ list-style:none;cursor:pointer;user-select:none; display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:50%; border:1px solid var(--rule-soft);background:#fff; color:var(--txt-3);font-size:18px;line-height:1;font-weight:400; margin-top:6px;transition:background-color .15s,color .15s,border-color .15s; } .principle-toggle::-webkit-details-marker{display:none} .principle-toggle::marker{content:''} .principle-toggle:hover{background:#f5f5f7;color:var(--txt)} details.principle-details:not([open]) .principle-toggle::before{content:'+'} details.principle-details[open] .principle-toggle::before{content:'\2212'} /* − */ details.principle-details > p{margin-top:14px} /* Mobile: hide each principle card's visual + caption + prose behind a single + chip in the top-right of the panel. Visitor sees the eyebrow and headline only; tap to reveal the diagram. Desktop keeps the visuals always-on. */ .panel-mobile-btn{display:none} @media (max-width: 560px){ #why .panel.panel-collapsible{position:relative} #why .panel.panel-collapsible > div:first-child{padding-right:36px} #why .panel-mobile-btn{ position:absolute;top:18px;right:14px; width:28px;height:28px;border-radius:50%; border:1px solid var(--rule-soft);background:#fff; color:var(--txt-3);font-size:16px;line-height:1;font-weight:400; display:inline-flex;align-items:center;justify-content:center; cursor:pointer;padding:0;font-family:inherit; } #why .panel-mobile-btn:hover{background:#f5f5f7;color:var(--txt)} #why .panel.panel-collapsible[aria-collapsed="true"] .rooms, #why .panel.panel-collapsible[aria-collapsed="true"] .breath-wrap, #why .panel.panel-collapsible[aria-collapsed="true"] .ev-wrap, #why .panel.panel-collapsible[aria-collapsed="true"] .panel-caption, #why .panel.panel-collapsible[aria-collapsed="true"] details.principle-details{display:none !important} } .panel .readout{display:flex;gap:24px;margin-top:8px;font-size:13px;color:var(--txt-2);font-variant-numeric:tabular-nums;flex-wrap:wrap} .panel .readout span{display:flex;align-items:center;gap:8px;font-weight:500} .panel .readout span::before{content:"";width:7px;height:7px;background:var(--blue);border-radius:50%} .panel .readout span.amber::before{background:var(--orange)} /* breath / argument cycle */ .breath-wrap{margin-top:8px} svg.breath{width:100%;height:100px;display:block} .breath-labels{ display:grid;grid-template-columns:repeat(4,1fr); font-size:11px;color:var(--txt-3);font-weight:500;margin-top:4px; } .breath-labels span{text-align:center} .breath-labels span:first-child{text-align:left} .breath-labels span:last-child{text-align:right} /* EV chart — Hold'em Manager-style 2-line trace adapted to the book's domain: Actual frequency vs Expected Value over thought-count. The orange EV line diverges below the green actual line, showing the accumulating cost of a Frequency-EV-negative loop. */ /* Real-data Frequency-EV chart for principle 03. Gridded axes carry the audit's own 0-600 frequency scale on Y and thought count on X. Jagged polylines mimic the look of a poker session-tracker. Two lines diverge: Potential (cyan, expanding band) drifts higher; Actual (orange, contracting band) drags below. A caption underneath calls it a conceptual model — visual authority without overclaiming. */ .ev-wrap{margin-top:8px} /* The plot row: rotated Y-axis label on the left, SVG on the right. Rendering "Frequency" as HTML (not SVG ) ensures it uses real CSS pixels — same as "Thought count" — instead of being warped by the SVG's preserveAspectRatio="none" scaling. */ .ev-plot{display:flex;align-items:stretch;gap:2px} .ev-y-label{ writing-mode:vertical-rl;transform:rotate(180deg); font-size:13px;color:#6e6e73;font-weight:500; letter-spacing:-0.005em; font-family:ui-sans-serif,system-ui,sans-serif; display:flex;align-items:center;justify-content:center; padding-bottom:24px; /* aligns with the plot area (skipping x-axis label band) */ flex-shrink:0; } svg.ev-chart{width:100%;height:180px;display:block;flex:1;min-width:0} .ev-axis-label{ font-size:13px;color:#6e6e73;font-weight:500; text-align:center;margin-top:0;letter-spacing:-0.005em; font-family:ui-sans-serif,system-ui,sans-serif; } .ev-legend{ display:flex;gap:18px;flex-wrap:nowrap; font-size:12px;color:var(--txt-2);font-weight:500;margin-top:10px; align-items:center;white-space:nowrap; } .ev-legend .dot{ width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px; flex-shrink:0; } .ev-legend .dot.teal{background:#1f7f8a} .ev-legend .dot.coral{background:#d65a1c} /* Honest caption: the chart looks like measured data but isn't. We name this explicitly so a careful reader doesn't feel misled. */ .ev-caption{ font-size:11px;color:var(--txt-3);font-style:italic;margin-top:8px; letter-spacing:-0.005em;line-height:1.4; } /* locality rooms — pill/chip layout that wraps naturally */ .rooms{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .room{ position:relative;display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border:1px solid var(--rule);border-radius:980px; font-size:13px;color:var(--txt);font-weight:600;letter-spacing:-0.005em; background:#f5f5f7;transition:.3s; } .room::before{ content:"";width:6px;height:6px;border-radius:50%; background:#a1a1a6;flex-shrink:0;transition:.3s; } .room.active{border-color:var(--orange);background:#fff;box-shadow:0 0 0 2px rgba(255,149,0,0.12)} .room.active::before{background:var(--orange);box-shadow:0 0 0 4px rgba(255,149,0,0.2)} /* ---------- Object Gravity stage (Principle 01.OBJ — phone in sight) ---------- Replaces the older "rooms" pill grid for the first principle card. A still phone in the center radiates three slow gravity rings; four thought-bubble labels orbit the phone, fading in and out on a long loop so the visual reads as a tide, not a flicker. */ .obj-stage{ position:relative;height:200px;margin-top:8px; background:var(--bg-soft);border-radius:10px;overflow:hidden; } .obj-phone{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:60px;height:112px; background:#0a0a0a;border-radius:10px;border:1.5px solid #1d1d1f; z-index:2; } .obj-phone::after{ content:"";position:absolute;top:8px;left:50%; transform:translateX(-50%); width:28px;height:3px;background:#222;border-radius:2px; } .obj-pulse{ position:absolute;left:50%;top:50%; width:60px;height:112px;border-radius:10px; border:2px solid #ff3b30;opacity:0; transform:translate(-50%,-50%); /* One pass each — last ring (delay 4s) finishes at ~10s, then the phone sits still. The visitor's eye comes back to the bubbles (the thoughts) instead of the gravity field repeating forever. Paused until .obj-stage enters viewport (set by the IO below). Each pulse runs 12s; staggered 0/4/8s so the last one ends at ~20s. */ animation:objPulse 12s ease-out 1 forwards; animation-play-state:paused; z-index:1;pointer-events:none; } .obj-pulse.d2{animation-delay:4s} .obj-pulse.d3{animation-delay:8s} @keyframes objPulse{ 0%{opacity:0.55;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(3.8)} } .obj-bubble{ position:absolute;font-size:10.5px;color:var(--txt-2); font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; background:#fff;padding:5px 11px;border-radius:980px; border:1px solid var(--rule-soft);white-space:nowrap; animation:objFloat 7.2s ease-in-out infinite; animation-play-state:paused; z-index:3; } /* IntersectionObserver flips .obj-stage to .in-view on first scroll-in; that unlocks the pulse + bubble animations. We don't reverse the class — the pulse is one-shot anyway and we don't want bubbles to restart every time the visitor scrolls past. */ .obj-stage.in-view .obj-pulse, .obj-stage.in-view .obj-bubble{ animation-play-state:running; } @media (prefers-reduced-motion: reduce){ .obj-pulse,.obj-bubble{animation:none} .obj-bubble{opacity:0.85} } .obj-bubble.b1{top:14px;left:4%;animation-delay:0s} .obj-bubble.b2{top:34px;right:4%;animation-delay:1.8s} .obj-bubble.b3{bottom:44px;left:4%;animation-delay:3.6s} .obj-bubble.b4{bottom:18px;right:4%;animation-delay:5.4s} @keyframes objFloat{ 0%,100%{opacity:0.18;transform:translateY(0)} 35%,65%{opacity:1;transform:translateY(-4px)} } @media (max-width:560px){ .obj-stage{height:170px} .obj-phone,.obj-pulse{width:50px;height:96px} .obj-bubble{font-size:9.5px;padding:3px 8px} } /* ---------- Self-Enquiry Audit (matrix) ---------- */ .matrix{ background:#fff;border:1px solid var(--rule-soft);border-radius:24px; max-width:1080px;margin:0 auto;padding:36px; box-shadow:0 1px 0 rgba(0,0,0,0.02); } .m-intake{max-width:560px;margin:8px auto;padding:8px 0 8px} .m-intake .m-eyebrow{display:block;margin-bottom:14px} .m-intake h3{ font-family:var(--serif);font-weight:400; font-size:clamp(28px,4vw,40px);line-height:1.05;letter-spacing:-0.018em; margin:0 0 18px;color:var(--txt); } .m-intake-lede{ font-size:16px;line-height:1.55;color:var(--txt-2); margin:0 0 28px;max-width:54ch; } .m-intake-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:10px} .m-intake-field{ display:grid;grid-template-columns:1.4fr 1fr auto;gap:14px;align-items:end; padding:14px 16px;background:#fbfbfd;border:1px solid var(--rule-soft);border-radius:12px; } .m-intake-col{display:flex;flex-direction:column;gap:6px;min-width:0} .m-intake-lbl{ font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:0.08em; font-weight:500; } .m-intake-input,.m-intake-select{ border:0;background:transparent;outline:0;font:inherit; font-size:16px;color:var(--txt);padding:4px 0; border-bottom:1px solid var(--rule-soft); width:100%; } .m-intake-select{ appearance:none;-webkit-appearance:none;cursor:pointer; background:url('data:image/svg+xml;utf8,') no-repeat right 2px center / 10px 6px; padding-right:18px; } .m-intake-input::placeholder{color:var(--txt-3)} .m-intake-input:focus,.m-intake-select:focus{border-bottom-color:var(--txt)} .m-howto{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; margin:-8px 0 32px;padding:22px; background:#fbfbfd;border:1px solid var(--rule-soft);border-radius:12px; } .m-howto-step .n{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:11px;color:var(--blue);font-weight:500;margin-bottom:6px;display:block;letter-spacing:0.04em; } .m-howto-step h4{font-family:inherit;font-weight:600;font-size:13px;color:var(--txt);letter-spacing:-0.005em;margin:0 0 4px} .m-howto-step p{font-size:12.5px;color:var(--txt-2);line-height:1.5;margin:0} .m-howto-step p em{font-style:italic;color:var(--txt);font-weight:500} @keyframes mShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} .m-intake-shake{animation:mShake .35s ease;border-bottom-color:#c44 !important} .m-intake-rm{ align-self:end; background:transparent;border:0;cursor:pointer; width:28px;height:28px;border-radius:6px; color:var(--txt-3);font-size:18px;line-height:1; } .m-intake-rm:hover{background:#eee;color:var(--txt)} .m-intake-add{ margin-top:6px;width:100%; background:transparent;border:1px dashed var(--rule);color:var(--txt-2); padding:14px;border-radius:10px;cursor:pointer;font:inherit;font-size:13px; } .m-intake-add:hover{border-color:var(--txt);color:var(--txt)} .m-intake-add[disabled]{opacity:0.45;cursor:not-allowed} .m-intake-cta{margin-top:32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .m-start{padding:0} .m-start-cta{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin-top:28px} .m-start-cta .m-intake-go{padding:12px 22px} .m-start-skip{ appearance:none;background:transparent;border:1px solid var(--rule); color:var(--txt-3);font:inherit;font-weight:400;font-size:13px; padding:11px 16px;border-radius:10px;letter-spacing:-0.005em; text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px; justify-content:center;white-space:nowrap; } /* ---------- Two-column audit intro ---------- */ .audit-intro{ display:grid;grid-template-columns:1fr 378px; gap:48px;align-items:center; max-width:1040px;margin:0 auto 40px; } /* Awakening-woman drawing (white line art) — replaces the example card */ .awaken-fig{margin:0 auto;width:378px;max-width:100%} /* fill the column; margin auto centers it when stacked on mobile */ .awaken-fig img{display:block;width:100%;height:auto} /* woven non-dual thread — quiet aside, dark sections only. Lived in index's takeaways style block after the phase-1 split; audit.html needs it too, so it now lives here (duplicate on index is harmless). */ #calc .thread{max-width:600px;margin:24px 0 0;border-left:2px solid rgba(255,255,255,.35);padding:8px 0 8px 18px;font-family:'Fraunces','New York',ui-serif,Georgia,serif;font-style:italic;font-size:16px;line-height:1.55;color:rgba(255,255,255,.78)} .thread-mobile{display:none} /* desktop: thread stays in the copy column */ .audit-intro-copy{min-width:0} .audit-intro .sec-head{ text-align:left;margin:0;max-width:none; } .audit-intro .sec-head h2{margin-left:0;margin-right:0;max-width:18ch} .audit-intro .sec-head p{margin-left:0;margin-right:0} .audit-intro-example{min-width:0;justify-self:end} .audit-intro-example .m-example-output{margin:0;max-width:none;width:300px} /* Bind intro visibility to the existing mStart state flag (used by JS). */ .audit-intro{display:grid} #calc:has(#mStart[hidden]) .audit-intro{display:none} @media (max-width:820px){ .audit-intro{ grid-template-columns:1fr;gap:30px; text-align:center;margin-bottom:32px; } .audit-intro .sec-head{text-align:center} .audit-intro .sec-head h2{margin-left:auto;margin-right:auto;max-width:14ch} .audit-intro .sec-head p{margin-left:auto;margin-right:auto;max-width:60ch} .audit-intro-example{justify-self:center} .audit-intro-example .m-example-output{width:auto;max-width:560px} .m-start-cta{justify-content:center} .thread-desktop{display:none} /* mobile: hide the left-column copy */ .thread-mobile{display:block;margin-top:18px} /* mobile: pair under the drawing */ } .m-start-skip:hover{border-color:var(--txt-2);color:var(--txt-2)} /* ---- Example Mental Output preview card (shown above Get started) ---- */ .m-example-output{ background:#fbfbfd;border:1px solid var(--rule-soft);border-radius:14px; padding:20px 22px;margin:0 auto;max-width:560px; } .m-example-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .m-example-label{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:10px;color:var(--txt-3);font-weight:600; letter-spacing:0.08em;text-transform:uppercase; } .m-example-rows{display:flex;flex-direction:column;gap:12px;margin-bottom:14px} .m-example-row{display:flex;align-items:center;gap:12px} .m-example-name{min-width:108px} .m-example-name strong{ font-size:12.5px;font-weight:600;color:var(--txt);letter-spacing:-0.005em; display:block; } .m-example-name span{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:9.5px;color:var(--txt-3);letter-spacing:0.06em; text-transform:uppercase;margin-top:1px;display:block; } .m-example-seq{flex-shrink:0} .m-example-tag{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:9.5px;color:var(--txt-3);letter-spacing:0.06em; text-transform:uppercase; } .m-example-foot{ padding-top:12px;border-top:1px solid var(--rule-soft); } .m-example-foot-lbl{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:10px;color:var(--txt-3);font-weight:600; letter-spacing:0.06em;text-transform:uppercase;display:block; } .m-example-foot-v{ font-weight:600;font-size:22px;color:var(--txt); margin-top:3px;font-variant-numeric:tabular-nums;display:block; } @media(max-width:560px){ .m-example-output{padding:16px 14px} .m-example-name{min-width:88px} .m-example-name strong{font-size:11.5px} .m-example-row{gap:8px} .m-example-seq{width:84px} } /* While only the Get started screen is visible, drop the matrix card — the bare button should sit on the section background, not inside a card. */ #calc .matrix:has(> #mStart:not([hidden])):not(:has(> #mIntake:not([hidden]))):not(:has(> #mAuditBody:not([hidden]))){ background:transparent;border-color:transparent;box-shadow:none;padding:0; } .m-intake-go{ background:var(--txt);color:#fff;border:0;cursor:pointer; padding:14px 24px;border-radius:10px;font:inherit;font-size:14px;font-weight:500; letter-spacing:-0.005em; } .m-intake-go:hover{background:#000} .m-intake-go[disabled]{opacity:0.4;cursor:not-allowed} .m-intake-example{ background:transparent;border:0;cursor:pointer;color:var(--txt-3); font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px; padding:4px 0; } .m-intake-example:hover{color:var(--txt)} .matrix-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:16px; padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--rule-soft);flex-wrap:wrap; } .matrix-head h3{font-family:inherit;font-weight:600;font-size:22px;letter-spacing:-0.014em;color:var(--txt);line-height:1.2;margin-top:6px} .m-eyebrow{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:11px;color:var(--blue);font-weight:500;letter-spacing:0.04em;text-transform:uppercase} .m-reset{ background:transparent;border:1px solid var(--rule);color:var(--txt-2); font-family:inherit;font-size:13px;font-weight:500; padding:8px 14px;border-radius:980px;cursor:pointer; transition:background .15s,color .15s; } .m-reset:hover{background:var(--bg-soft);color:var(--txt)} .m-stories{display:flex;flex-direction:column;gap:14px} .m-card{ background:var(--bg-soft);border:1px solid var(--rule-soft);border-radius:14px; padding:20px 22px;display:grid;gap:14px;position:relative; grid-template-columns:repeat(12,1fr); } .m-card .f{display:flex;flex-direction:column;gap:5px;min-width:0} .m-card .f .lbl{ font-size:10px;color:var(--txt-3);font-weight:600;letter-spacing:0.06em;text-transform:uppercase; } .m-card .f .lbl em{font-style:normal;color:var(--txt-3);font-weight:400;text-transform:none;letter-spacing:0;margin-left:6px;font-size:11px} .m-card input[type=text], .m-card select{ width:100%;border:none;background:transparent; font-family:inherit;font-size:14px;color:var(--txt);font-weight:500; padding:6px 0;border-bottom:1px solid var(--rule-soft); outline:none;letter-spacing:-0.005em; transition:border-color .15s; } .m-card input[type=text]:focus, .m-card select:focus{border-bottom-color:var(--blue)} .m-card input[type=text]::placeholder{color:var(--txt-3);font-weight:400} .m-card select{appearance:none;-webkit-appearance:none;cursor:pointer;background:url('data:image/svg+xml;utf8,') no-repeat right 4px center} .m-card .f-name{grid-column:span 4} .m-card .f-topic{grid-column:span 4} .m-card .f-age{grid-column:span 4} .m-card .f-role{grid-column:span 4} .m-card .f-escalation{grid-column:span 4} .m-card .f-compulsion{grid-column:span 4} .m-card .f-emotion{grid-column:span 4} .m-card .f-position{grid-column:span 4} .m-card .f-interest{grid-column:span 4} .m-card .f-inter{grid-column:span 6;border-top:1px dashed var(--rule-soft);padding-top:14px;margin-top:2px} /* Emotion / Position / Importance fill the last row (4+4+4). Interest and Inter-relation were removed from intake (derived / inferred). */ .m-card .f-grav{grid-column:span 4} /* chip-grid controls on the stories edit screen (#calc is always dark) */ #calc .m-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} #calc .m-chip{border:1px solid #2a2a2c;background:transparent;color:#a1a1a6;border-radius:999px; padding:6px 13px;font-size:13px;cursor:pointer;font-family:inherit;line-height:1.2; transition:border-color .12s,color .12s,background .12s} #calc .m-chip:hover{border-color:#4a4a4d;color:#f5f5f7} #calc .m-chip.on{background:#2c2c2e;border-color:#5f5e5a;color:#fff} #calc .m-chip.dim{opacity:.4;pointer-events:none} #calc .f-emotion .m-emo-cnt{color:#e8e6df;font-variant-numeric:tabular-nums} /* ---- chip-grid accordion edit card ---- */ #calc .cg-card{background:#111;border:1px solid #2a2a2c;border-radius:12px;overflow:hidden;margin-bottom:10px} #calc .cg-card.locked{opacity:.45} #calc .cg-hdr{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer} #calc .cg-card.locked .cg-hdr{cursor:default} #calc .cg-card.open .cg-hdr{cursor:default;border-bottom:1px solid rgba(255,255,255,0.06)} #calc .cg-idx{font-size:11px;color:#86868b;font-variant-numeric:tabular-nums} #calc .cg-title{font-size:15px;font-weight:500;flex:0 1 auto;color:#f5f5f7} #calc .cg-name{background:transparent;border:none;border-bottom:1px solid #2a2a2c;color:#f5f5f7;font-size:15px;font-weight:500;padding:3px 2px;flex:0 1 200px;min-width:120px;font-family:inherit} #calc .cg-name:focus{outline:none;border-bottom-color:#f5f5f7} #calc .cg-name::placeholder{color:#6e6e73} #calc .cg-cat{appearance:none;-webkit-appearance:none;background-color:transparent;border:1px solid transparent;color:#a1a1a6;padding:5px 22px 5px 8px;border-radius:7px;font-size:12px;font-family:inherit;cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 6px center} #calc .cg-cat:hover{color:#f5f5f7} #calc .cg-cat:focus{outline:none;color:#f5f5f7} #calc .cg-cat option{background:#111;color:#f5f5f7} #calc .cg-cat-static{font-size:12px;color:#86868b} #calc .cg-st{font-size:11px;letter-spacing:0.03em;color:#86868b;display:flex;align-items:center;gap:6px;margin-left:auto} #calc .cg-st.done{color:#f5f5f7;font-weight:600} /* next card stays dim until the current card is complete, then lightens */ #calc .cg-nextcard .cg-hdr{cursor:pointer} #calc .cg-nextcard .cg-title{color:#5a5a5d;transition:color .2s} #calc .cg-nextcard .cg-cat-static{color:#4a4a4d} #calc .cg-nextcard .cg-st{color:#4a4a4d} #calc .cg-nextcard.ready .cg-title{color:#f5f5f7} #calc .cg-nextcard.ready .cg-cat-static{color:#86868b} #calc .cg-nextcard.ready .cg-st{color:#a1a1a6} /* ---- needs-underneath spectrum (result screen) ---- */ #calc .m-needspectrum{background:#0a0a0a;border:1px solid #1c1c1e;border-radius:12px;padding:16px 18px;margin-top:10px} #calc .m-needspectrum:empty{display:none} /* card headers match the stat labels (Dominant type): sans, 600, #86868b */ #calc .m-need-lbl{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:#86868b;font-weight:600;margin-bottom:11px} #calc .m-need-bar{display:flex;gap:3px} #calc .m-need-cell{flex:1;min-width:0;border:1px solid #2a2a2c;border-radius:4px;padding:8px 2px 7px;text-align:center;position:relative} #calc .m-need-cell.off{opacity:.4} #calc .m-need-cell::after{content:attr(data-full);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1c1c1e;border:1px solid #2a2a2c;color:#f5f5f7;font-size:10.5px;padding:3px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:6} #calc .m-need-cell:hover{opacity:1} #calc .m-need-cell:hover::after{opacity:1} #calc .m-need-ab{font-size:9.5px;color:#f5f5f7} #calc .m-need-cell.off .m-need-ab{color:#6e6e73} #calc .m-need-ct{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:600;background:#f5f5f7;color:#0a0a0a;border-radius:7px;padding:0 4px;line-height:13px;min-width:13px} #calc .m-need-foot{font-size:11px;color:#86868b;margin-top:12px} #calc .m-need-foot strong{color:#a1a1a6;font-weight:500} /* escalation + compulsion: exactly two chips per row, packed tight. A JS break element (.cg-brk) forces the wrap after the 2nd chip — no column grid, so no hole after the shorter chip. row-gap 3px: the zero-height break line sits between two 3px gaps, netting the usual 6px rhythm. */ #calc .cg-row2 .cg-chips{row-gap:3px} #calc .cg-brk{flex-basis:100%;height:0} /* ---- mental load (result screen) ---- */ #calc .m-mentalload{background:#0a0a0a;border:1px solid #1c1c1e;border-radius:12px;padding:16px 18px;margin-top:10px} #calc .m-mentalload:empty{display:none} #calc .m-ml-sub{font-size:11.5px;color:#86868b;margin:0 0 13px;line-height:1.5} #calc .m-ml-row{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;margin-bottom:9px} /* story names sit below the card header in visual weight */ #calc .m-ml-nm{font-size:12px;font-weight:400;color:#a1a1a6} #calc .m-ml-nm small{display:block;font-size:10.5px;color:#86868b;font-weight:400;text-transform:uppercase;letter-spacing:0.04em;margin-top:1px} #calc .m-ml-bar{position:relative;height:20px;background:#16242E;border-radius:5px;overflow:hidden} #calc .m-ml-bar i{display:block;height:100%;border-radius:5px;position:relative} #calc .m-ml-thr{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1.5px dashed #6e6e73;z-index:2} #calc .m-ml-top{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:9.5px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap} #calc .m-ml-score{font-size:12.5px;color:#f5f5f7;font-weight:600;font-variant-numeric:tabular-nums} #calc .m-ml-row.heaviest{position:relative} #calc .m-ml-row.heaviest .m-ml-nm{cursor:help} #calc .m-ml-row.heaviest:hover::after{content:attr(data-risk);position:absolute;left:142px;top:calc(100% + 2px);z-index:20;background:#2c2c2e;color:#f5f5f7;font-size:11px;line-height:1.45;font-weight:400;border:1px solid #3a3a3d;border-radius:7px;padding:8px 11px;max-width:320px;box-shadow:0 6px 20px rgba(0,0,0,.45);pointer-events:none} #calc .m-ml-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} #calc .m-ml-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:10.5px;color:#86868b;align-items:center} #calc .m-ml-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px} /* "heaviest" tag clips inside the short mobile bars — hide it there */ @media(max-width:560px){ #calc .m-ml-top{display:none} } #calc .cg-del{background:none;border:none;color:#6e6e73;font-size:18px;line-height:1;cursor:pointer;padding:0 2px} #calc .cg-del:hover{color:#f5f5f7} #calc .cg-body{padding:6px 18px 18px} #calc .cg-field{margin:14px 0} #calc .cg-flbl{font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:#86868b;margin-bottom:7px;display:flex;gap:8px;align-items:baseline} #calc .cg-flbl em{font-style:normal;text-transform:none;letter-spacing:0;color:#6e6e73} #calc .cg-badge{text-transform:none;letter-spacing:0;color:#e8e6df;font-size:10.5px;font-weight:500;display:inline-flex;align-items:center;gap:5px} #calc .cg-badge .cg-cnt{color:#e8e6df;font-variant-numeric:tabular-nums} #calc .cg-chips{display:flex;flex-wrap:wrap;gap:6px} #calc .cg-chip{border:1px solid #2a2a2c;background:#0a0a0a;color:#a1a1a6;border-radius:999px;padding:6px 13px;font-size:13px;cursor:pointer;user-select:none;font-family:inherit;line-height:1.2;transition:border-color .12s,color .12s,background .12s} #calc .cg-chip:hover{border-color:#4a4a4d;color:#f5f5f7} #calc .cg-chip.on{background:#2c2c2e;border-color:#5f5e5a;color:#fff} #calc .cg-chip.dim{opacity:.4;pointer-events:none} #calc .cg-row2{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start} /* paired fields share the row 50/50 and stay side-by-side (left-aligned); wide chip labels wrap INSIDE each field instead of dropping the whole second field onto its own line. flex-basis:0 + min-width:0 keeps them on one row down to very narrow widths, then wraps gracefully. */ #calc .cg-row2 .cg-field{flex:1 1 0;min-width:0;max-width:100%} #calc .cg-grav{-webkit-appearance:none;appearance:none;width:100%;max-width:360px;height:4px;border-radius:2px;background:#2a2a2c;outline:none;margin:6px 0} #calc .cg-grav::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#a1a1a6;cursor:pointer;border:none} #calc .cg-grav::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#a1a1a6;cursor:pointer;border:none} #calc .cg-foot{margin-top:20px;display:flex;justify-content:flex-end} #calc .cg-next{border:1px solid #fff;background:#fff;color:#000;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit} #calc .cg-next:hover{background:#eaeaea} @keyframes cgMiss{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}60%{transform:translateX(4px)}} #calc .cg-field.miss{animation:cgMiss .34s ease} #calc .cg-field.miss .cg-flbl{color:#df6f6f} .m-card-head{ grid-column:span 12; display:flex;align-items:center;gap:12px;cursor:pointer; padding:0;margin:-4px 0 4px;user-select:none; } .m-card-head .idx{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:11px;color:var(--txt-3);font-weight:500;letter-spacing:0.04em; } .m-card-head .title{ font-size:15px;font-weight:600;color:var(--txt-1);letter-spacing:-0.01em;flex:1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .m-card-head .status{ font-size:11px;font-weight:500;color:var(--txt-3); text-transform:uppercase;letter-spacing:0.06em; padding:3px 8px;border:1px solid var(--rule);border-radius:999px;background:#fff; } .m-card-head .status.done{color:#1d7a4a;border-color:#cfe9d8;background:#e9f5ee} .m-card-head .chev{width:11px;height:7px;color:var(--txt-3);transition:transform .15s} .m-card.collapsed{padding:14px 22px;gap:0} .m-card.collapsed .m-card-head{margin:0} .m-card.collapsed .m-card-head .chev{transform:rotate(-90deg)} .m-card.collapsed > .f, .m-card.collapsed > .m-del{display:none} .m-card:not(.collapsed) .m-card-head{padding-bottom:10px;border-bottom:1px dashed var(--rule-soft)} .m-card.flash{animation:mCardFlash 0.9s ease} .m-card.shake{animation:mCardShake .42s ease-in-out} @keyframes mCardShake{ 0%, 100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} } @keyframes mCardFlash{ 0%{box-shadow:0 0 0 0 rgba(217,87,87,0.0)} 20%{box-shadow:0 0 0 4px rgba(217,87,87,0.18)} 100%{box-shadow:0 0 0 0 rgba(217,87,87,0.0)} } /* Importance side mirrors the inter-relation layout structure: header row (label + readout) on top, slider track alone below. Visually symmetric with the inter side (label + "Link to story" button on top, chips below). */ .m-card .grav-head{display:flex;align-items:baseline;gap:14px} /* Push the slider down so it sits at the same baseline as the inter- relation chip strip on the left half of the row. The chips have ~10px of vertical padding plus a gap from the header — together about 26px below the label-row's baseline. Match it. */ .m-card .grav-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px} .m-card .grav-row input[type=range]{flex:1;min-width:160px;accent-color:var(--blue)} .m-card .grav-label{ font-size:13px;font-weight:600;color:var(--txt);letter-spacing:-0.005em; font-variant-numeric:tabular-nums; } .m-card .grav-label .n{color:var(--blue)} .m-card .m-del{ position:absolute;top:14px;right:14px; width:28px;height:28px;border-radius:8px;border:none;background:transparent; color:var(--txt-3);cursor:pointer;display:flex;align-items:center;justify-content:center; font-size:16px;line-height:1;font-family:inherit; transition:background .15s,color .15s; } .m-card .m-del:hover{background:rgba(255,59,48,0.08);color:var(--red)} .m-multi{position:relative;padding-top:2px} .m-chips{ display:flex;flex-wrap:wrap;gap:6px;min-height:30px; padding:4px 0;border-bottom:1px solid var(--rule-soft); align-items:center; } .m-chip{ display:inline-flex;align-items:center;gap:6px; background:#fff;border:1px solid var(--rule-soft);border-radius:980px; padding:3px 4px 3px 10px;font-size:12px;font-weight:500;color:var(--txt); letter-spacing:-0.005em; } .m-chip .x{ width:18px;height:18px;border-radius:50%;border:none;background:transparent; color:var(--txt-3);cursor:pointer;display:flex;align-items:center;justify-content:center; font-size:14px;line-height:1;padding:0;font-family:inherit; } .m-chip .x:hover{background:rgba(255,59,48,0.08);color:var(--red)} .m-chip-empty{font-size:12px;color:var(--txt-3);font-weight:400} .m-multi-trigger{ background:transparent;border:1px dashed var(--rule);color:var(--txt-2); font-family:inherit;font-size:12px;font-weight:500; padding:3px 10px;border-radius:980px;cursor:pointer; transition:border-color .15s,color .15s; } .m-multi-trigger:hover{border-color:var(--blue);color:var(--blue)} .m-multi-trigger:disabled{opacity:0.4;cursor:not-allowed} .m-multi-menu{ position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:5; background:#fff;border:1px solid var(--rule-soft);border-radius:12px; box-shadow:0 8px 24px -8px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.04); padding:6px;display:none;max-height:240px;overflow:auto; } .m-multi.open .m-multi-menu{display:block} .m-multi-opt{ display:flex;align-items:center;gap:10px; padding:8px 10px;border-radius:8px;cursor:pointer; font-size:13px;color:var(--txt);font-weight:500; } .m-multi-opt:hover{background:var(--bg-soft)} .m-multi-opt input{accent-color:var(--blue);cursor:pointer} .m-multi-empty{padding:12px;font-size:12px;color:var(--txt-3);text-align:center} .m-nolink-opt{font-style:italic;opacity:0.8;border-bottom:1px solid var(--rule-soft);margin-bottom:4px;padding-bottom:8px} .m-add{ margin-top:14px;width:100%; background:transparent;border:1px dashed var(--rule);color:var(--txt-2); font-family:inherit;font-size:14px;font-weight:500; padding:14px;border-radius:14px;cursor:pointer; transition:border-color .15s,color .15s,background .15s; } .m-add:hover{border-color:var(--blue);color:var(--blue);background:rgba(0,113,227,0.03)} .m-calc{ margin-top:14px;width:100%; background:#1d1d1f;color:#fff;border:none; font-family:inherit;font-size:14px;font-weight:500; padding:14px;border-radius:14px;cursor:pointer; transition:background .15s;letter-spacing:-0.005em; } .m-calc:hover{background:#000} .m-result-head{ display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center; padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--rule-soft); } .m-result-head .m-result-title{text-align:left;min-width:0} .m-result-head .m-eyebrow{display:block;margin-bottom:6px} .m-result-head h3{ font-family:var(--serif);font-weight:400; font-size:clamp(22px,2.4vw,28px);line-height:1.1;letter-spacing:-0.01em; margin:0;color:var(--txt); } .m-result-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .m-back{ background:transparent;border:1px solid var(--rule);color:var(--txt-2); padding:8px 14px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px; white-space:nowrap; } .m-back:hover{border-color:var(--txt);color:var(--txt)} .m-recalc{ background:transparent;border:1px solid var(--rule);color:var(--txt-2); padding:8px 14px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px; white-space:nowrap; } .m-recalc:hover{border-color:var(--txt);color:var(--txt)} .m-result{margin-top:24px;display:flex;flex-direction:column;gap:18px} .m-thoughts-wrap{ background:#fbfbfd;border:1px solid var(--rule-soft);border-radius:14px; padding:24px 26px; } .m-phase-slider{ position:relative;display:inline-flex;align-items:stretch; background:rgba(0,0,0,0.04);border:1px solid var(--rule-soft); border-radius:999px;padding:3px;gap:0; } .m-phase-slider-thumb{ position:absolute;top:3px;bottom:3px;left:3px; width:calc(50% - 3px);background:rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.16); border-radius:999px; transition:transform .25s cubic-bezier(.4,0,.2,1); z-index:0; } .m-phase-slider[data-active="2"] .m-phase-slider-thumb{transform:translateX(100%)} .m-phase-slider-opt{ position:relative;z-index:1; background:transparent;border:0; padding:6px 18px;font-family:inherit;font-size:12px;font-weight:500; color:var(--txt-3);cursor:pointer;letter-spacing:-0.005em; min-width:88px;border-radius:999px; transition:color .2s; } .m-phase-slider-opt.active{color:var(--txt);font-weight:600} .m-phase-slider-opt:not(.active):hover{color:var(--txt)} .m-phases-stack{display:grid;grid-template-areas:"p"} .m-phase-print-title{display:none} .m-phase{grid-area:p;visibility:hidden;pointer-events:none} .m-phase.active{visibility:visible;pointer-events:auto} .m-phase-2{position:relative;cursor:pointer;background:transparent;border-radius:10px;overflow:visible} .m-circuit-svg{width:100%;display:block} .m-circuit-hint{ position:absolute;top:-22px;right:14px;margin-top:6px; font-size:10px;color:#86868b;font-weight:500; letter-spacing:0.04em;text-transform:uppercase;pointer-events:none; transition:opacity .25s; } .m-phase-2.paused .m-circuit-hint::after{content:" · PAUSED"} /* Two-sentence legend under the Phase 2 orbit so the visual isn't mute on first read. Centered, low-contrast, max-width for readability. */ .m-circuit-caption{ margin:14px auto 0;max-width:60ch; font-size:13px;line-height:1.5;color:var(--txt-3); text-align:center;letter-spacing:-0.005em; } #calc .m-circuit-caption{color:#86868b} .m-formation{cursor:pointer} .m-formation:hover use{stroke-width:2} .m-tooltip{ position:absolute;pointer-events:none; background:#1d1d1f;color:#f5f5f7;padding:10px 14px; border:1px solid #2a2a2c;border-radius:8px; font-size:12px;line-height:1.5;letter-spacing:-0.005em; max-width:240px;z-index:10;opacity:0; transition:opacity .15s; box-shadow:0 4px 12px rgba(0,0,0,.4); } .m-tooltip.visible{opacity:1} .m-tooltip .tt-name{font-weight:600;font-size:13px;color:#fff;margin-bottom:4px} .m-tooltip .tt-row{display:flex;gap:6px;color:#cfcfd4} .m-tooltip .tt-lbl{color:#86868b;min-width:78px} .m-thoughts-head{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; margin-bottom:18px; } .m-thoughts-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .m-thoughts-legend .lg{ display:inline-flex;align-items:center;gap:6px; font-size:11px;color:var(--txt-3);font-weight:500;letter-spacing:-0.005em; } .m-thoughts-legend .lg::before{ content:"";width:16px;height:13px;display:inline-block; background:transparent;border:0; background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat;background-size:contain;background-position:center; } .m-thoughts-legend .lg-e::before{ background-image:url('data:image/svg+xml;utf8,'); } .m-thoughts-legend .lg-pc::before{ background:#1a1a1a;border-radius:50%;width:11px;height:11px;background-image:none; } .m-thoughts-legend .lg-pe::before{ background:transparent;border:1.5px solid #1a1a1a;border-radius:50%;width:11px;height:11px;background-image:none; } /* Emotionally-charged: parallelogram split diagonally — Anger left, Love right. No inner dot. Shows that a charged thought can hold two emotional pulls at once. */ .m-thoughts-legend .lg-ec::before{ width:16px;height:13px;background:transparent;border:0;clip-path:none; background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat;background-size:contain;background-position:center; } /* Mind icon: dark core with grey halo, mirrors the Phase 2 sphere. */ .m-thoughts-legend .lg-mind::before{ width:18px;height:13px;background:transparent;border:0;border-radius:0;clip-path:none; background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat;background-size:contain;background-position:center; } /* The Mind chip only applies to the Phase 2 circuit — hide it while the slider is on Phase 1 (Sequence). */ .m-phase-slider[data-active="1"] ~ .m-thoughts-legend .lg-mind{display:none} .m-thoughts{ display:flex;flex-direction:column;justify-content:center;gap:34px; height:100%; } .m-phase-1{display:flex;flex-direction:column} .m-thought-row{ display:grid;grid-template-columns:120px auto 1fr;gap:12px;align-items:center; position:relative;z-index:1; } .m-thought-label{ font-size:13px;font-weight:600;color:var(--txt);letter-spacing:-0.005em; line-height:1.25;min-width:0; } .m-thought-label .topic{display:block;font-size:11px;color:var(--txt-3);font-weight:500;text-transform:uppercase;letter-spacing:0.06em;margin-top:2px} .m-thought-label .grav{color:var(--txt-3);font-weight:400;letter-spacing:0;text-transform:none;margin-left:4px} .m-thought-label .topic em{font-style:normal} .m-thought-row.unnamed .m-thought-label{color:var(--txt-3);font-weight:500} .m-thought-label .m-thought-links{ display:block;font-size:11px;color:var(--blue);font-weight:500; margin-top:3px;letter-spacing:-0.005em;line-height:1.35; } .m-thought-seq{ display:flex;align-items:center;gap:0;flex-wrap:nowrap;min-height:32px; } .m-thought-seq > svg + svg{margin-left:-2px} /* ---- V4: a Phase 1 row expands in place into its dictionary entry ---- The dict body is a full-width second grid row, so the glyph columns (and the bridge X-math that keys off them) are untouched while collapsed. Bridges fade while any row is open, since their %-of-chain-height anchors don't hold once a row grows. */ .m-thought-row .m-thought-label,.m-thought-row .m-thought-seq{cursor:pointer} /* expand affordance: a white chevron after the story name, rotates down when open */ .m-dict-chev{display:inline-block;margin-left:7px;color:#f5f5f7;opacity:.65;vertical-align:1px;transition:transform .25s ease,opacity .2s ease} .m-thought-row.dict-open .m-dict-chev{transform:rotate(90deg);opacity:1} /* emotions are surfaced inside the dictionary definition now — drop the duplicate on-row label for a cleaner sequence */ .m-thought-row .m-thought-meta{display:none} /* opaque card bg + above the bridge layer so the open entry paints over the interrelation line — the dashed line then shows only in the gap below */ .m-thought-dict{grid-column:1 / -1;max-height:0;overflow:hidden;transition:max-height .35s ease;position:relative;z-index:2;background:#111} .m-thought-row.dict-open .m-thought-dict{max-height:260px} .m-thought-dict-in{padding:10px 0 14px;border-top:1px solid var(--rule-soft);margin-top:8px} .m-dict-def{font-size:13px;line-height:1.55;color:var(--txt-2);margin:0 0 10px;max-width:66%} @media (max-width:560px){ #calc .m-dict-def{max-width:none} } .m-dict-reveal{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--txt-2);margin:6px 0} .m-dict-lbl{color:var(--txt-3);font-size:11.5px} .m-dict-need{position:relative;color:#f5f5f7;font-weight:600} .m-dict-need::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:#f5f5f7} /* reveal animation plays only the FIRST time each card opens — JS adds .dict-animate once per row; after it's removed the need just shows. */ @keyframes mNeedReveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} @keyframes mNeedSweep{from{right:100%}to{right:0}} .m-thought-row.dict-animate .m-dict-need{animation:mNeedReveal .45s ease both} .m-thought-row.dict-animate .m-dict-need::after{animation:mNeedSweep .5s ease .35s both} .m-dict-meta{display:flex;flex-wrap:wrap;gap:5px 16px;font-size:11.5px;color:var(--txt-3);margin-top:8px} .m-dict-meta b{color:var(--txt-2);font-weight:500} /* Interruptors — clustered outline glyphs with sub-labels */ .m-thought-interruptors .m-int-seq{display:flex;align-items:center;gap:0;flex-wrap:wrap} /* beat the mobile #calc .m-thought-seq{flex-wrap:nowrap} so the DE cluster labels can break onto a second line instead of clipping right */ #calc .m-thought-interruptors .m-int-seq{flex-wrap:wrap;row-gap:8px} .m-int-cluster{display:inline-flex;flex-direction:column;align-items:center;gap:5px} .m-int-glyphs{display:flex;align-items:center;gap:0} .m-int-glyphs > svg + svg{margin-left:-2px} .m-int-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:0.05em;color:#86868b;white-space:nowrap} .m-int-gap{width:26px;flex:0 0 26px} /* V4 reflow: bridge top/height are recomputed in JS from measured row positions on expand, so the inferred lines track the rows instead of fading. (No dict-active fade needed.) */ /* Glyph ignition: when .m-thoughts-wrap has .run, fade each glyph's emotion fill in left-to-right. Frame (stroke) stays visible the whole time — the band is always there waiting for the charge to arrive. Per-glyph delay set inline. Outside .run, no animation applies and glyphs render statically. */ @keyframes mGlyphIgnite{from{fill-opacity:0}to{fill-opacity:0.5}} @keyframes mGlyphDotIgnite{from{opacity:0}to{opacity:1}} /* Only animate glyphs inside actual story rows. Bridge-overlay glyphs are metadata about the rows above/below — they shouldn't ignite as if they were their own loop, and their inline fill-opacity (50% / 20% etc.) must not be overridden by the keyframe's terminal fill-opacity:1. */ .m-thoughts-wrap.run .m-thought-row .m-glyph-fill{ fill-opacity:0; animation:mGlyphIgnite 1.68s ease-out both; } .m-thoughts-wrap.run .m-thought-row .m-glyph-dot{ opacity:0; animation:mGlyphDotIgnite 1.68s ease-out both; } /* Bridge visibility states: Default (no .run, no .revealed) → invisible. Prevents the pop-up flash during render or re-render before the animation kicks in. wrap.run (animation in progress) → invisible UNTIL the per-bridge .lit class is added wave-by-wave. wrap.revealed (animation finished) → all bridges visible. Survives re-renders triggered by edits. This means at all times: bridges are visible only when allowed, never accidentally visible mid-stage. */ .m-thought-bridge-overlay{ position:absolute;left:0;right:0; pointer-events:none;z-index:0; display:flex;align-items:flex-start; opacity:0; transition:opacity 1s ease-out; /* top + height set inline per-bridge to span row centers */ } .m-thought-bridge-overlay.lit{opacity:1} .m-thoughts-wrap.revealed .m-thought-bridge-overlay{opacity:1} .m-thought-chain{ display:flex;flex-direction:column;gap:34px; position:relative; } .m-bridge-svg{ display:block;flex-shrink:0;height:100%;overflow:visible; } /* Bridge line + anchor node — a thin tied connection between two loops. Solid for user-declared links, dashed (via inline stroke-dasharray on the element) for inferred ones. */ .m-bridge-line{vector-effect:non-scaling-stroke} .m-bridge-backdrop{display:none} .m-bridge-note{ margin-left:10px;font-size:10.5px;color:var(--txt-3);letter-spacing:-0.005em; font-style:italic;white-space:nowrap;overflow:visible; max-width:none;align-self:center; } .m-bridge-note em{ font-style:normal;font-weight:600;letter-spacing:0.02em; text-transform:uppercase;font-size:9.5px; } .m-emo-dd{position:relative;width:100%} .m-emo-dd > summary{ list-style:none;cursor:pointer; display:flex;align-items:center;gap:8px;justify-content:space-between; width:100%;border:none;background:transparent; font-family:inherit;font-size:14px;color:var(--txt);font-weight:500; padding:6px 18px 6px 0;border-bottom:1px solid var(--rule-soft); outline:none;letter-spacing:-0.005em; transition:border-color .15s; } .m-emo-dd > summary::-webkit-details-marker{display:none} .m-emo-dd > summary .sum{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-emo-dd > summary .chev{ position:absolute;right:4px;top:50%;transform:translateY(-50%); width:10px;height:6px;color:#86868b;transition:transform .15s; } .m-emo-dd[open] > summary .chev{transform:translateY(-50%) rotate(180deg)} .m-emo-dd[open] > summary{border-bottom-color:var(--blue)} .m-emo-list{ position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10; background:#fff;border:1px solid var(--rule-soft);border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,0.08); padding:6px;max-height:240px;overflow:auto; } .m-emo-opt{ display:flex;align-items:center;gap:10px; padding:7px 10px;border-radius:8px;cursor:pointer; font-size:13px;color:var(--txt-1); } .m-emo-opt:hover{background:rgba(0,0,0,0.04)} .m-emo-opt input{accent-color:#1a1a1a} .m-thought-meta{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:11px;color:var(--txt-3);letter-spacing:0.04em;text-transform:uppercase; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; } .m-thoughts-empty{ font-size:13px;color:var(--txt-3);text-align:center;padding:24px; } .m-summary.appearing > .m-stat{ animation: statAppear 1s ease-out both; } .m-summary.appearing > .m-stat:nth-child(1){animation-delay:0s} .m-summary.appearing > .m-stat:nth-child(2){animation-delay:.20s} .m-summary.appearing > .m-stat:nth-child(3){animation-delay:.44s} .m-stat-freq .v{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%} .m-freq-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .m-freq-num{ font-family:inherit;font-weight:600;font-size:22px;color:var(--txt); letter-spacing:-0.014em;line-height:1.2;font-variant-numeric:tabular-nums; } .m-freq-num.contracting{color:#b3261e} .m-freq-num.mixed{color:#555} .m-freq-num.expanding{color:#1f7a3a} /* Nearest-emotion label that animates between the 16 emotion names as the running value sweeps past their frequency stops. Color is set inline during the tick to match the current bar tip. */ .m-emo-label{ display:none; /* emotion word hidden — number + tag + bar carry the meaning */ font-weight:600;font-size:14px;letter-spacing:-0.005em; color:#280506; /* fallback: Shame (start state) */ } .m-freq-bar{ position:relative;height:6px;background:rgba(0,0,0,0.06); border-radius:980px;overflow:hidden;width:100%; } /* The fill's background gradient is painted to span the FULL 0-600 frequency scale, not just the fill's own width. We achieve that with background-size: calc(100% / fill-fraction) so that as the fill grows, the gradient stays anchored at the bar's leftmost edge in value-space. The fill's right edge moves through the gradient, picking up the matching tone at each value crossing. --grad-scale is the multiplier set inline as `100 / pct` at render time. The 16 colour stops are anchored at each emotion's exact frequency position (Shame 20, Guilt 30, ... Peace 600), as a percentage of the 0-600 scale. Between stops the gradient interpolates smoothly, so a value between two emotions reads as a true blend (e.g. value 460 ≈ midway between Reason blue and Love violet). */ .m-freq-bar .fill{ position:absolute;inset:0 auto 0 0;width:0; background-image:linear-gradient(to right, #280506 0%, #280506 3.33%, #46090b 5.00%, #640d10 8.33%, #821215 12.50%, #9f171b 16.67%, #bc1c21 20.83%, #d92228 25.00%, #df3e43 29.17%, #5347b8 33.33%, #6356c8 41.67%, #7365d4 51.67%, #8374dc 58.33%, #9082e4 66.67%, #a092e9 83.33%, #b3a6ee 90.00%, #cabcf3 100% ); background-repeat:no-repeat; background-size:calc(100% * var(--grad-scale, 1)) 100%; background-position:left center; background-color:transparent; border-radius:inherit; transition: width 13.2s cubic-bezier(.22,1,.36,1) 5.04s, background-color 1.2s ease-out; } .m-freq-bar.run .fill{width:var(--w, 0%)} /* End-state handoff: once the counter has finished, replace the multi-stop gradient with a solid fill matching the FINAL emotion's exact hex. The final hex is set inline as --emo-color at calc time. */ .m-freq-bar.settled .fill{ background-image:none; background-color:var(--emo-color, #555); } .m-summary{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--rule-soft); border-radius:14px;overflow:hidden; margin-top:24px;padding:1px; } @media(max-width:720px){ .m-summary{grid-template-columns:repeat(2,1fr)} } /* Emotional range — horizontal spectrum card sitting between the summary stats and the // Patterns / // Frequency reading / // How to disengage collapsibles. Shows all 16 emotion levels at muted opacity; picked emotions render at full opacity with a count badge above and a label below. A baseline scale shows the 20 → 600 frequency range with the 200 threshold marked. */ .m-spectrum{ margin-top:14px;background:#fff;border:1px solid var(--rule-soft); border-radius:14px;padding:22px 26px; } .m-spectrum:empty{display:none} .m-spectrum-lbl{ font-size:11px;color:var(--txt-3);font-weight:600; letter-spacing:0.06em;text-transform:uppercase; display:block;margin-bottom:22px; } .m-spectrum-frame{position:relative;height:118px} .m-spectrum-bar{ position:absolute;top:0;left:0;right:0;height:42px; display:grid;grid-template-columns:repeat(16,1fr);gap:2px; } .m-spectrum-cell{border-radius:2px;position:relative} .m-spectrum-cell.empty{opacity:0.18} /* Hover tooltip for every emotion in the strip — picked or background. Surfaces the label + frequency above the cell so users can map color to emotion without having to read the abbreviated 4-char label below. */ .m-spectrum-cell::after{ content:attr(data-label) " \00B7 " attr(data-freq); position:absolute;left:50%;bottom:calc(100% + 6px); transform:translateX(-50%); white-space:nowrap; background:rgba(20,20,22,0.96);color:#f5f5f7; padding:4px 8px;border-radius:6px; font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:10px;font-weight:500;letter-spacing:0.03em; opacity:0;pointer-events:none;transition:opacity .12s; z-index:6; } /* Picked cells already render their label directly underneath, so the hover tooltip only needs to surface the frequency number. */ .m-spectrum-cell.picked::after{content:attr(data-freq)} .m-spectrum-cell:hover::after{opacity:1} .m-spectrum-cell.empty:hover{opacity:0.55} /* Picked cells start dim during the count-up animation and ignite (full opacity + count badge fades in) as the running freq value crosses each cell's data-emo-freq threshold. */ .m-spectrum-cell.picked{ opacity:0.18;transition:opacity .4s ease-out; } .m-spectrum-cell.picked.lit{opacity:1} .m-spectrum-count{ position:absolute;top:-20px;left:50%;transform:translateX(-50%); color:#fff;font-size:10px;font-weight:600;border-radius:9px; padding:1px 6px;font-variant-numeric:tabular-nums; opacity:0;transform:translate(-50%,4px); transition:opacity .4s ease-out, transform .4s ease-out; } .m-spectrum-cell.picked.lit .m-spectrum-count{ opacity:1;transform:translate(-50%,0); } .m-spectrum-labels{ position:absolute;top:50px;left:0;right:0; display:grid;grid-template-columns:repeat(16,1fr);gap:2px; font-size:10.5px;text-align:center;color:transparent; } .m-spectrum-labels span.shown{ color:transparent;font-weight:500; transition:color .4s ease-out; } .m-spectrum-labels span.shown.lit{color:var(--txt)} .m-spectrum-rule{ position:absolute;top:86px;left:0;right:0; height:1px;background:var(--rule-soft); } .m-spectrum-scale{ position:absolute;top:96px;left:0;right:0; display:flex;justify-content:space-between; font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:10px;color:var(--txt-3);letter-spacing:0.04em; } .m-spectrum-scale .threshold{color:var(--txt-2)} .m-spectrum-foot{ display:flex;gap:24px;flex-wrap:wrap; padding-top:22px;margin-top:18px; border-top:1px solid var(--rule-soft); font-size:13px;color:var(--txt-3); } .m-spectrum-foot strong{ color:var(--txt);font-weight:500;font-variant-numeric:tabular-nums; } .m-stat{background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:6px} .m-stat .lbl{font-size:11px;color:var(--txt-3);font-weight:600;letter-spacing:0.06em;text-transform:uppercase} .m-stat .v{font-family:inherit;font-weight:600;font-size:22px;color:var(--txt);letter-spacing:-0.014em;line-height:1.2;font-variant-numeric:tabular-nums} .m-stat .v.muted{color:var(--txt-3);font-weight:500;font-size:18px} .m-stat-sub{color:var(--txt-3);font-weight:500;font-size:14px;margin-left:2px} .m-stat-sub-orient{ color:var(--txt-3);font-weight:500;font-size:12px; text-transform:uppercase;letter-spacing:0.04em;margin-top:4px; } /* light hint under the Audits stat: history persists, come back anytime */ .m-stat-sub-note{color:var(--txt-3);font-weight:400;font-size:10.5px;margin-top:4px;line-height:1.4} /* Print-only mini emotional range tile inside #mSummary — hidden on screen because the full m-spectrum card already lives below. */ .m-stat-emo-print{display:none} .m-tone-tag{ display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600; padding:2px 8px;border-radius:980px;letter-spacing:-0.005em;margin-left:8px; } .m-tone-tag::before{content:"";width:6px;height:6px;border-radius:50%} .m-tone-tag.contracting{ --tone-bg:rgba(255,59,48,0.12); --tone-color:#b3261e; --tone-dot:#ff3b30; --tone-shadow:rgba(255,59,48,0.35); background:var(--tone-bg);color:var(--tone-color); } .m-tone-tag.contracting::before{background:var(--tone-dot)} .m-tone-tag.expanding{ --tone-bg:rgba(52,199,89,0.14); --tone-color:#1f7a3a; --tone-dot:#34c759; --tone-shadow:rgba(52,199,89,0.35); background:var(--tone-bg);color:var(--tone-color); } .m-tone-tag.expanding::before{background:var(--tone-dot)} .m-tone-tag.mixed{ --tone-bg:rgba(0,0,0,0.06); --tone-color:#555; --tone-dot:#999; --tone-shadow:rgba(0,0,0,0.18); background:var(--tone-bg);color:var(--tone-color);border:1px solid var(--rule-soft); } .m-tone-tag.mixed::before{background:var(--tone-dot)} .m-note{font-size:12px;color:var(--txt-3);margin-top:14px;text-align:center} .m-note a{color:var(--blue);text-decoration:underline;text-underline-offset:2px} .m-note a:hover{opacity:0.75} /* ----- Engagement bar (replaces the standalone PDF note line) ----- */ .m-engage{ margin-top:18px;padding-top:14px; border-top:1px solid var(--rule-soft); display:flex;align-items:center;justify-content:space-between;gap:14px; } .m-engage-note{margin:0;text-align:right;flex:1;min-width:0} .m-engage-actions{display:inline-flex;align-items:center;gap:4px} .m-engage-btn{ width:34px;height:34px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:transparent;border:0;cursor:pointer; color:var(--txt-3);transition:color .15s, background .15s; padding:0;line-height:0;text-decoration:none; } .m-engage-btn svg{width:18px;height:18px;display:block} .m-engage-btn:hover{color:#94b8af;background:rgba(127,163,154,0.10)} .m-engage-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* Pressed heart — dim grey fill that echoes the inactive Phase 1/2 slider thumb (rgba(245,245,247,0.08) bg + 0.22 border, label color #86868b). Looks "filled" without screaming red. */ .m-engage-btn[aria-pressed="true"]{color:#86868b} .m-engage-btn[aria-pressed="true"] svg{ fill:rgba(245,245,247,0.22); stroke:#86868b; } /* Heart button widens to fit an inline counter pill — quietly tells the visitor how many others have also liked the audit. */ .m-engage-btn-with-count{ width:auto;min-width:34px;height:34px;border-radius:18px; gap:5px;padding:0 10px 0 9px; } .m-engage-count{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:11px;font-weight:500;letter-spacing:0.02em; color:inherit;line-height:1;font-variant-numeric:tabular-nums; } /* Small toast for the share-link-copied confirmation. */ .m-engage-toast{ position:absolute;right:0;bottom:calc(100% + 8px); background:rgba(20,20,22,0.96);color:#f5f5f7; font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:11px;letter-spacing:0.03em; padding:6px 10px;border-radius:6px; opacity:0;pointer-events:none;transition:opacity .15s; white-space:nowrap;z-index:6; } .m-engage-toast.show{opacity:1} .m-engage-actions{position:relative} /* Share menu — popover anchored under the share button. Dark, minimal, matches the audit aesthetic. Only shown on desktop; on touch devices we hand off to navigator.share() which surfaces the native sheet (WhatsApp, Telegram, etc. as installed apps). */ .m-share-menu{ position:absolute;top:calc(100% + 8px);right:0; background:rgba(20,20,22,0.98); border:1px solid rgba(245,245,247,0.12); border-radius:10px; padding:6px; min-width:180px; box-shadow:0 12px 32px rgba(0,0,0,0.5); z-index:10; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex;flex-direction:column;gap:2px; } .m-share-menu[hidden]{display:none} .m-share-opt{ display:flex;align-items:center;gap:10px; padding:8px 10px;border-radius:6px; color:#f5f5f7;font-size:13px;letter-spacing:-0.005em; text-decoration:none;cursor:pointer; background:transparent;border:0;width:100%;text-align:left; font-family:inherit; transition:background .12s; } .m-share-opt:hover,.m-share-opt:focus-visible{ background:rgba(245,245,247,0.08);outline:none; } .m-share-ico{ width:20px;height:20px;flex:0 0 20px;display:block;border-radius:4px; } .m-share-lbl{flex:1 1 auto;font-weight:500} /* Copy-link option lives on the same row but reads as utility. */ .m-share-copy{border-top:1px solid rgba(245,245,247,0.08);margin-top:4px;padding-top:10px} /* Comments panel — collapsed under the engagement bar until the bubble icon is tapped. Visually quiet; the dark theme matches the audit. */ .m-engage-comments{ margin-top:16px;padding:18px 20px; background:#0a0a0a;border:1px solid var(--rule-soft);border-radius:12px; } .m-engage-comments[hidden]{display:none} .m-engage-comments-head{ display:flex;align-items:baseline;justify-content:space-between; gap:14px;margin-bottom:14px; } .m-engage-comments-lbl{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:11px;color:#7fa39a;font-weight:500;letter-spacing:0.04em; text-transform:uppercase; } .m-engage-comments-note{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:11px;color:#6e6e73;letter-spacing:0.02em; } .m-engage-comments-placeholder{ font-size:13px;color:#6e6e73;letter-spacing:-0.005em;line-height:1.5; text-align:center;padding:18px 0 6px;margin:0; } /* Once Cusdis is configured and the iframe injects, the placeholder is hidden by the JS that loads the script. */ .m-engage-comments.configured .m-engage-comments-placeholder{display:none} /* Cusdis renders its widget into an