/* Sharp: flat, opaque panels on a flat black page (Aditya, 2026-10-08: "sharpness is our key"). No frosted glass, no
   blur, no inner sheen or soft drop shadows, so every edge and every letter renders crisp. The colognes, their links and
   the globe keep their glow; that is the only soft light on the page. Panels get more room and fewer words.
   Loaded after the page's own styles (and the styles quiz.js, finder.js and pricefilter.js add to <head>); the `html`
   prefix wins over phone.js, which adds its own styles at the end of <body>. Colours and radii are the tokens below. */
:root:root {
  --bg: #000;
  --panel: #0c0c0e;          /* every panel, menu and control */
  --raised: #17171a;         /* a selected tab, a hovered row */
  --ink: #f5f5f7;
  --muted: #a1a1a8;          /* solid greys rather than see-through white: crisper on any background */
  --faint: #6c6c74;
  --line: #2a2a2f;
  --hair: #1d1d21;
  --fill: #141417;
  --glass: var(--panel);
  --glass-solid: var(--panel);
  --sheen: none;
  --r-panel: 14px;
  --r-ctl: 9px;
  --r-chip: 7px;
}

/* the page: flat black, nothing behind the globe */
html body, html .stage { background: var(--bg); }

/* one flat surface for everything that used to be glass */
html .glass, html .lk-pop, html .pf-pop, html .card[data-sheet="full"] {
  background: var(--panel) !important; border: 1px solid var(--line);
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none;
}
html .qz { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
html .qz-open { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }

/* corners: panels a little rounded, controls tighter, nothing pill-shaped but the family labels on the globe */
html :is(.card, .mx, .lk-pop, .pf-pop) { border-radius: var(--r-panel); }
html :is(.for, .search input, .lk-pill, .reset, .filt, .qz-open, .buy a, .sim button, .yo-foot button, .qz-act button,
  .qz-search, .qz-chip, .qz-bar button, .yo-back, .mx-clear, .buyhead select, .tip) { border-radius: var(--r-ctl); }
html :is(.for button, .pf-pill, .mx-tabs, .lk-opts button, .mx-row, .mx-nt, .mx-res button, .yo-list button) { border-radius: 6px; }
html .mx-tabs button { border-radius: 5px; }
html :is(.nt, .wx span, .qz-wx span, .best) { border-radius: var(--r-chip); }
html :is(.card .close, .filt button) { border-radius: 7px; }
html .photo { border-radius: 10px; box-shadow: none; }
html :is(.yo-list .th, .qz-tile) { border-radius: 8px; box-shadow: none; }

/* selected and pressed states: a flat raised fill, no inner highlight */
html :is(.for button[aria-checked="true"], .pf-pill.on, .mx-tabs button[aria-selected="true"]) { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
html :is(.lk-opts button[aria-checked="true"], .mx-nt[aria-selected="true"]) { background: var(--raised); }
html :is(.buy a, .best) { box-shadow: none; }
html :is(.nt, .sim button, .wx span, .buyhead select, .yo-foot button) { background: var(--fill); border-color: var(--hair); }
html .nt.of { background: var(--raised); }
html .mx-tabs { background: var(--fill); }
html .make .qz-open { box-shadow: none; }
html .me { box-shadow: none; }

/* text on the globe: no blur behind the labels and no fuzzy shadow round the letters. The labels stay see-through,
   so the globe keeps showing through them as it turns. */
html :is(.pole, .axl) { text-shadow: none; }
html .pole:hover, html .pole[aria-pressed="true"] { background: rgba(12, 12, 14, .7); }
html .nm { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* the brand: the bottle mark is the N, and "osebait" follows it in lowercase (Jost, a geometric face in the Futura
   line, loaded for just those letters), sitting on the N's baseline. Inter for every other word on the page. */
html .brand h1 { display: flex; align-items: baseline; gap: .1em; font-family: "Jost", var(--sans); font-weight: 500; letter-spacing: 0; }
html .brand .logo { display: block; height: 1.2em; width: auto; flex: none; }
html .brand .wm { font-size: 1.04em; letter-spacing: .02em; }
html :is(.card h2, .yours h2, .qz h2, .pl-head h2) { letter-spacing: -.025em; }

/* room to breathe: wider gutters, roomier panels and sections */
html .top { padding-left: 28px; padding-right: 28px; }
html .make { right: 28px; }
html .search input { padding: 10px 16px; }
html .for { padding: 4px; gap: 4px; }
html .for button, html .pf-pill { padding: 5px 14px; }
html .hero { gap: 20px; padding: 24px 24px 20px; }
html .card h2, html .yours h2 { margin-bottom: 12px; }
html .gist { padding: 0 24px 22px; }
html .wx, html .rating { padding-left: 24px; padding-right: 24px; }
html .wx { padding-bottom: 20px; }
html .sec { padding: 22px 24px; gap: 14px; }
html .wheelsec { padding: 14px 24px 10px; }
html .tone { row-gap: 6px; }
html .tone .tn { margin-bottom: 10px; }
html .sim, html .buy { gap: 8px; }
html .card .close { right: 16px; top: 16px; }
html .yo-top { padding: 24px 24px 20px; }
html .yo-foot { padding: 8px 24px 24px; }
html .mx { padding: 12px 16px 18px; }
html .mx-bar { padding: 8px 4px 12px; }
html .mx-rows { gap: 4px; }
html .mx-foot { margin: 18px 4px 12px; }
html .lk-pop { padding: 14px 10px 10px; }
html .lk-opts { gap: 4px; }
html .lk-opts button { padding: 10px 12px; }
html .pf-pop { padding: 18px 20px 14px; }

/* still on their way in: the lab tools (Group by, the dry-down on the card, the lab menus, the verdict and "Your
   nose" chips) and Trending (its pill, its panel and rows, "What people say" on the card). Same rules as above. */
html .pl { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: none; }
html .pl-pill { border-radius: var(--r-ctl); }
html .pl-pill:hover, html .pl-pill[aria-expanded="true"] { background: var(--raised); }
html .pl .close { border-radius: 7px; }
html .pl-tabs button { border-radius: 6px; background: var(--fill); border-color: var(--hair); }
html .pl-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); }
html .pl-row { border-radius: 8px; }
html .pl-mv.new { border-radius: 5px; }
html .pl-foot button { border-radius: var(--r-ctl); }
html .pl-head { padding: 22px 18px 0 24px; }
html .pl-tabs { padding: 16px 24px 6px; gap: 8px; }
html .pl-sub { margin: 10px 24px 6px; }
html .pl-list { padding: 6px 12px 10px; }
html .pl-row { padding: 10px 12px; }
html .pl-foot { padding: 14px 18px 18px 24px; }
html .say .bdg button { border-radius: var(--r-chip); background: var(--raised); box-shadow: none; }
html .say .bdg button:hover { background: #222226; }
html .say-m .bar i { background: var(--raised); }
html .lab-in { border-radius: var(--r-ctl); background: var(--fill); }
html :is(.lab-chip, .nose-c) { border-radius: var(--r-chip); background: var(--fill); border-color: var(--hair); }
html .lab-chip.on { background: var(--ink); border-color: var(--ink); }
html .nose-c i { border-radius: 4px; }
html .verdict button { border-radius: var(--r-ctl); background: var(--fill); border-color: var(--hair); }
html .verdict button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
html .verdict { padding: 0 24px 20px; gap: 8px; }
html .dd-x { border-radius: 7px; background: var(--raised); }
html .dd-x:hover { background: #222226; }
html :is(.dd-play, .dd-trk em) { box-shadow: none; }
html .dd { row-gap: 8px; }

/* fewer words: the panels show what to do, they do not explain it */
html .mx-sub, html .lk-note { display: none; }
/* a link option says what it does only once it is picked */
html .lk-opts button:not([aria-checked="true"]) small { display: none; }
html .mx-res:empty::before { content: "Nothing mixed yet."; }

@media (max-width: 760px) {
  :root:root { --faint: #7a7a82; }
  html .top { padding-left: 12px; padding-right: 12px; }
  html .make { right: 10px; }
  html .search input { padding: 8px 16px; }
  html .for button, html .for .pf-pill { padding: 4px 9px; }
  html .hero { gap: 16px; padding: 20px 18px 16px; }
  html .gist { padding: 0 18px 18px; }
  html .wx, html .rating { padding-left: 18px; padding-right: 18px; }
  html .sec { padding: 18px 18px; gap: 12px; }
  html .wheelsec { padding: 10px 18px 6px; }
  html .yo-top { padding: 18px 18px 16px; }
  html .yo-foot { padding: 6px 18px 20px; }
  html .mx { padding: 4px 14px 12px; }
  html .mx:not(.open) { padding-bottom: 4px; }
  html .mx-bar { padding: 8px 2px; }
  html .pl { background: var(--panel); }
  html .pl-head { padding: 16px 14px 0 18px; }
  html .pl-tabs { padding: 12px 18px 4px; }
  html .pl-sub { margin: 8px 18px 4px; }
  html .pl-foot { padding: 12px 14px 14px 18px; }
  html .verdict { padding: 0 18px 16px; }
}
/* the narrowest phones (an SE, a small Android): the mark, the name and the four filters share one row, so they sit a
   little closer rather than run off the right edge */
@media (max-width: 380px) {
  html .for button, html .for .pf-pill { padding: 4px 7px; }
}
@media (max-width: 340px) {
  html .brand h1 { font-size: 18px; }
  html .for button, html .for .pf-pill { padding: 4px 5px; font-size: 11.5px; }
}