/* Taku site pages (/, /phone, /mac) are ported from design demos drawn on browser defaults,
   but Tailwind's preflight in globals.css loads site-wide. Undo the parts of it the demos
   didn't set themselves. Zero specificity, and loaded before the demo CSS, so any demo rule wins.
   Only reverts the properties preflight touches: a blanket `all: revert` would also drop SVG
   presentation attributes (fill, stroke) and break every icon. */

/* Preflight's type defaults on <html>, undone for the demo only: the site's dialogs (sign in,
   download) render outside .tk and keep the site's own line height and font settings. */
:where(.tk){line-height:normal;tab-size:8;font-feature-settings:normal;font-variation-settings:normal}
html{
 /* globals.css hides overflow on <html> below 900px; the demos hide it on <body> instead,
    which only reaches the viewport (and keeps their sticky sections pinned) if <html> stays visible */
 overflow-x:revert;
 /* no grey flash over whatever is tapped on iOS/Android: the controls have their own states */
 -webkit-tap-highlight-color:transparent}

/* iOS zooms the page into any input under 16px and doesn't zoom back out. The demos set 15px on
   their waitlist inputs with selectors this file can't outrank at zero specificity, hence !important.
   Only for coarse pointers, so the desktop design keeps its size. Never fix this with maximum-scale. */
@media (pointer:coarse){.tk input,.tk textarea,.tk select{font-size:16px !important}}

/* Some demo artwork reaches past the right edge on phones. The demos clip it on <body>, which iOS still
   lets you pan past, so clip the page root too. `clip`, not `hidden`, keeps sticky sections pinned. */
.tk{overflow-x:clip}
:where(.tk) :where(*,::before,::after,::backdrop,::file-selector-button){margin:revert;padding:revert;border:revert}
:where(.tk) :where(h1,h2,h3,h4,h5,h6){font-size:revert;font-weight:revert}
:where(.tk) :where(a){text-decoration:revert}
:where(.tk) :where(code,kbd,samp,pre){font-family:revert;font-size:revert}
:where(.tk) :where(small){font-size:revert}
:where(.tk) :where(ol,ul,menu){list-style:revert}
:where(.tk) :where(img,svg,video,canvas,audio,iframe,embed,object){display:revert;vertical-align:revert}
:where(.tk) :where(video){max-width:revert;height:revert}
:where(.tk) :where(button,input,select,optgroup,textarea){font:revert;letter-spacing:revert;color:revert;border-radius:revert;background-color:revert}
:where(.tk) :where(button,input:where([type=button],[type=reset],[type=submit])){appearance:revert}
:where(.tk) ::placeholder{opacity:revert;color:revert}