/* FLYWEIGHT — paper-white manga trading show. No external fonts or images. Original character sheets are cropped with CSS. */ :root { --paper: #ffffff; --paper-2: #f4f4f2; --ink: #0b0b0f; --ink-2: #3a3a42; --ink-3: #8a8a94; --rule: #0b0b0f; --cobalt: #1a37f0; --violet: #6b2bd9; --red: #d1232a; --sig: var(--cobalt); --line: 2px; --gap: 16px; --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* author display rules (grid/flex) must never resurrect hidden panels or the drawer */ html { font-size: 16px; } body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.4; color: var(--ink); background: var(--paper); } h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.01em; } h2 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.04em; } h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1.25rem; } p { margin: 0 0 0.75rem; } ul, ol { margin: 0; padding-left: 1.25rem; } a { color: var(--cobalt); } button, input, select { font: inherit; color: inherit; } .small { font-size: 0.875rem; color: var(--ink-2); margin: 0; } .mono { font-family: var(--mono); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; } .skip:focus { left: 8px; top: 8px; } :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; } .wordmark { font-weight: 900; font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; } .pos { color: var(--cobalt); } .neg { color: var(--red); } .na { color: var(--ink-3); font-weight: 400; } /* Masthead */ .masthead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--gap); padding: 8px var(--gap); border-bottom: var(--line) solid var(--rule); } .masthead__brand { display: flex; flex-direction: column; } .masthead__sub { font-size: 0.875rem; color: var(--ink-2); } .masthead__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } .modebar { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-block; padding: 4px 8px; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: var(--line) solid var(--ink); background: var(--paper); line-height: 1.2; min-height: 28px; } .chip--src { background: var(--ink); color: var(--paper); } .chip--live { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); } .chip--warn { background: var(--red); border-color: var(--red); color: var(--paper); } .banner { padding: 10px var(--gap); font-size: 0.875rem; font-weight: 700; border-bottom: var(--line) solid var(--rule); background: var(--paper-2); } .banner--error { background: var(--red); color: var(--paper); } .status-detail { padding: 6px var(--gap); font-size: 0.875rem; color: var(--ink-2); border-bottom: 1px solid #d8d8d6; } .status-detail summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: 32px; } /* Buttons */ .btn { min-height: 44px; padding: 8px 14px; border: var(--line) solid var(--ink); background: var(--paper); cursor: pointer; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.875rem; } .btn:hover { background: var(--paper-2); } .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .btn--primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); } .btn--primary:hover { background: #1029c0; } .btn--ghost { border-color: transparent; } .btn--ghost:hover { border-color: var(--ink); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .seg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } main { padding: var(--gap); max-width: 1200px; margin: 0 auto; } /* Round strip */ .strip { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 6px 0; border-bottom: var(--line) solid var(--rule); } .strip__k { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); } .strip__round { display: flex; align-items: baseline; gap: 10px; } .strip__num { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; } .strip__status { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .strip__tape { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .strip__price { font-size: 1.5rem; font-weight: 900; } .strip__at, .strip__refresh { font-size: 0.875rem; color: var(--ink-2); } @media (min-width: 720px) { .strip { grid-template-columns: auto 1fr; align-items: end; } } /* Hero: one protagonist, one account */ .hero { display: grid; grid-template-columns: 1fr; gap: var(--gap); padding: 24px 0 20px; border-bottom: var(--line) solid var(--rule); } @media (min-width: 720px) { .hero { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); } } .hero__art { position: relative; } /* Character sheets: 1536x1024, three panels. Crops are done with background-size/position only; files untouched. composed : x 0..540, y 0..1020 (whole body + antennae) distressed: x 520..1060, y 0..1020 chibi : x 1120..1510, y 540..980 position % = cropX / (1536 - cropW), cropY / (1024 - cropH); size % = 1536 / cropW. */ :root { --fly-sheet: url("assets/one-fly-layered-shirt.png"); } .artslot { border: var(--line) solid var(--ink); background-color: var(--paper); background-image: var(--fly-sheet); background-repeat: no-repeat; overflow: hidden; } .artslot__tag { display: none; } .artslot--main, .artslot--card { aspect-ratio: 540 / 1020; background-size: 284.45% auto; background-position: 0% 0%; } .artslot--main { width: 100%; } [data-mood="dismayed"] .artslot--main, [data-mood="dismayed"] .artslot--card { background-position: 52.21% 0%; } .artslot--chibi { position: absolute; right: 10px; bottom: 10px; width: 88px; aspect-ratio: 390 / 440; background-size: 393.85% auto; background-position: 97.73% 92.47%; } .hero[data-preview="chibi"] .artslot--main { background-size: 393.85% auto; background-position: 97.73% 92.47%; aspect-ratio: 390 / 440; max-width: 220px; } .hero[data-preview="chibi"] .artslot--chibi { display: none !important; } .hero[data-mood="composed"] .artslot--main { border-color: var(--cobalt); box-shadow: inset 0 0 0 3px var(--cobalt); } .hero[data-mood="dismayed"] .artslot--main { border-color: var(--red); box-shadow: inset 0 0 0 3px var(--red); } .hero__id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .hero__name { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; } .hero__mood { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 8px; border: var(--line) solid var(--ink); } .hero[data-mood="composed"] .hero__mood { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); } .hero[data-mood="dismayed"] .hero__mood { background: var(--red); border-color: var(--red); color: var(--paper); } .hero__account { font-family: var(--mono); margin-top: 6px; } .hero__premise { font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin: 10px 0 4px; } .hero__moment { font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--ink-2); min-height: 1.5em; } .hero__equity { font-size: 2.25rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .hero__equity small { font-size: 0.875rem; font-weight: 400; color: var(--ink-2); letter-spacing: 0; margin-left: 6px; } .hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; } @media (min-width: 720px) { .hero__stats { grid-template-columns: repeat(3, 1fr); } } .hero__stat { min-width: 0; } .hero__stat dd { overflow-wrap: anywhere; } .hero__stats dt { color: var(--ink-2); } .hero__stats dd { margin: 0 0 6px; font-weight: 700; } .hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } /* Panels */ .grid2 { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: var(--gap); } @media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } } .panel { border: var(--line) solid var(--rule); padding: 12px; } .panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .panel__note { font-size: 0.875rem; color: var(--ink-2); } .empty { color: var(--ink-2); font-size: 0.875rem; } .chart__svg { width: 100%; height: auto; display: block; background: var(--paper-2); } .chart__svg text { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); } .chart__svg .grid { stroke: #d8d8d6; stroke-width: 1; } .chart__svg .axis { stroke: var(--ink); stroke-width: 1.5; } .chart__svg .line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } .chart__svg .dot { stroke: var(--paper); stroke-width: 2; } .moves__list { list-style: none; padding: 0; margin: 0; } .move { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; width: 100%; text-align: left; padding: 10px 8px; border: 0; border-bottom: 1px solid #d8d8d6; background: none; cursor: pointer; min-height: 44px; font: inherit; } .move:hover { background: var(--paper-2); } .move__r { font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; font-family: var(--mono); } .move__what { font-variant-numeric: tabular-nums; } .move__what .small { display: block; } .move--rejected .move__what { color: var(--red); } .move--hold .move__what { color: var(--ink-2); } .predict__title { font-size: 1.375rem; letter-spacing: -0.01em; text-transform: none; } .predict__invite { font-size: 1.05rem; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; } .predict__q { font-size: 1.125rem; font-weight: 700; } .predict__choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .predict__state { font-weight: 700; margin: 6px 0; } .predict__practice, .predict__account { margin-top: 12px; border-top: 1px solid #d8d8d6; padding-top: 8px; } .predict__practice summary, .predict__account summary { cursor: pointer; font-weight: 700; font-size: 0.875rem; min-height: 32px; } .predict__practice .predict__q { margin-top: 8px; } .predict__referral { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; border-top: 1px solid #d8d8d6; padding-top: 10px; } .route { display: inline-grid; gap: 2px; justify-items: start; } .replay { display: grid; gap: 10px; } .replay__btns { display: flex; flex-wrap: wrap; gap: 6px; } .replay__btns .btn { min-width: 44px; } .replay__pos input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--cobalt); } .live { display: grid; gap: 10px; } .field { display: grid; gap: 4px; font-size: 0.875rem; } .field input, .field select { min-height: 44px; padding: 8px 10px; border: var(--line) solid var(--ink); background: var(--paper); font-family: var(--mono); font-size: 0.875rem; } .field select { font-family: var(--font); } /* Strategy runs (comparison) */ .compare__table { display: grid; grid-template-columns: 1fr; gap: var(--gap); } @media (min-width: 720px) { .compare__table { grid-template-columns: 1fr 1fr; } } .run { border: var(--line) solid var(--ink); padding: 12px; --sig: var(--cobalt); } .run--selected { box-shadow: inset 0 0 0 3px var(--sig); } .run__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; } .run__label { font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sig); } .run__id { font-family: var(--mono); font-size: 0.875rem; color: var(--ink-2); } .run__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 10px 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; } .run__stats dt { color: var(--ink-2); } .run__stats dd { margin: 0; font-weight: 700; } .run__actions { display: flex; flex-wrap: wrap; gap: 8px; } /* Recap / moment card preview. One DOM card, three aspect presets; the PNG export is drawn separately on a canvas from the same pinned data. */ .recap { display: grid; gap: var(--gap); } @media (min-width: 900px) { .recap { grid-template-columns: 300px auto; align-items: start; } } .recap__tools { display: grid; gap: 10px; align-content: start; } .card916 { aspect-ratio: 9 / 16; width: min(100%, 405px); border: 3px solid var(--ink); background: var(--paper); display: grid; grid-template-rows: auto minmax(50%, 1fr) auto auto auto auto auto; padding: 20px; gap: 6px; } .card916[data-format="4:5"] { aspect-ratio: 4 / 5; width: min(100%, 440px); } /* 1:1 is the only two-column preset. EVERY child is placed explicitly: with seven text siblings and only five free cells in column 2, auto-placement used to spill the foot into an implicit row under the art and burst the square. Eight rows, the caption row taking the slack, so the foot always sits on the bottom padding of column 2 and the card stays square. */ .card916[data-format="1:1"] { aspect-ratio: 1 / 1; width: min(100%, 480px); grid-template-columns: minmax(42%, 1fr) 1fr; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto; grid-auto-rows: 0; } .card916[data-format="1:1"] .card916__top { grid-area: 1 / 1 / 2 / -1; } .card916[data-format="1:1"] .artslot--card { grid-area: 2 / 1 / -1 / 2; min-height: 0; align-self: stretch; } .card916[data-format="1:1"] .card916__name { grid-area: 2 / 2 / 3 / 3; } .card916[data-format="1:1"] .card916__kicker { grid-area: 3 / 2 / 4 / 3; } .card916[data-format="1:1"] .card916__num { grid-area: 4 / 2 / 5 / 3; } .card916[data-format="1:1"] .card916__caption { grid-area: 5 / 2 / 6 / 3; min-height: 0; overflow: hidden; } .card916[data-format="1:1"] .card916__move { grid-area: 6 / 2 / 7 / 3; } .card916[data-format="1:1"] .card916__user { grid-area: 7 / 2 / 8 / 3; } .card916[data-format="1:1"] .card916__foot { grid-area: 8 / 2 / 9 / 3; } .card916__top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--ink); padding-bottom: 8px; } .card916__round { font-weight: 900; font-size: 1.125rem; letter-spacing: 0.06em; text-transform: uppercase; } .card916 .artslot--card { height: 100%; width: auto; max-width: 100%; min-height: 50%; justify-self: center; } .card916__name { font-size: 1.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; display: flex; align-items: baseline; gap: 10px; } .card916__mood { font-size: 0.75rem; letter-spacing: 0.08em; padding: 2px 6px; border: 2px solid var(--ink); } .card916[data-mood="composed"] .card916__mood { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); } .card916[data-mood="dismayed"] .card916__mood { background: var(--red); border-color: var(--red); color: var(--paper); } .card916__mood:empty { display: none; } .card916__kicker { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); } .card916__num { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .card916__caption { font-size: 0.9375rem; font-weight: 700; line-height: 1.2; color: var(--ink-2); } .card916__move { font-size: 0.8125rem; border-top: 2px solid var(--ink); padding-top: 8px; font-variant-numeric: tabular-nums; display: grid; gap: 2px; } .card916__user { font-size: 1.25rem; font-weight: 900; line-height: 1.15; color: var(--cobalt); overflow-wrap: anywhere; } .card916__user:empty { display: none; } .card916__foot { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ink-2); border-top: 2px solid var(--ink); padding-top: 6px; display: grid; gap: 2px; } /* About */ .about { margin-top: 32px; padding-top: 16px; border-top: var(--line) solid var(--rule); } .about__cols { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 12px; } @media (min-width: 900px) { .about__cols { grid-template-columns: 1fr 1fr; } } .about p, .about li { font-size: 1rem; color: var(--ink-2); } /* Drawer */ .drawer { position: fixed; inset: 0; z-index: 50; } .drawer__scrim { position: absolute; inset: 0; background: rgba(11, 11, 15, 0.45); } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 560px); background: var(--paper); border-left: 3px solid var(--ink); overflow: auto; display: flex; flex-direction: column; } .drawer__head { display: flex; align-items: center; gap: 8px; padding: 12px var(--gap); border-bottom: var(--line) solid var(--rule); position: sticky; top: 0; background: var(--paper); } .drawer__head h2 { flex: 1; } .drawer__body { padding: var(--gap); } .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0 0 12px; font-variant-numeric: tabular-nums; font-size: 0.875rem; } .kv dt { color: var(--ink-2); } .kv dd { margin: 0; font-weight: 700; word-break: break-word; } .kv dd.na { font-weight: 400; } .tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; margin-bottom: 12px; } .tbl th, .tbl td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #d8d8d6; vertical-align: top; } .tbl th { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: var(--ink-2); } .tbl td.num, .tbl th.num { text-align: right; } .decisions { list-style: none; padding: 0; margin: 0; } .decision { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; width: 100%; text-align: left; padding: 10px 6px; border: 0; border-bottom: 1px solid #d8d8d6; background: none; cursor: pointer; min-height: 44px; font: inherit; } .decision:hover { background: var(--paper-2); } .receipt__section { border: var(--line) solid var(--ink); padding: 10px; margin-bottom: 12px; } .receipt__section h3 { margin-top: 0; font-size: 0.875rem; } .receipt__flag { display: inline-block; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border: var(--line) solid var(--ink); margin-right: 6px; } .receipt__flag--reject { border-color: var(--red); color: var(--red); } pre.raw { font-family: var(--mono); font-size: 0.8125rem; white-space: pre-wrap; word-break: break-word; background: var(--paper-2); padding: 8px; margin: 0; } /* Motion: mood changes are static state swaps. Only the hover tint animates, and only when motion is allowed. */ @media (prefers-reduced-motion: no-preference) { .btn, .move, .decision { transition: background-color 120ms ease; } .hero .artslot--main { transition: border-color 200ms ease, box-shadow 200ms ease; } } @media print { .masthead, .banner, .recap__tools, .about, .drawer { display: none !important; } } @media (max-width: 719px) { .artslot--main { max-width: 220px; margin-inline: auto; } } /* Keep the character cutaway in the same frame, including with reduced motion. */ .hero__art { aspect-ratio: 540 / 1020; display: grid; align-content: center; justify-items: center; } @media (max-width: 719px) { .hero__art { width: min(100%, 220px); margin-inline: auto; } } .detail-modebar { margin: 8px 0; } .hero__actions #hero-preview { min-width: 255px; } /* ---- Responsive hardening (first-glance study carried into the main show) ---- Targets: desktop 1440, iPad 768/1024 portrait+landscape, iPhone 390, narrow 360. Safe areas, 44 px targets, no hover-only information, reduced motion respected, chart/card never clipped, type readable. Art crops and sheets untouched. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .masthead, .banner, .status-detail, main, .foot { padding-left: max(var(--gap), env(safe-area-inset-left, 0px)); padding-right: max(var(--gap), env(safe-area-inset-right, 0px)); } .masthead { padding-top: max(8px, env(safe-area-inset-top, 0px)); } .drawer__panel { padding-bottom: env(safe-area-inset-bottom, 0px); } .status-detail summary, .predict__practice summary, .predict__account summary { min-height: 44px; display: flex; align-items: center; } .btn--ghost { border-bottom-color: var(--ink-3); } /* ghost controls read as controls without hover */ /* First glance: kicker, one big name, plain money. Sizes clamp so 360 px never overflows and 1440 px is not timid. */ .hero__kicker { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 6px; } .hero__name { font-size: clamp(2.5rem, 8vw, 4rem); } .hero__premise { font-size: clamp(1.25rem, 2.2vw, 1.75rem); } .hero__equity { font-size: clamp(2rem, 6vw, 3rem); } @media (min-width: 720px) and (max-width: 1099px) { .hero { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); } } @media (min-width: 1100px) { .hero { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); padding: 32px 0 24px; } } /* Narrow screens: full-width tap targets, nav that wraps without clipping, smaller round numeral. */ .hero__actions .btn, .predict__choices .btn, .seg .btn { flex: 1 1 auto; } @media (min-width: 720px) { .hero__actions .btn, .predict__choices .btn, .seg .btn { flex: 0 1 auto; } } @media (max-width: 719px) { .hero__actions #hero-preview { min-width: 0; } .strip__num { font-size: 2rem; } .masthead__nav { width: 100%; } .masthead__nav .btn { flex: 1 1 auto; } } /* Charts and cards: never clipped. */ .chart__svg { max-width: 100%; } .card916 { max-width: 100%; } @media (max-width: 400px) { .card916 { padding: 14px; } .card916[data-format="1:1"] { grid-template-columns: minmax(38%, 1fr) 1fr; } } /* Recorded-snapshot offer inside the error banner, receipt permalink, footer. */ .banner__link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 4px 0; } .receipt__link { display: inline-block; padding: 10px 0; min-height: 44px; overflow-wrap: anywhere; } .foot { margin: 32px auto 0; padding-top: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); border-top: var(--line) solid var(--rule); max-width: 1200px; display: grid; gap: 4px; } .foot__social { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.875rem; margin: 0; } .foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; display: inline-block; } /* Reduced motion: every transition off, including the mood tint and any future animation. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ---- Phone overflow hardening (root, 2026-09-11 12:29 CEST) --------------------------------------- Report: at 390 px the masthead nav looked clipped ("MOMENT CARD", "RESEARCH"), the decision headline, the risk sentence and the bid/ask/trade strip looked cut at the right edge, and the page looked wider than the viewport. Measured at a true 390 px layout viewport the deployed rules already wrap and document.scrollWidth == 390; the real, reproducible overflow is the Moment-card column at 320 px (+10 px) and 360 px (+6 px), where the round/format