/* =====================================================================
   FABULA — see-through look
   Every block, the top bar and the three studio buttons have no fill:
   the blurred film behind the site shows through, and everything on top
   is white. Remove the <link> to clear.css in index.html to go back.
   ===================================================================== */
:root[data-mode][data-theme],:root[data-mode],
:root[data-mode="night"][data-theme],:root[data-mode="night"]{
  --paper:#030303;          /* kept dark: it is the text colour on white fills */
  --ground:transparent;
  --card:transparent;
  --panel:rgba(255,255,255,.06);
  --ink:#FFFFFF;
  --muted:rgba(255,255,255,.62);
  --rule:rgba(255,255,255,.22);
  --rule-strong:rgba(255,255,255,.34);
  --rule-soft:rgba(255,255,255,.12);
  --chip:rgba(255,255,255,.08);
  --chip-hover:rgba(255,255,255,.14);
  --sel:#FFFFFF;
  --sel-ink:#030303;
  --sel-line:#030303;
  --pc-ink-rgb:255,255,255;
  color-scheme:light;       /* keeps embedded players from getting a white backing */
}
html body{color:#FFFFFF}

/* no fills */
main,#view-home,
.block,.pw-blocks > .pwsec,
.studio-tabs,.st-big,.st-big:not([aria-selected="true"]),
.sys-strip,
.brain,.wcard,.ratio,.qcol,.gshero,.tb-row,
footer,.foot-picker,.fbase,.film-hero .film-cap{background:transparent!important;background-color:transparent!important}
#view-home{background:none!important}
.block,.pw-blocks > .pwsec{border:0!important;box-shadow:none!important}

/* top bar: see-through, no outline, only the thin dividers inside it */
.sys-strip{border:0!important;box-shadow:none!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.sys-strip,.sys-strip *{color:#FFFFFF!important}
.sys-strip .sys-book,.sys-strip .sys-book *{color:#030303!important}
.sys-brand .glyph,.sys-menu i{background:#FFFFFF!important}
.sys-mode,.sys-menu{border-color:rgba(255,255,255,.35)!important}
.sys-menu:hover,.sys-mode:hover{background:rgba(255,255,255,.1)!important}
.sys-panel{background:rgba(10,10,10,.82)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-color:rgba(255,255,255,.35)!important}
.sp-link,.sp-mode{border-color:rgba(255,255,255,.2)!important}
.sp-link[aria-current="page"]{background:rgba(255,255,255,.12)!important;color:#FFFFFF!important}
.sp-book{background:#DFFD2C!important;color:#030303!important}

/* the three studio buttons: outline only; the picked one keeps its purple fill running */
.st-big{border:1px solid rgba(255,255,255,.45)!important;color:#FFFFFF!important}
.st-big kbd{color:rgba(255,255,255,.6)!important}
.st-big[aria-selected="true"]{background:transparent!important;border-color:#FFFFFF!important;color:#FFFFFF!important}
.st-big[aria-selected="true"] kbd{color:#FFFFFF!important}
.st-big:not([aria-selected="true"]):hover{background:rgba(255,255,255,.1)!important;border-color:#FFFFFF!important;color:#FFFFFF!important}

/* quote stays white on the phone as well */
@media (max-width:759px){
  html body{background:#0A0A0A!important}
  .vbg{display:block!important}
  .fq{color:#FFFFFF!important;border-top:0!important}
  .block{border-top:1px solid rgba(255,255,255,.18)!important}
  .block-open{border-top:0!important}
  .fx-hero .hero-in{background:transparent!important}
  .sys-brand,.sys-menu{border-color:rgba(255,255,255,.35)!important}
  .sys-strip{border-bottom:1px solid rgba(255,255,255,.35)!important;background:rgba(10,10,10,.35)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .st-big{border:0!important;border-bottom:1px solid rgba(255,255,255,.35)!important}
  .st-big + .st-big{border-left:1px solid rgba(255,255,255,.35)!important}
}