@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-serif:Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, "Noto Serif", serif;--spacing:4px;--color-bg:#0d0e10;--color-panel:#16181c;--color-panel-2:#1d2026;--color-line:#2a2e35;--color-ink:#e8e9ea;--color-muted:#8d939c;--color-accent:#e5a03c;--color-accent-ink:#17130a;--color-ok:#6fca8b;--color-bad:#e5675c;--radius-panel:10px;--breakpoint-tiny:420px;--breakpoint-card:640px;--breakpoint-phone:700px;--breakpoint-wide:900px;--measure:700px}}@layer base,components;@layer utilities{.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:calc(var(--spacing) * 2)}.gap-4{gap:calc(var(--spacing) * 4)}}:root{color-scheme:dark}@media(prefers-color-scheme:light){:root:not([data-theme]){--color-bg: #fbfaf7;--color-panel: #f3f1ec;--color-panel-2: #ebe8e1;--color-line: #dedad1;--color-ink: #1d1c1a;--color-muted: #67635c;--color-accent: #9c5a00;--color-accent-ink: #fff;--color-ok: #2e7a48;--color-bad: #b3382c;color-scheme:light}}[data-theme=light]{--color-bg: #fbfaf7;--color-panel: #f3f1ec;--color-panel-2: #ebe8e1;--color-line: #dedad1;--color-ink: #1d1c1a;--color-muted: #67635c;--color-accent: #9c5a00;--color-accent-ink: #fff;--color-ok: #2e7a48;--color-bad: #b3382c;color-scheme:light}@layer base{*{box-sizing:border-box}html,body{margin:0;background:var(--color-bg);color:var(--color-ink);font:14px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}a{color:var(--color-accent)}button{background:var(--color-accent);color:var(--color-accent-ink);border:0;padding:9px 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}button:hover{filter:brightness(1.08)}button:disabled{opacity:.4;cursor:default;filter:none}@media(max-width:700px){button{padding:11px 18px;min-height:44px}}input,select,textarea{background:var(--color-panel-2);color:var(--color-ink);border:1px solid var(--color-line);border-radius:8px;padding:8px 10px;font:inherit}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}@media(max-width:700px){input,select,textarea{min-height:42px;padding:10px}}}@layer components{.shell{display:flex;flex-direction:column;min-height:100vh}.shell>main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:44px 22px 64px}@media(max-width:700px){.shell>main{padding:26px 18px 48px}}.shell.admin>main{max-width:1600px;padding:28px 22px 48px}.column{max-width:var(--measure);margin:0 auto}.pagetitle{margin:0 0 12px;font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:balance}@media(max-width:700px){.pagetitle{font-size:27px;margin-bottom:10px}}.lede{color:var(--color-muted);font-size:17px;line-height:1.55;margin:0 0 22px;max-width:var(--measure);text-wrap:pretty}@media(max-width:700px){.lede{font-size:16px}}.prose{max-width:var(--measure);font:19px/1.7 var(--font-serif);text-wrap:pretty}@media(max-width:700px){.prose{font-size:17.5px;line-height:1.65}}.prose>:first-child{margin-top:0}.prose h2,.prose h3{font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em;text-wrap:balance}.prose h2{margin:2.2em 0 .6em;font-size:24px;line-height:1.25}@media(max-width:700px){.prose h2{font-size:21px}}.prose h3{margin:1.8em 0 .4em;font-size:19px;line-height:1.3}@media(max-width:700px){.prose h3{font-size:18px}}.prose h2+h3{margin-top:1em}.prose p,.prose ul,.prose ol,.prose blockquote,.prose pre,.prose table{margin:0 0 1.15em}.prose ul,.prose ol{padding-left:1.3em}.prose li+li{margin-top:.35em}.prose li::marker{color:var(--color-muted)}.prose a{text-decoration-thickness:1px;text-underline-offset:.18em}.prose blockquote{margin-left:0;padding:0 0 0 20px;border-left:3px solid var(--color-accent);font-style:italic;color:var(--color-muted)}.prose code{font:.82em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--color-panel-2);padding:2px 5px;border-radius:4px}.prose pre{background:var(--color-panel);border:1px solid var(--color-line);border-radius:8px;padding:14px 16px;overflow-x:auto;line-height:1.5}.prose pre code{background:none;padding:0;font-size:14px}.prose hr{border:0;border-top:1px solid var(--color-line);margin:2.4em auto;width:40%}.prose table{border-collapse:collapse;width:100%;font:15px/1.45 var(--font-sans)}.prose th,.prose td{border-bottom:1px solid var(--color-line);padding:8px 10px;text-align:left}.prose th{font-weight:650;color:var(--color-muted);font-size:13px}.prose .block{margin:1.8em 0}.shell.admin .pagetitle{font-size:26px;font-weight:650}@media(max-width:700px){.shell.admin .pagetitle{font-size:22px}}.shell.admin .lede{font-size:15px}@media(max-width:700px){.shell.admin .lede{font-size:14px}}.shell.admin .prose{font-size:16px}.kind{font:600 11.5px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase}.kind.guide{color:var(--color-accent)}.kind.photo{color:var(--color-ok)}.figure,.compare{margin:2em 0}.figure img,.compare img{display:block;width:100%;height:auto;border-radius:6px;background:var(--color-panel)}.figure figcaption,.compare figcaption{margin-top:10px;font:13px/1.45 var(--font-sans);color:var(--color-muted);display:flex;flex-wrap:wrap;gap:2px 10px}.figure figcaption a,.compare figcaption a{color:inherit}.figure figcaption>span:first-child:not(.credit),.compare figcaption>span:first-child:not(.credit){color:var(--color-ink)}@media(min-width:900px){article.guide .prose .figure,article.guide .prose .compare{width:min(1000px,100vw - 44px);position:relative;left:50%;transform:translate(-50%)}}.credit{white-space:nowrap}.wipe{position:relative;overflow:hidden;border-radius:6px;background:#000;-webkit-user-select:none;user-select:none;--split: 50%}.wipe picture,.wipe img{pointer-events:none}.wipe img{border-radius:0;width:100%;height:100%;object-fit:cover}.wipe picture:nth-of-type(2) img{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split))}.wipe:after{content:"";position:absolute;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background:#ffffffd9;box-shadow:0 0 8px #0009;pointer-events:none}.wipe .tag{position:absolute;top:12px;padding:4px 10px;border-radius:999px;background:#08090bb8;color:#fff;font:11.5px/1.4 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;pointer-events:none}.wipe .tag.left{left:12px}.wipe .tag.right{right:12px}.wipe input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y;min-height:0}.wipe:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}.tool{background:var(--color-panel);border:1px solid var(--color-line);border-radius:var(--radius-panel);display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;margin:1.8em 0;padding:14px 18px;color:inherit;text-decoration:none;font-family:var(--font-sans);border-left:3px solid var(--color-accent)}.tool:hover{border-color:var(--color-accent)}.tool:hover .go{transform:translate(3px)}.tool .label{grid-column:1;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--color-accent)}.tool strong{grid-column:1;font-size:16px;line-height:1.35}.tool .line{grid-column:1;color:var(--color-muted);font-size:14px;line-height:1.45}.tool .go{grid-column:2;grid-row:1/4;font-size:22px;color:var(--color-accent);transition:transform .15s}.download{background:var(--color-panel);border:1px solid var(--color-line);border-radius:var(--radius-panel);display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:1.8em 0;padding:14px 18px;font-family:var(--font-sans)}.download>div{display:flex;flex-direction:column;gap:2px;min-width:0}.download strong{font-size:15px;line-height:1.35;overflow-wrap:anywhere}.download .line,.download .note{color:var(--color-muted);font-size:13px;line-height:1.45}.download .line a{color:inherit}.download .button{background:var(--color-accent);color:var(--color-accent-ink);text-decoration:none;padding:9px 18px;border-radius:8px;font-weight:600;font-size:14px}.download .button:hover{filter:brightness(1.08)}.ghost{background:transparent;color:var(--color-muted);border:1px solid var(--color-line);font-weight:500}.ghost:hover{color:var(--color-ink);border-color:var(--color-muted);filter:none}}
