/* Tetri’s Smile · “Quiet” skin (v17)
   The minimal version: white paper, navy ink, nothing else. Thin Outfit display at large sizes, small widely tracked
   capitals, hairlines instead of cards, grayscale photography that returns to colour under the pointer, one outlined
   numeral per chapter, one hairline circle, one translucent navy panel over a photograph. No sky shader, no films.
   Everything is scoped to html[data-skin="quiet"]; Signature and Frost are untouched without the attribute.
   Colour rule: the document keeps ink-on-white variables at all times. Only the navy planes, the navy panels and the
   fixed header (while a navy plane is under it) carry light variables, so nothing on white can turn white. */
html[data-skin="quiet"]{
  --display:"Outfit","Montserrat","Avenir Next","Segoe UI",system-ui,sans-serif;--body:"Outfit","Montserrat","Avenir Next","Segoe UI",system-ui,sans-serif;--mono:"Outfit",monospace;
  --navy:#0b1324;--navy-2:#0b1324;--steel:#3a4357;--mist:#f4f5f7;--ink:#0b1324;--plane:#f4f5f7;
  --fg:#0b1324;--fg2:#3a4357;--fg3:#646e80;--ln:rgba(11,19,36,.16);--ln2:rgba(11,19,36,.08);--panel:#fff;--panel-ln:rgba(11,19,36,.12);
  --qh:min(38vw,540px);--qi:min(36vw,500px);--nt:clamp(22px,3.5vh,40px);--nf:clamp(72px,2.4rem + 6.2vw,150px);
}
html[data-skin="quiet"].dark{--fg:#0b1324;--fg2:#3a4357;--fg3:#646e80;--ln:rgba(11,19,36,.16);--ln2:rgba(11,19,36,.08);--panel:#fff;--panel-ln:rgba(11,19,36,.12)}
html[data-skin="quiet"] .ch[data-quiet="dark"],html[data-skin="quiet"] #intro .ch__body,html[data-skin="quiet"].dark .hd,html[data-skin="quiet"].dark .rail,html[data-skin="quiet"].dark .totop,html[data-skin="quiet"].dark .cursor{--fg:#fff;--fg2:#d5dce6;--fg3:#aab6c8;--ln:rgba(255,255,255,.26);--ln2:rgba(255,255,255,.12);--panel:transparent;--panel-ln:rgba(255,255,255,.2)}
html[data-skin="quiet"] body,html[data-skin="quiet"] body.page{background:#fff;color:var(--fg);font:300 17px/1.7 var(--body);letter-spacing:0}
html[data-skin="quiet"] body.page::before{display:none}
html[data-skin="quiet"] ::selection{background:var(--ink);color:#fff}
html[data-skin="quiet"] #gl,html[data-skin="quiet"] .film,html[data-skin="quiet"] .hero__mark,html[data-skin="quiet"] .hero__dash,html[data-skin="quiet"] .ch--wm::before,html[data-skin="quiet"] .phero::after,html[data-skin="quiet"] .ch--media > .media video{display:none!important}

/* ---------- type ---------- */
html[data-skin="quiet"] h1,html[data-skin="quiet"] h2,html[data-skin="quiet"] h3{font-family:var(--display);font-weight:200;letter-spacing:-.025em;line-height:1.02;text-transform:none;text-wrap:balance}
html[data-skin="quiet"] h3{font-weight:300}
html[data-skin="quiet"] .ch h2{font-size:clamp(42px,1.4rem + 4.4vw,100px);max-width:15ch}
html[data-skin="quiet"] .ch--media .ch__body h2,html[data-skin="quiet"] .ch--center h2{font-size:clamp(36px,1.2rem + 3.4vw,76px);max-width:13ch}
html[data-skin="quiet"] .deck{font:300 clamp(16px,.95rem + .3vw,18px)/1.72 var(--body);color:var(--fg2);max-width:46ch}
html[data-skin="quiet"] .lab,html[data-skin="quiet"] .wide,html[data-skin="quiet"] .hero__values,html[data-skin="quiet"] .cta,html[data-skin="quiet"] .btn,html[data-skin="quiet"] .steps b,html[data-skin="quiet"] .price th,html[data-skin="quiet"] .photo .tag,html[data-skin="quiet"] .ba__label,html[data-skin="quiet"] .ba__cap,html[data-skin="quiet"] .media__credit,html[data-skin="quiet"] .field span,html[data-skin="quiet"] .hd__phone,html[data-skin="quiet"] .menu-btn,html[data-skin="quiet"] .lang button,html[data-skin="quiet"] .lang a,html[data-skin="quiet"] .ft__links,html[data-skin="quiet"] .ft small,html[data-skin="quiet"] .mfig figcaption,html[data-skin="quiet"] .quotes figcaption,html[data-skin="quiet"] .timeline b,html[data-skin="quiet"] .swipe,html[data-skin="quiet"] .rail a span,html[data-skin="quiet"] .menu__desc,html[data-skin="quiet"] .menu__x,html[data-skin="quiet"] .toc__pct,html[data-skin="quiet"] .phero__meta{font-family:var(--display);font-weight:400;letter-spacing:.32em;text-transform:uppercase}
html[data-skin="quiet"] .lang a[style],html[data-skin="quiet"] .lang button[style]{font:400 10.5px/1 var(--display)!important;letter-spacing:.32em!important}
html[data-skin="quiet"] .lab{font-size:10.5px;line-height:1.7;color:var(--fg3)}
html[data-skin="quiet"] .ch__label{margin-bottom:34px}
html[data-skin="quiet"] .num{font:200 clamp(38px,1.4rem + 2.2vw,64px)/1 var(--display);letter-spacing:-.04em}
html[data-skin="quiet"] .cta{font-size:10.5px;gap:14px;color:var(--fg)}
html[data-skin="quiet"] body .cta i,html[data-skin="quiet"] body .cta .ico{width:36px;height:1px;border:0;border-radius:0;background:currentColor;color:inherit;transition:width .5s var(--ease);overflow:hidden}
html[data-skin="quiet"] .cta i > *,html[data-skin="quiet"] .cta .ico > *{display:none}
html[data-skin="quiet"] .cta:hover i,html[data-skin="quiet"] .cta:hover .ico{width:60px;transform:none}
html[data-skin="quiet"] .rule{background:var(--ln);width:min(180px,50%)}
/* buttons: written against body so the home page's inline html.dark button rules (same weight, later) cannot win */
html[data-skin="quiet"] body .btn{border-radius:0;min-height:50px;padding:0 28px;font-size:10.5px;background:var(--ink);color:#fff;border:1px solid var(--ink)}
html[data-skin="quiet"] body .btn:hover{background:#222c3e;color:#fff;border-color:#222c3e}
html[data-skin="quiet"] body .btn--line{background:transparent;color:var(--fg);border:1px solid var(--ln)}
html[data-skin="quiet"] body .btn--line:hover{background:transparent;color:var(--fg);border-color:var(--fg)}
html[data-skin="quiet"] body .ch[data-quiet="dark"] .btn{background:#fff;color:var(--ink);border-color:#fff}
html[data-skin="quiet"] body .ch[data-quiet="dark"] .btn:hover{background:transparent;color:#fff;border-color:#fff}
html[data-skin="quiet"] body .ch[data-quiet="dark"] .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
html[data-skin="quiet"] body .ch[data-quiet="dark"] .btn--line:hover{border-color:#fff}

/* ---------- header and menu ---------- */
html[data-skin="quiet"] .hd,html[data-skin="quiet"] .hd.is-top,html[data-skin="quiet"] .page .hd,html[data-skin="quiet"] .page .hd.is-light{background:rgba(255,255,255,.88);border-bottom:1px solid var(--ln2)}
html[data-skin="quiet"].dark .hd,html[data-skin="quiet"].dark .hd.is-top{background:rgba(11,19,36,.86);border-bottom-color:rgba(255,255,255,.1)}
html[data-skin="quiet"] .hd__brand svg{width:18px}
html[data-skin="quiet"] .hd__brand .wide{font:400 10.5px/1 var(--display);letter-spacing:.38em;text-transform:uppercase}
html[data-skin="quiet"] .menu-btn{font-size:10.5px;letter-spacing:.34em}
html[data-skin="quiet"] .hd .menu-btn b{background:transparent;color:var(--fg);border:1px solid var(--ln);font-weight:300}
html[data-skin="quiet"] .page .hd .hd__brand,html[data-skin="quiet"] .page .hd .hd__phone,html[data-skin="quiet"] .page .hd .menu-btn,html[data-skin="quiet"] .page .hd .lang a,html[data-skin="quiet"] .page .hd .lang button{color:var(--ink)}
html[data-skin="quiet"] .page .hd .menu-btn b{background:transparent;color:var(--ink);border:1px solid rgba(11,19,36,.3)}
html[data-skin="quiet"]:not(.dark) body:not(.page) .hd .hd__brand .sheen,html[data-skin="quiet"] .page .hd .hd__brand .sheen,html[data-skin="quiet"] .hd.is-light .hd__brand .sheen{color:var(--ink)}
html[data-skin="quiet"]:not(.dark) body:not(.page) .hd .hd__brand .sheen svg,html[data-skin="quiet"] .page .hd .hd__brand .sheen svg,html[data-skin="quiet"] .hd.is-light .hd__brand .sheen svg{fill:var(--ink);filter:none}
html[data-skin="quiet"]:not(.dark) body:not(.page) .hd .hd__brand .sheen .wide,html[data-skin="quiet"] .page .hd .hd__brand .sheen .wide,html[data-skin="quiet"] .hd.is-light .hd__brand .sheen .wide{color:var(--ink);text-shadow:none}
html[data-skin="quiet"] .menu{background:#fff;color:var(--ink)}
html[data-skin="quiet"] .menu .lab{color:var(--ink)}
html[data-skin="quiet"] .menu .menu__kicker{color:var(--fg3)}
html[data-skin="quiet"] .menu__home .menu__name,html[data-skin="quiet"] .menu__name{font:200 clamp(22px,1rem + 1.3vw,32px)/1.1 var(--display);letter-spacing:-.025em}
html[data-skin="quiet"] .menu__desc{font-size:10px;letter-spacing:.22em;color:var(--fg3)}
html[data-skin="quiet"] .menu__x b{border-radius:0}
html[data-skin="quiet"] .menu__foot{font-weight:400;font-size:10.5px;letter-spacing:.3em;color:var(--fg2)}
html[data-skin="quiet"] .menu__book{border-radius:0;background:var(--ink);font-weight:400}
html[data-skin="quiet"] .rail a span{font-size:10px;letter-spacing:.26em}
html[data-skin="quiet"] .rail a.is-on span{opacity:0;transform:translateX(6px)}
html[data-skin="quiet"] .rail a:hover span,html[data-skin="quiet"] .rail a:focus-visible span{opacity:.9;transform:none}

/* ---------- hero (home): the wordmark on white, a photograph in a tall frame, one hairline circle, a navy panel ---------- */
html[data-skin="quiet"] .hero{position:relative;text-align:left;grid-template-rows:1fr auto;overflow:hidden;background:#fff}
html[data-skin="quiet"] .hero__word{position:relative;z-index:2;text-align:left;align-self:center;width:100%;max-width:1320px;margin-inline:auto;padding:calc(76px + 12vh) var(--gutter) 6vh;box-sizing:border-box}
html[data-skin="quiet"] .hero__word > *{max-width:calc(100% - 1.1 * var(--qh) - 40px)}
html[data-skin="quiet"] .hero__values{justify-content:flex-start;gap:0 22px;font-size:10.5px;letter-spacing:.34em;color:var(--fg3);margin-bottom:clamp(28px,5vh,56px)}
html[data-skin="quiet"] .hero__word > .lockup-x{display:grid;grid-template-columns:auto;gap:0;justify-items:start;max-width:min(760px,calc(100% - 1.1 * var(--qh) - 40px))}
html[data-skin="quiet"] .lockup-x__word{display:grid;justify-items:start;text-align:left}
html[data-skin="quiet"] .lockup-x__vr{width:72px;height:1px;background:var(--ln);margin:30px 0 22px}
html[data-skin="quiet"] .hero__word .wm{font:200 clamp(56px,2rem + 6.6vw,136px)/.94 var(--display)!important;letter-spacing:-.035em!important;text-transform:none!important;color:var(--ink)}
html[data-skin="quiet"] .hero__word .sub{font:400 10.5px/1 var(--display)!important;letter-spacing:.42em!important;text-transform:uppercase!important;color:var(--fg3);margin-top:18px}
html[data-skin="quiet"] .hero__word .labw{font:300 clamp(16px,.9rem + .9vw,26px)/1 var(--display)!important;letter-spacing:.3em!important;text-transform:uppercase!important;color:var(--fg2)}
html[data-skin="quiet"] .hero__word > .lab{margin-top:clamp(28px,5vh,52px);font-size:10.5px;color:var(--fg3)}
html[data-skin="quiet"] .hero__foot{position:relative;z-index:2;border-top:1px solid var(--ln2);margin:0 var(--gutter);padding:20px 0 calc(28px + env(safe-area-inset-bottom,0px));height:auto}
html[data-skin="quiet"] .swipe{font-size:10.5px;letter-spacing:.34em;color:var(--fg3)}
html[data-skin="quiet"] .q-hero{position:absolute;z-index:1;right:max(var(--gutter),calc((100% - 1320px) / 2 + var(--gutter)));top:calc(76px + 7vh);width:var(--qh);height:min(72svh,760px);pointer-events:none}
html[data-skin="quiet"] .q-hero__ph{margin:0;position:absolute;inset:0;overflow:hidden;background:var(--plane)}
html[data-skin="quiet"] .q-hero__ph img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
html[data-skin="quiet"] .q-hero__panel{position:absolute;left:-10%;top:8%;width:54%;padding:clamp(20px,2.2vw,32px);background:rgba(11,19,36,.88);color:#fff;display:grid;gap:14px}
html[data-skin="quiet"] .q-hero__panel .lab{color:#b7c3d3;font-size:10px;letter-spacing:.3em;margin:0}
html[data-skin="quiet"] .q-hero__panel i{display:block;width:100%;height:1px;background:rgba(255,255,255,.3)}
html[data-skin="quiet"] .q-hero__panel svg{width:30px;height:33px;fill:none;stroke:#fff;stroke-width:1.2;opacity:.9}
html[data-skin="quiet"] .q-hero__panel b{font:200 clamp(20px,.9rem + 1vw,30px)/1.15 var(--display);letter-spacing:-.02em;color:#fff}
html[data-skin="quiet"] .q-ring{position:absolute;left:-12%;top:-12%;width:96%;aspect-ratio:1;border:1px solid var(--ln);border-radius:50%;pointer-events:none}

/* ---------- chapters: white planes, hairlines, an outlined numeral top right ---------- */
html[data-skin="quiet"] .ch{min-height:auto;border-top:1px solid var(--ln2);padding-block:clamp(120px,16vh,200px) clamp(96px,14vh,170px);background:transparent;color:var(--fg)}
html[data-skin="quiet"] body .ch[data-theme="dark"]:not([data-quiet="dark"]),html[data-skin="quiet"] body .ch[data-theme="light"],html[data-skin="quiet"] body .hero[data-theme="dark"],html[data-skin="quiet"] body .hero[data-theme="light"]{background:#fff}
html[data-skin="quiet"] body .ch[data-quiet="dark"]{background:var(--navy);color:#fff;border-top:0}
html[data-skin="quiet"] body .ft,html[data-skin="quiet"] body.page .ft{background:#fff}
html[data-skin="quiet"] .ch > .wrap{position:relative;z-index:1}
/* the numeral: filled with the plane's own colour and stroked behind the fill, so overlapping contours in 1 and 4 do not show */
html[data-skin="quiet"] .ch[data-n]::after{content:attr(data-n);position:absolute;right:calc(var(--gutter) + 44px);top:var(--nt);z-index:0;font:200 var(--nf)/1 var(--display);letter-spacing:-.05em;color:#fff;-webkit-text-stroke:2px rgba(11,19,36,.3);paint-order:stroke fill;pointer-events:none}
html[data-skin="quiet"] body .ch[data-quiet="dark"]::after{color:var(--navy);-webkit-text-stroke-color:rgba(255,255,255,.42)}
html[data-skin="quiet"] #intro::after{display:none}
html[data-skin="quiet"] .ch[data-quiet="dark"] .lab,html[data-skin="quiet"] .ch[data-quiet="dark"] .deck,html[data-skin="quiet"] .ch[data-quiet="dark"] .photo .tag{color:#aab6c8}
html[data-skin="quiet"] .ch[data-quiet="dark"] h2,html[data-skin="quiet"] .ch[data-quiet="dark"] .cta,html[data-skin="quiet"] .ch[data-quiet="dark"] .num{color:#fff}
html[data-skin="quiet"] .ch[data-quiet="dark"] .rule,html[data-skin="quiet"] .ch[data-quiet="dark"] .facts li.panel,html[data-skin="quiet"] .ch[data-quiet="dark"] .grid3 > .panel{border-color:rgba(255,255,255,.22);background:transparent}
html[data-skin="quiet"] .ch--center{text-align:left}
html[data-skin="quiet"] .ch--center .ch__body{margin-inline:0;max-width:min(52%,640px)}
html[data-skin="quiet"] .ch--center .deck,html[data-skin="quiet"] .ch--center .rule{margin-inline:0}
html[data-skin="quiet"] .ch--center .ch__cta,html[data-skin="quiet"] .ch--center .cta{justify-content:flex-start}
html[data-skin="quiet"] #begin .ch__cta{justify-content:flex-start!important}
html[data-skin="quiet"] #lab [style*="text-align:center"]{text-align:left!important}
/* photographs: a tall frame at the right, grayscale until the pointer rests on it */
html[data-skin="quiet"] .ch--media > .media{position:absolute;inset:calc(var(--nt) + var(--nf) + 20px) calc(var(--gutter) + 44px) auto auto;left:auto;width:min(40%,560px);height:clamp(420px,56vh,640px);background:transparent;border-radius:0;overflow:hidden}
html[data-skin="quiet"] .ch--media > .media::after{background:none}
html[data-skin="quiet"] .ch--media > .wrap{pointer-events:none}
html[data-skin="quiet"] .ch--media > .wrap > *{pointer-events:auto}
html[data-skin="quiet"] .ch--lab:hover > .media{transform:none}
html[data-skin="quiet"] .ch--media > .media img,html[data-skin="quiet"] .photo img,html[data-skin="quiet"] .phero__img img,html[data-skin="quiet"] .mfig img,html[data-skin="quiet"] .card img,html[data-skin="quiet"] .q-hero__ph img{filter:grayscale(1) contrast(1.03);transition:filter .9s var(--ease)}
html[data-skin="quiet"] .ch--media > .media:hover img,html[data-skin="quiet"] .photo:hover img,html[data-skin="quiet"] .mfig:hover img,html[data-skin="quiet"] .card:hover img,html[data-skin="quiet"] .phero__img:hover img{filter:none}
html[data-skin="quiet"] .ch--media .ch__body{max-width:min(50%,620px);min-height:calc(clamp(420px,56vh,640px) + 60px)}
html[data-skin="quiet"] #intro .ch__body{min-height:0}
html[data-skin="quiet"] .ch--media .grid3,html[data-skin="quiet"] .ch--media .ba-grid,html[data-skin="quiet"] .ch--media .quotes,html[data-skin="quiet"] .ch--media .proc{position:relative;z-index:1}
/* chapters that already pair text with a photo or a card: no second frame beside them */
html[data-skin="quiet"] .ch--media[data-split] .ch__body{max-width:none;min-height:0}
html[data-skin="quiet"] .ch--media[data-split="photo"] > .media{display:none}
html[data-skin="quiet"] .ch--media[data-split="text"]{flex-direction:column;align-items:stretch;padding-top:calc(var(--nt) + var(--nf) + 28px)}
html[data-skin="quiet"] .ch--media[data-split="text"] > .media{position:relative;inset:auto;width:auto;height:clamp(300px,46vh,520px);margin:0 max(var(--gutter),calc((100% - 1320px) / 2 + var(--gutter))) clamp(48px,7vh,80px)}
/* procedure tiles: the chapter frame shows the procedure; the tile itself only darkens its hairline */
html[data-skin="quiet"] .grid3.is-focus > li.proc.is-on{transform:none;background:transparent;border-color:var(--fg)}
html[data-skin="quiet"] .grid3.is-focus > li.proc:not(.is-on){opacity:.4;filter:none}
/* the first chapter: the photograph fills the right half and the text sits in a translucent navy panel that crosses its edge */
html[data-skin="quiet"] #intro{padding-block:0;min-height:min(92svh,900px);display:flex;align-items:center}
html[data-skin="quiet"] #intro > .media{inset:0 0 0 48%;width:auto;height:auto}
html[data-skin="quiet"] #intro .ch__body{position:relative;max-width:min(58%,700px);background:rgba(11,19,36,.9);color:#fff;padding:clamp(30px,4.2vw,64px) clamp(28px,4vw,60px);margin-block:clamp(72px,10vh,120px)}
html[data-skin="quiet"] #intro .ch__body .lab{color:#aab6c8}
html[data-skin="quiet"] #intro .ch__body h2,html[data-skin="quiet"] #intro .ch__body .cta{color:#fff}
html[data-skin="quiet"] #intro .ch__body .deck{color:#dbe3ee}
html[data-skin="quiet"] #intro .ch__body .rule{background:rgba(255,255,255,.3)}
/* tiles, facts, steps, tables: hairlines instead of cards */
html[data-skin="quiet"] .panel{background:transparent;border:0;border-top:1px solid var(--ln);border-radius:0;box-shadow:none}
html[data-skin="quiet"] .split{gap:48px clamp(48px,6vw,96px)}
html[data-skin="quiet"] .photo{border-radius:0;border:0;margin:0}
html[data-skin="quiet"] .photo img{height:auto}
html[data-skin="quiet"] .photo .tag,html[data-skin="quiet"] .ba__label,html[data-skin="quiet"] .ba__cap{background:#fff;color:var(--ink);border-radius:0;font-size:10px;letter-spacing:.3em;padding:8px 10px}
html[data-skin="quiet"] .facts{gap:0 40px;margin-top:44px}
html[data-skin="quiet"] .facts li.panel{padding:18px 0 0;min-width:140px}
html[data-skin="quiet"] .grid3{gap:0 40px;margin-top:48px}
html[data-skin="quiet"] .grid3 > .panel{padding:24px 0 26px;border-right:0;border-bottom:0}
html[data-skin="quiet"] .proc .lab{color:var(--fg);font-weight:400}
html[data-skin="quiet"] .team li,html[data-skin="quiet"] .pd-card{padding-left:0;padding-right:0}
html[data-skin="quiet"] .steps{gap:0 32px}
html[data-skin="quiet"] .steps > *{border-top:1px solid var(--ln);border-right:0;border-radius:0;padding:18px 0 0}
html[data-skin="quiet"] .price th,html[data-skin="quiet"] .price td{border-bottom:1px solid var(--ln2)}
html[data-skin="quiet"] blockquote{font:200 clamp(20px,1rem + .9vw,28px)/1.35 var(--display);letter-spacing:-.02em;border-left:1px solid var(--ln);padding-left:22px}
html[data-skin="quiet"] .quotes blockquote{font:300 clamp(16px,.9rem + .3vw,18px)/1.6 var(--body);letter-spacing:0;border-left:0;padding-left:0}
html[data-skin="quiet"] .quotes{gap:0 40px}
html[data-skin="quiet"] .quotes > *{border-top:1px solid var(--ln);border-right:0;border-radius:0;padding:22px 0 0}
html[data-skin="quiet"] .card{border:1px solid var(--ln2);border-radius:0;padding:28px;min-width:0}
html[data-skin="quiet"] .card .lines span:last-child{font:400 13px/1.4 var(--display);letter-spacing:.06em;text-transform:none;color:var(--fg2);min-width:0;overflow-wrap:anywhere;text-align:right}
html[data-skin="quiet"] .ba{border-radius:0}
html[data-skin="quiet"] .article .plate{border-radius:0}
html[data-skin="quiet"] .article .postlist a{font-weight:300}

/* ---------- booking sheet and the laboratory overlay ---------- */
html[data-skin="quiet"] .sheet,html[data-skin="quiet"] .seg,html[data-skin="quiet"] .x,html[data-skin="quiet"] .field input,html[data-skin="quiet"] .field select,html[data-skin="quiet"] .field textarea{border-radius:0}
html[data-skin="quiet"] .labmodal{background:#fff;color:var(--ink)}
html[data-skin="quiet"] .labmodal video,html[data-skin="quiet"] .labmodal::after{display:none}
html[data-skin="quiet"] .labmodal__in svg{width:40px;height:44px;fill:var(--ink)}
html[data-skin="quiet"] .labmodal__in .wide{font:200 clamp(34px,1.4rem + 3vw,72px)/1 var(--display);letter-spacing:-.02em;text-transform:none}
html[data-skin="quiet"] .labmodal__in p{color:var(--fg2)}
html[data-skin="quiet"] .labmodal__x{color:var(--ink);font-weight:400;font-size:10.5px;letter-spacing:.32em}
html[data-skin="quiet"] .labmodal__x b{border-radius:0;border-color:var(--ln)}

/* ---------- footer ---------- */
html[data-skin="quiet"] .ft,html[data-skin="quiet"] .page .ft{color:var(--ink);border-top:1px solid var(--ln2);padding-top:72px}
html[data-skin="quiet"] .ft .ft__mark,html[data-skin="quiet"] .page .ft .ft__mark{color:var(--ink)}
html[data-skin="quiet"] .ft__links{font-size:10.5px;letter-spacing:.3em;color:var(--fg2)}
html[data-skin="quiet"] .ft .ft__links a,html[data-skin="quiet"] .page .ft .ft__links a{color:var(--fg2)}
html[data-skin="quiet"] .ft .ft__links a:hover,html[data-skin="quiet"] .page .ft .ft__links a:hover{color:var(--ink)}
html[data-skin="quiet"] .ft .ft__mark i,html[data-skin="quiet"] .page .ft .ft__mark i{background:var(--ln)}
html[data-skin="quiet"] .ft small{color:var(--fg3);letter-spacing:.14em;font-size:10px}
html[data-skin="quiet"] .ft::before{content:"Tetri’s Smile · Laboratory";display:block;text-align:center;font:400 10.5px/1 var(--display);letter-spacing:.42em;text-transform:uppercase;color:var(--fg3);margin-bottom:34px}

/* ---------- inner pages ---------- */
html[data-skin="quiet"] .phero,html[data-skin="quiet"] .mag .phero{background:#fff;color:var(--ink);min-height:min(80vh,780px);padding-top:calc(76px + env(safe-area-inset-top,0px) + clamp(56px,10vh,120px));padding-bottom:clamp(48px,8vh,96px);border-bottom:1px solid var(--ln2);display:flex;align-items:flex-end}
html[data-skin="quiet"] .phero::before{display:none}
html[data-skin="quiet"] .phero__img{inset:calc(76px + 3vh) max(var(--gutter),calc((100% - 1320px) / 2 + var(--gutter))) 10% auto;left:auto;width:var(--qi);overflow:hidden;background:var(--plane)}
html[data-skin="quiet"] .phero__img img{opacity:1;object-position:60% 50%}
html[data-skin="quiet"] .phero__img::after{background:none}
html[data-skin="quiet"] .phero > .wrap > *{max-width:calc(100% - var(--qi) - 56px)}
html[data-skin="quiet"] .phero > .wrap::before{content:"";position:absolute;right:-4%;top:-14%;width:min(34vw,480px);aspect-ratio:1;border:1px solid var(--ln);border-radius:50%;pointer-events:none}
html[data-skin="quiet"] .phero .lab,html[data-skin="quiet"] .mag .phero .lab{color:var(--fg3);margin-bottom:26px}
html[data-skin="quiet"] .phero h1,html[data-skin="quiet"] .mag .phero h1{color:var(--ink);text-shadow:none;font-weight:200;font-size:clamp(44px,1.6rem + 4.8vw,112px);letter-spacing:-.035em;max-width:min(12ch,calc(100% - var(--qi) - 56px));line-height:.98}
html[data-skin="quiet"] .phero .lead,html[data-skin="quiet"] .mag .phero .lead{color:var(--fg2);font:300 clamp(16px,.95rem + .35vw,19px)/1.7 var(--body);max-width:min(48ch,calc(100% - var(--qi) - 56px));margin-top:30px}
html[data-skin="quiet"] .phero .lead p{margin:0 0 12px}
html[data-skin="quiet"] .phero__meta{color:var(--fg3);font-size:10px;letter-spacing:.3em}
html[data-skin="quiet"] .phero__meta span::before{background:currentColor}
html[data-skin="quiet"] .article,html[data-skin="quiet"] .mag .article{max-width:66ch}
html[data-skin="quiet"] .article h2,html[data-skin="quiet"] .mag .article h2{color:var(--ink);font:300 clamp(28px,1.1rem + 1.8vw,46px)/1.08 var(--display);letter-spacing:-.03em;margin:0 0 18px}
html[data-skin="quiet"] .article p,html[data-skin="quiet"] .article li{font:300 17px/1.75 var(--body)}
html[data-skin="quiet"] .article section{border-top:1px solid var(--ln2);padding-top:44px}
html[data-skin="quiet"] .mag .article section.first > h2 + p{font:300 clamp(18px,1rem + .5vw,22px)/1.6 var(--body);color:var(--fg)}
html[data-skin="quiet"] .mag .article section.first > h2 + p::first-letter{float:none;font:inherit;margin:0;color:inherit}
html[data-skin="quiet"] .guide__article h2[data-n]::before{font-weight:400;letter-spacing:.34em;color:var(--fg3)}
html[data-skin="quiet"] .mfig img{border-radius:0;background:var(--plane)}
html[data-skin="quiet"] .mfig figcaption{color:var(--fg3);font-size:10px;letter-spacing:.28em;padding-top:12px}
html[data-skin="quiet"] .pull{border-left:0;border-top:1px solid var(--ln2);border-bottom:1px solid var(--ln2);padding:30px 0}
html[data-skin="quiet"] .pull p{font:200 clamp(24px,1rem + 1.8vw,42px)/1.15 var(--display);letter-spacing:-.03em;color:var(--ink)}
html[data-skin="quiet"] .aside .panel{background:transparent;border:0;border-top:1px solid var(--ln);border-radius:0;box-shadow:none;padding:20px 0 4px}
html[data-skin="quiet"] .aside .panel .lab{color:var(--fg3)}
html[data-skin="quiet"] .pcta{background:#fff;color:var(--ink);position:relative;overflow:hidden;border-top:1px solid var(--ln2)}
html[data-skin="quiet"] .pcta::before{content:"";position:absolute;right:8vw;top:50%;width:min(36vw,440px);aspect-ratio:1;transform:translateY(-50%);border:1px solid var(--ln);border-radius:50%;pointer-events:none}
html[data-skin="quiet"] .pcta h2{color:var(--ink);font-weight:200;font-size:clamp(30px,1.2rem + 2.4vw,56px);letter-spacing:-.03em}
html[data-skin="quiet"] .pcta p{color:var(--fg2)}
html[data-skin="quiet"] .faq h3{font-weight:400}
html[data-skin="quiet"] .gloss dt{font-weight:400;color:var(--ink)}
html[data-skin="quiet"] .related{border-top:1px solid var(--ln2);padding-top:22px}

/* ---------- the guide: contents rail, listen player, reading highlight in ink ---------- */
html[data-skin="quiet"] .toc__k{color:var(--fg3)}
html[data-skin="quiet"] .toc__list{border-left-color:var(--ln2)}
html[data-skin="quiet"] .toc__list a.is-on{border-left-color:var(--ink);color:var(--ink)}
html[data-skin="quiet"] .toc__list a b{letter-spacing:.2em;color:var(--fg3)}
html[data-skin="quiet"] .toc__list a.is-on b{color:var(--ink)}
html[data-skin="quiet"] .toc__prog i{background:var(--ink)}
html[data-skin="quiet"] [data-say].is-reading,html[data-skin="quiet"] .gloss dt.is-reading + dd{background:linear-gradient(90deg,rgba(11,19,36,.05),rgba(11,19,36,0) 72%)}
html[data-skin="quiet"] .guide__article h2.is-reading{background:none}
html[data-skin="quiet"] [data-say].is-reading::after{background:var(--ink)}
html[data-skin="quiet"] .lcta{color:var(--ink);border-color:var(--ln);border-radius:0;font-weight:400;letter-spacing:.32em}
html[data-skin="quiet"] .lcta small{color:var(--fg3)}
html[data-skin="quiet"] .lplay,html[data-skin="quiet"] .lcta .lplay{background:conic-gradient(#8f99ab var(--p),rgba(11,19,36,.12) 0)}
html[data-skin="quiet"] .lplay::before,html[data-skin="quiet"] .lcta .lplay::before{background:var(--ink)}
html[data-skin="quiet"] .lcta .lplay{color:#fff}
html[data-skin="quiet"] .ldock .lplay,html[data-skin="quiet"] .tocfab .ring{background:conic-gradient(#fff var(--p),rgba(255,255,255,.2) 0)}
html[data-skin="quiet"] .lcard{border-radius:0;border-color:var(--ln2);box-shadow:none}
html[data-skin="quiet"] .lrow{border-radius:0;border-color:var(--ln2);background:#fff}
html[data-skin="quiet"] .lbtn,html[data-skin="quiet"] .lsel{border-radius:0;color:var(--ink);border-color:var(--ln)}
html[data-skin="quiet"] .lbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
html[data-skin="quiet"] .lcard__t .lnum,html[data-skin="quiet"] .lrow__t .lnum,html[data-skin="quiet"] .lcard__t span,html[data-skin="quiet"] .lrow__t span{color:var(--ink)}
html[data-skin="quiet"] .lnum,html[data-skin="quiet"] .lcard__time,html[data-skin="quiet"] .lrow__time,html[data-skin="quiet"] .lnote{color:var(--fg3)}
html[data-skin="quiet"] .tocfab,html[data-skin="quiet"] .ldock{background:var(--ink);border-radius:0;box-shadow:0 10px 30px rgba(11,19,36,.2)}
html[data-skin="quiet"] .tocfab .ring::before{background:var(--ink)}
html[data-skin="quiet"] .ldock .lbtn{color:#fff;border-color:rgba(255,255,255,.3)}
html[data-skin="quiet"] .ldock .lbtn[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink)}
html[data-skin="quiet"] .ldock__t b{color:#b7c3d3}
html[data-skin="quiet"] .tocsheet__in,html[data-skin="quiet"] .tocsheet__x b{border-radius:0}

/* ---------- widgets ---------- */
html[data-skin="quiet"] .tbtn{background:var(--ink);box-shadow:0 10px 30px rgba(11,19,36,.25)}
html[data-skin="quiet"] .tbtn::before{display:none}
html[data-skin="quiet"] .mbar{background:rgba(255,255,255,.96);border-top-color:var(--ln2)}
html[data-skin="quiet"] .tsn__card{font-family:var(--body)}

/* ---------- inverted colours: photographs are inverted back, as in the other skins ---------- */
html[data-skin="quiet"].a11y-darkc main .ch--media > .media img,html[data-skin="quiet"].a11y-darkc main .photo img,html[data-skin="quiet"].a11y-darkc main .phero__img img,html[data-skin="quiet"].a11y-darkc main .mfig img,html[data-skin="quiet"].a11y-darkc main .card img,html[data-skin="quiet"].a11y-darkc main .q-hero__ph img{filter:invert(1) hue-rotate(180deg) grayscale(1)}
html[data-skin="quiet"].a11y-darkc main .ch--media > .media:hover img,html[data-skin="quiet"].a11y-darkc main .photo:hover img,html[data-skin="quiet"].a11y-darkc main .phero__img:hover img,html[data-skin="quiet"].a11y-darkc main .mfig:hover img,html[data-skin="quiet"].a11y-darkc main .card:hover img{filter:invert(1) hue-rotate(180deg)}

/* ---------- stacked hero: tablets, phones, and whenever the T panel enlarges the page (zoom levels 1-3; the attribute also exists at 0) ---------- */
@media (max-width:1180px){
  html[data-skin="quiet"] .hero{grid-template-rows:auto auto auto}
  html[data-skin="quiet"] .hero__word{order:1;padding-top:calc(76px + 6vh);padding-bottom:0}
  html[data-skin="quiet"] .hero__word > *,html[data-skin="quiet"] .hero__word > .lockup-x{max-width:none}
  html[data-skin="quiet"] .q-hero{order:2;position:relative;right:auto;top:auto;width:auto;height:auto;margin:clamp(28px,4vh,44px) var(--gutter) 0;display:grid}
  html[data-skin="quiet"] .q-hero__ph{position:relative;inset:auto;height:min(52svh,560px)}
  html[data-skin="quiet"] .q-hero__panel{position:relative;left:auto;top:auto;width:min(80%,380px);margin:-56px 0 0 auto}
  html[data-skin="quiet"] .q-ring{left:auto;top:auto;right:-20%;bottom:-8%;width:60%}
  html[data-skin="quiet"] .hero__foot{order:3}
}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .hero{grid-template-rows:auto auto auto}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .hero__word{order:1;padding-top:calc(76px + 6vh);padding-bottom:0}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .hero__word > *,html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .hero__word > .lockup-x{max-width:none}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .q-hero{order:2;position:relative;right:auto;top:auto;width:auto;height:auto;margin:clamp(28px,4vh,44px) var(--gutter) 0;display:grid}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .q-hero__ph{position:relative;inset:auto;height:min(52svh,560px)}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .q-hero__panel{position:relative;left:auto;top:auto;width:min(80%,380px);margin:-56px 0 0 auto}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .q-ring{left:auto;top:auto;right:-20%;bottom:-8%;width:60%}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .hero__foot{order:3}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .phero,html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .mag .phero{display:block;min-height:auto;padding-top:calc(76px + env(safe-area-inset-top,0px) + 18px)}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .phero__img{position:relative;inset:auto;width:auto;height:44svh;margin:0 0 28px}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .phero > .wrap > *,html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .phero h1,html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .phero .lead{max-width:none}
html[data-skin="quiet"]:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .phero > .wrap::before{display:none}

@media (max-width:900px){
  html[data-skin="quiet"] .ch--media > .media{position:relative;inset:auto;width:auto;height:40svh;margin:0 var(--gutter) 34px}
  html[data-skin="quiet"] .ch--media{flex-direction:column;align-items:stretch}
  html[data-skin="quiet"] .ch--media .ch__body,html[data-skin="quiet"] .ch--center .ch__body{max-width:none;min-height:0}
  html[data-skin="quiet"] .ch--media[data-split="text"]{padding-top:clamp(120px,16vh,200px)}
  html[data-skin="quiet"] #intro{min-height:auto;padding-block:0 clamp(64px,10vh,96px);flex-direction:column}
  html[data-skin="quiet"] #intro > .media{position:relative;inset:auto;height:46svh;margin:0;width:100%}
  html[data-skin="quiet"] #intro .ch__body{max-width:none;margin:-48px var(--gutter) 0;padding:28px 24px}
  html[data-skin="quiet"] .ch[data-n]::after{font-size:clamp(72px,3rem + 8vw,120px);top:18px;right:var(--gutter)}
  html[data-skin="quiet"] .phero,html[data-skin="quiet"] .mag .phero{display:block;min-height:auto;padding-top:calc(76px + env(safe-area-inset-top,0px) + 18px)}
  html[data-skin="quiet"] .phero__img{position:relative;inset:auto;width:auto;height:44svh;margin:0 0 28px}
  html[data-skin="quiet"] .phero > .wrap > *,html[data-skin="quiet"] .phero h1,html[data-skin="quiet"] .phero .lead{max-width:none}
  html[data-skin="quiet"] .phero > .wrap::before{display:none}
  html[data-skin="quiet"] .grid3 > .panel{border-right:0}
  html[data-skin="quiet"] .steps{gap:0}
  html[data-skin="quiet"] .cards{grid-template-columns:minmax(0,1fr)}
}

/* ==== v30 (appended by build_v30.py) ==== Quiet's frosted depth: Arthur's logo picture, blurred far past recognition (a static
   image made by the build, no CSS filter), fixed behind every page at 26%; the white surfaces over it turn transparent so the
   page reads as frosted glass with depth. The navy panels, the menu and the header keep their own grounds. */
html[data-skin="quiet"]{background:#fff}
html[data-skin="quiet"] body,html[data-skin="quiet"] body.page{background:transparent}
html[data-skin="quiet"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(assets/frost-depth.jpg) center/cover no-repeat;opacity:.26}
html[data-skin="quiet"] body.page::before{display:block}   /* (v20 Quiet hid this slot, which Frost uses for its glows) */
html[data-skin="quiet"] body .ch[data-theme="dark"]:not([data-quiet="dark"]),html[data-skin="quiet"] body .ch[data-theme="light"],html[data-skin="quiet"] body .hero[data-theme="dark"],html[data-skin="quiet"] body .hero[data-theme="light"],html[data-skin="quiet"] .hero,html[data-skin="quiet"] .phero,html[data-skin="quiet"] .mag .phero,html[data-skin="quiet"] body .ft,html[data-skin="quiet"] body.page .ft{background:transparent}