.a4-root{--body-2: oklch(.42 .01 60);--body-3: oklch(.38 .01 60);--a4-zoom: 1;min-height:100dvh;background:var(--canvas);padding:24px 16px 64px}.a4-toolbar{max-width:794px;margin:0 auto 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}.a4-toolbar .btn{width:auto;padding:0 18px;height:40px}.a4-stack{display:flex;flex-direction:column;align-items:center;gap:28px}.a4-page{zoom:var(--a4-zoom);width:794px;height:1123px;flex:none;background:var(--paper);overflow:hidden;box-shadow:0 1px 0 var(--line),0 30px 60px -30px #362c2440;display:flex;flex-direction:column;box-sizing:border-box;padding:48px 64px 40px;font-family:Hanken Grotesk,sans-serif;color:var(--ink)}.a4-page p{margin:0}.a4-page *{box-sizing:content-box}@media print{@page{size:A4;margin:0}html,body{background:var(--paper)}.a4-root{padding:0;background:none;--a4-zoom: 1 !important}.a4-toolbar{display:none}.a4-stack{gap:0}.a4-page{zoom:1;box-shadow:none;break-after:page;print-color-adjust:exact;-webkit-print-color-adjust:exact}}.a4-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}.a4-foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1px solid var(--line)}.a4-fill{flex:1}.a4-title{margin-top:48px;display:flex;flex-direction:column;gap:12px}.a4-title--face{margin-top:40px}.a4-h2{margin:0;font-family:var(--serif);font-weight:300;font-size:52px;line-height:1.02;letter-spacing:-.025em}.a4-lede{margin:6px 0 0!important;max-width:560px;font-size:15px;line-height:1.6;color:var(--body-2);text-wrap:pretty}.a4-title--face .a4-lede{margin:4px 0 0!important;max-width:580px}.a4-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--clay)}.a4-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}.a4-mono{font-family:var(--mono);font-size:11px;color:var(--muted)}.a4-mono-sm{font-family:var(--mono);font-size:10px;color:var(--muted)}.a4-tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--clay)}.a4-tick{font-family:var(--mono);font-size:10px;color:var(--clay)}.a4-when{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--clay)}.a4-col-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}.a4-name{font-size:12px;line-height:1.3}.a4-note{font-size:11.5px;line-height:1.4;color:var(--muted)}.a4-small{font-size:12px;color:var(--muted)}.a4-tiny{font-size:11px;color:var(--muted)}.a4-body{font-size:13px;line-height:1.45;color:var(--body-3)}.a4-serif{font-family:var(--serif)}.a4-strike{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}.a4-rule{display:flex;align-items:center;gap:14px}.a4-rule>span:last-child{flex:1;height:1px;background:var(--line)}.a4-pill{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:5px 10px;border-radius:999px;background:var(--clay-wash);color:#603e35;white-space:nowrap}.a4-pill--line{background:none;border:1px solid var(--line);color:var(--muted)}.a4-slot{background:repeating-linear-gradient(135deg,var(--hatch-a) 0 7px,var(--hatch-b) 7px 14px);display:flex;align-items:flex-end;padding:12px;box-sizing:border-box}.a4-slot--sm{padding:10px}.a4-sw{display:flex;flex-direction:column;gap:7px}.a4-sw>div:first-child{box-shadow:inset 0 0 0 1px #362c240f}.a4-sw6{display:flex;flex-direction:column;gap:6px}.a4-map{position:relative;flex:none}.a4-map-photo{position:absolute;top:0}.a4-map-line{position:absolute;height:1px;background:var(--ink)}.a4-map-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}.a4-map-label{display:flex;flex-direction:column;gap:3px;position:absolute}.a4-map-label--left{align-items:flex-end;text-align:right}.a4-map-label>div{display:flex;align-items:center;gap:7px}.a4-map-label--left>div{flex-direction:row-reverse}.a4-map-chip{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px #362c241f}.a4-map-value{font-family:var(--serif);font-size:17px;line-height:1.15}.a4-marker{width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10px;display:flex;align-items:center;justify-content:center;flex:none}.a4-marker--abs{position:absolute}.a4-list{margin-top:6px;display:flex;flex-direction:column}.a4-row-style{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft)}.a4-row-step{display:grid;grid-template-columns:22px 120px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}.a4-row-compare{display:grid;grid-template-columns:120px 1fr 1fr;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line-soft)}.a4-routine{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:12px}.a4-routine>div{display:flex;flex-direction:column}.a4-brands{margin-top:32px;column-count:2;column-gap:36px}.a4-brand-group{display:flex;flex-direction:column;break-inside:avoid;margin-bottom:16px}.a4-brand-group>div:first-child{display:flex;justify-content:space-between;padding-bottom:4px;border-bottom:1px solid var(--line)}.a4-brand{display:flex;flex-direction:column;gap:1px;padding:6px 0;border-bottom:1px solid var(--line-soft)}.a4-brand>span:first-of-type{font-size:13px;font-weight:500}.a4-brand>span:last-child{font-size:13px;color:var(--muted)}.a4-brand--img{display:grid;grid-template-columns:32px 1fr;column-gap:12px;row-gap:1px;align-items:center}.a4-brand--img>img,.a4-brand--img>i{grid-row:1 / 3;width:32px;height:32px;object-fit:contain}.a4-page{position:relative}.a4-doodle{position:absolute;top:100px;right:64px;width:auto;pointer-events:none}.a4-routine-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}.a4-routine-head>img{height:24px;width:auto}.a4-row-step:has(.a4-step-icon){grid-template-columns:30px 120px 1fr}.a4-step-icon{height:34px;width:30px;object-fit:contain;align-self:center}.a4-card{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line)}.a4-card--off{border-color:var(--line-soft);opacity:.75}:root{--paper: oklch(.975 .006 80);--canvas: oklch(.955 .006 80);--ink: oklch(.24 .01 60);--ink-2: oklch(.42 .01 60);--muted: oklch(.48 .01 60);--faint: oklch(.6 .01 60);--line: oklch(.88 .01 75);--line-soft: oklch(.9 .008 75);--line-input: oklch(.86 .01 70);--clay: oklch(.52 .07 35);--clay-wash: oklch(.94 .02 35);--clay-ink: oklch(.38 .02 35);--selected: oklch(.95 .012 60);--hatch-a: oklch(.94 .01 70);--hatch-b: oklch(.925 .012 70);--serif: "Newsreader", Georgia, serif;--sans: "Hanken Grotesk", system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0}body{background:var(--canvas);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit}.app{max-width:430px;min-height:100dvh;margin:0 auto;background:var(--paper);display:flex;flex-direction:column}@media(min-width:600px){.app{margin:32px auto;min-height:844px;border-radius:28px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 30px 60px -30px #362c2440}}.screen{flex:1;display:flex;flex-direction:column}.screen--fixed{padding:22px 24px 32px}.wordmark{font-family:var(--serif);font-size:22px;letter-spacing:-.01em}.mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}.serif{font-family:var(--serif)}.muted{color:var(--muted)}.label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}.display{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.02em;text-wrap:balance}.display em{font-style:italic}.lede{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 24px}.navbar{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}.link{background:none;border:0;padding:0;cursor:pointer;font-size:13px;color:var(--muted)}.link:hover{color:var(--clay)}.link--ink{color:var(--ink)}.lang{display:inline-flex;border:1px solid var(--line-input);border-radius:999px;overflow:hidden}.lang button{background:none;border:0;padding:4px 9px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);cursor:pointer}.lang button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.btn{height:54px;width:100%;border-radius:999px;border:1px solid transparent;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;cursor:pointer;transition:opacity .15s,transform .1s}.btn:active{transform:scale(.99)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn--primary{background:var(--ink);color:var(--paper)}.btn--ghost{background:transparent;border-color:#c8c3bd;font-weight:400}.btn--split{justify-content:space-between;padding:0 24px}.btn--split .price{font-family:var(--serif);font-size:18px;font-weight:400}.btn--split .price-was{font-size:14px;opacity:.55;margin-right:8px}.hint{text-align:center;font-size:12px;color:var(--muted)}.divider{display:flex;align-items:center;gap:12px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#d7cfc9}.divider span{width:5px;height:5px;transform:rotate(45deg);border:1px solid var(--clay)}.hatch{background:repeating-linear-gradient(135deg,var(--hatch-a) 0 7px,var(--hatch-b) 7px 14px)}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats>div{padding:18px 0;display:flex;flex-direction:column;gap:2px}.stats>div+div{padding-left:16px;border-left:1px solid var(--line)}.callout{background:var(--clay-wash);padding:36px 24px;display:flex;flex-direction:column;gap:10px}.callout:before{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--clay);margin:0 0 8px 2px}.callout .sub{font-size:13px;line-height:1.55;color:var(--clay-ink)}.portrait{aspect-ratio:4 / 5;border-radius:2px;display:flex;flex-direction:column;justify-content:space-between;padding:22px;box-shadow:inset 0 0 0 10px var(--paper),inset 0 0 0 11px #ccbab0}.strip{display:flex;height:28px}.strip>div{flex:1}.steps{display:flex;flex-direction:column;gap:20px}.steps>div{display:flex;gap:16px;align-items:baseline;font-size:15px;line-height:1.5}.steps .num{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--clay);width:26px;flex:none}.toc-row{display:grid;grid-template-columns:36px 1fr;gap:8px;padding:18px 0;border-bottom:1px solid var(--line-soft)}.toc-row .n{font-family:var(--mono);font-size:11px;color:var(--clay);padding-top:5px}.toc-row .t{font-family:var(--serif);font-size:21px}.toc-row .d{font-size:13px;line-height:1.5;color:var(--muted)}.footer{padding:32px 24px 36px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.footer a{color:inherit;text-decoration:none}.footer a:hover{color:var(--clay)}.progress{margin-top:16px;height:1px;background:var(--line)}.progress>div{height:1px;background:var(--ink);transition:width .3s ease}.options{margin-top:36px;display:flex;flex-direction:column;gap:10px}.option{min-height:60px;padding:0 20px;border:1px solid var(--line-input);border-radius:14px;background:transparent;display:flex;align-items:center;justify-content:space-between;font-size:15px;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}.option:hover{border-color:#a39d98}.option .radio{width:16px;height:16px;flex:none;border-radius:50%;border:1px solid oklch(.78 .01 70)}.option[aria-checked=true]{border-color:var(--ink);background:var(--selected)}.option[aria-checked=true] .radio{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 4px var(--selected)}.oval{border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}.oval img{width:100%;height:100%;object-fit:cover}.oval--capture{margin:32px auto 0;width:240px;height:310px;border:1px dashed oklch(.7 .02 60);outline:1px solid oklch(.87 .014 60);outline-offset:9px}.oval--reading{width:180px;height:232px;border:1px solid var(--line);outline:1px solid oklch(.8 .03 40);outline-offset:10px;animation:breathe 2.4s ease-in-out infinite}@keyframes breathe{50%{outline-offset:16px;outline-color:#d0b8af66}}.tips{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.tips>div{display:flex;flex-direction:column;gap:4px;padding:0 4px}.tips>div:nth-child(2){border-left:1px solid var(--line);border-right:1px solid var(--line)}.tips .t{font-family:var(--serif);font-size:17px}.tips .d{font-size:11px;color:var(--muted)}.checklist{display:flex;flex-direction:column;border-top:1px solid var(--line)}.checklist>div{display:flex;justify-content:space-between;padding:14px 0;font-size:14px;border-bottom:1px solid var(--line-soft);transition:color .3s}.checklist>div:last-child{border-bottom:0}.checklist .is-next{color:var(--faint)}.checklist .is-active .mono{color:var(--clay)}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.swatches>div{aspect-ratio:1}.avoid{display:flex;gap:6px;height:36px}.avoid>div{flex:1}.report-head{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:3px double oklch(.85 .012 60)}.item-row{display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14px}.item-row .chip{width:28px;height:28px}.fade-in{animation:fade .35s ease both}@keyframes fade{0%{opacity:0;transform:translateY(6px)}}@media(prefers-reduced-motion:reduce){.fade-in,.oval--reading{animation:none}}.option:disabled{opacity:.4;cursor:not-allowed}.option--multi .radio{border-radius:4px}.option--multi[aria-checked=true] .radio{box-shadow:inset 0 0 0 3px var(--selected)}.text-input{width:100%;height:60px;padding:0 20px;border:1px solid var(--line-input);border-radius:14px;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none}.text-input:focus{border-color:var(--ink)}.text-input::placeholder{color:var(--faint)}.range{width:100%;accent-color:var(--ink)}.summary{display:flex;flex-direction:column;border-top:1px solid var(--line)}.summary button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 0;border:0;border-bottom:1px solid var(--line-soft);background:none;text-align:left;cursor:pointer}.summary button:hover .serif{color:var(--clay)}.measured{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.measured>div{display:flex;flex-direction:column;gap:6px}.measured .dot{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000014}.measured .dot--empty{background:repeating-linear-gradient(135deg,var(--hatch-a) 0 4px,var(--hatch-b) 4px 8px)}a.btn{text-decoration:none;color:inherit}a.btn--primary{color:var(--paper)}.spinner{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);border-top-color:var(--clay);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pdf-frame{position:relative;height:62vh;min-height:420px;border:1px solid var(--line);background:var(--canvas)}.pdf-frame iframe{width:100%;height:100%;border:0;display:block}.pdf-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:13px}.slides{position:relative;overflow:hidden;border-radius:2px;background:var(--hatch-a)}.slides>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1s ease,transform 6s ease-out}.slides>img.is-on{opacity:1;transform:scale(1)}.portrait.slides{padding:0;box-shadow:none}.portrait .slide-cap{position:absolute;inset:auto 0 0;padding:40px 16px 16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(transparent,#1a15128c);color:var(--paper)}.portrait .slide-cap .mono{color:inherit;opacity:.85}.portrait .slide-cap .strip{height:20px}.slide-dots{display:flex;gap:6px;justify-content:center}.slide-dots button{width:18px;height:2px;padding:0;border:0;background:var(--line);cursor:pointer;transition:background .3s}.slide-dots button[aria-current=true]{background:var(--ink)}.examples .lang button{white-space:nowrap;padding:6px 12px}.examples .slides{aspect-ratio:794 / 1123;box-shadow:0 1px 0 var(--line),0 12px 32px -18px #362c2459}@media(prefers-reduced-motion:reduce){.slides>img{transition:none;transform:none}}
