@font-face{font-family:'Roboto App';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Roboto-400.woff2') format('woff2')}
@font-face{font-family:'Roboto App';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Roboto-500.woff2') format('woff2')}
@font-face{font-family:'Roboto App';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Roboto-600.woff2') format('woff2')}
@font-face{font-family:'Roboto App';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Roboto-700.woff2') format('woff2')}
.native-demo-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding-block:30px 36px}
.native-demo-copy{padding-top:12px;max-width:450px}
.native-demo-copy h1{font-family:var(--display);font-size:clamp(40px,4.8vw,62px);font-weight:650;line-height:1.06;letter-spacing:-.055em;margin-block:18px 22px;color:var(--sl-forest)}
.native-demo-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:var(--sl-muted);max-width:380px}
.native-demo-shortcuts{display:flex;flex-direction:column;align-items:start;gap:8px;margin-block:24px}
.native-demo-shortcuts button{font-size:16px;line-height:1.5;min-height:44px;text-align:left;background:transparent;border:1px solid var(--sl-border);border-radius:100px;padding:9px 20px;color:var(--sl-forest)}
.native-demo-shortcuts button[aria-pressed="true"]{background:var(--sl-forest);color:var(--sl-cream);border-color:var(--sl-forest)}
.native-demo-copy>p.native-demo-note{font-size:14px;line-height:1.7;border-top:1px solid var(--sl-border);padding-top:20px;margin-bottom:18px}
.native-demo-copy>p.native-demo-notice{font-size:14px;border-radius:12px;padding:14px;background:var(--sl-primary-container);margin-block:12px}
.native-demo-copy .text-link{font-size:14px}
.native-screen-reference{font-size:14px;line-height:1.6;color:var(--sl-muted);margin-top:24px}
.native-screen-reference summary{cursor:pointer;padding-block:8px}
.native-screen-reference a{display:block;text-decoration:underline;text-underline-offset:3px;padding-block:6px;color:var(--sl-forest)}
.native-demo-visual{min-width:0;justify-self:center;width:100%;max-width:372px}
.native-app{--app-base:#F7F2E9;--app-surface:#FBF8F2;--app-card:#F1ECE2;--app-selected:#E8E1D3;--app-line:#E3DBCC;--app-ink:#1B211C;--app-muted:#5A6158;--app-primary:#2E4232;--app-outline:#6E7767;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;height:820px;border:6px solid var(--app-primary);border-radius:32px;background:var(--app-base);color:var(--app-ink);overflow:hidden;box-shadow:0 24px 50px -28px #18282060;font-family:'Roboto App',Roboto,Arial,sans-serif;font-size:16px;line-height:1.5;letter-spacing:0}
.native-app *, .native-app button,.native-app input,.native-app select{font-family:inherit;letter-spacing:inherit}
.native-app button{cursor:pointer}
.native-app button:disabled{cursor:default;opacity:.55}
.native-app button:focus-visible,.native-app a:focus-visible,.native-app input:focus-visible,.native-app select:focus-visible{outline:2px solid var(--app-primary);outline-offset:3px}
.native-status{position:relative;flex:0 0 44px;overflow:hidden}
.native-status img,.native-system-navigation img{position:absolute;display:block;width:100%;height:auto}
.native-status img{top:0}
.native-system-navigation{position:relative;flex:0 0 42px;background:white;overflow:hidden}
.native-system-navigation img{bottom:0}
.native-screen{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:20px 20px 24px}
.native-mark{display:block;width:26px;height:26px;color:#8A9488;margin:0 auto 11px}
.native-title{font-family:inherit!important;font-weight:600!important;font-size:26px!important;line-height:34px!important;letter-spacing:0!important;margin:0 0 3px!important;color:var(--app-ink)!important}
.native-subtitle{font-size:14px;line-height:21px;color:var(--app-muted);margin:0 0 16px}
.native-section-title{font-size:16px;line-height:22px;font-weight:500;margin:22px 0 10px}
.native-card{padding:16px;border-radius:20px;background:var(--app-card);margin-top:16px}
.native-card h3{font-family:inherit;font-size:16px;line-height:22px;font-weight:500;letter-spacing:0;margin:0 0 14px;color:var(--app-ink)}
.native-card p{font-size:14px;line-height:21px;color:var(--app-muted)}
.native-card .native-body{font-size:16px;line-height:24px;color:var(--app-ink)}
.native-row-button{display:flex;align-items:center;gap:14px;min-height:48px;width:100%;border:0;text-align:left;background:transparent;color:var(--app-ink);font-size:16px;line-height:24px;padding:6px 0}
.native-row-button>img{width:24px;height:24px;flex:none}
.native-row-button>img[src="/brands/x.svg"]{background:#000;border-radius:5px;padding:3px}
.native-glyph{display:inline-block;flex:none;width:24px;height:24px;margin:0;background:currentColor;mask:var(--native-icon) center/contain no-repeat;color:var(--app-primary)}
.native-navigation button span.native-glyph{display:block;width:24px;height:24px;margin:0;border-radius:0;background:currentColor;color:inherit}
.native-activity-tile{display:flex;align-items:center;gap:12px}
.native-activity-tile>.native-glyph{margin:0;color:var(--app-primary)}
.native-activity-tile>.native-activity-copy{flex:1;min-width:0;margin:0}
.native-dialog>.native-glyph{display:block;margin:0 auto 16px}
.native-stat-cards .native-card{margin-top:16px}
.native-row-button .native-plus{font-size:28px;line-height:24px;flex:none;width:24px;text-align:center;color:var(--app-primary)}
.native-row-button .native-check{display:grid;place-items:center;width:18px;height:18px;margin-left:auto;border:1.5px solid var(--app-outline);border-radius:2px;color:var(--app-surface)}
.native-row-button[aria-pressed="true"] .native-check{background:var(--app-primary);border-color:var(--app-primary)}
.native-check svg{width:18px;height:18px}
.native-row-button:not([aria-pressed="true"]) .native-check svg{visibility:hidden}
.native-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.native-chip{min-height:38px;padding:7px 13px;border:1px solid var(--app-outline);border-radius:100px;background:transparent;color:var(--app-muted);font-size:14px;font-weight:500;line-height:21px;white-space:nowrap}
.native-chip[aria-pressed="true"]{background:var(--app-primary);color:var(--app-surface);border-color:var(--app-primary)}
.native-custom{width:100%;height:50px;border:1px solid var(--app-outline);background:transparent;border-radius:10px;padding:12px 13px;font-size:16px;line-height:24px;color:var(--app-ink);margin-top:18px}
.native-custom::placeholder{opacity:1;color:var(--app-muted)}
.native-card .native-extra{font-size:14px;line-height:21px;margin-top:14px;color:var(--app-muted)}
.native-inline-action{padding:8px 0;min-height:40px;font-size:14px;font-weight:500;line-height:21px;color:var(--app-primary);background:transparent;border:0;text-align:left}
.native-bottom-action{flex:none;padding:12px 20px;background:var(--app-selected);border-top:1px solid var(--app-line)}
.native-bottom-action p{font-size:14px;line-height:21px;color:var(--app-muted);margin-bottom:6px}
.native-primary{display:block;width:100%;min-height:48px;border:0;border-radius:12px;background:var(--app-primary);color:var(--app-surface);padding:12px 14px;font-size:14px;line-height:21px;font-weight:500}
.native-primary:disabled{background:var(--app-line);color:var(--app-muted);opacity:1}
.native-navigation{flex:0 0 70px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--app-surface);padding:10px 0 5px}
.native-navigation button{font-size:12px;line-height:16px;font-weight:500;border:0;background:transparent;color:var(--app-muted);padding:0 2px;min-width:0;min-height:52px}
.native-navigation button span{display:flex;justify-content:center;align-items:center;margin:0 auto 4px;width:56px;max-width:100%;height:29px;border-radius:100px}
.native-navigation button[aria-selected="true"]{color:var(--app-primary)}
.native-navigation button[aria-selected="true"]>span{background:var(--app-selected)}
.native-navigation img{width:24px;height:24px}
.native-back-heading{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.native-back-heading{min-height:56px}
.native-back{background:transparent;border:0;color:var(--app-ink);font-size:26px;min-width:28px;min-height:36px;padding:0;line-height:1}
.native-back svg{width:24px;height:24px}
.native-back-heading .native-title{font-size:26px!important}
.native-message{padding:16px;background:var(--app-card);border-radius:20px;font-size:16px;font-weight:500;line-height:24px;margin-bottom:28px}
.native-radio-group{display:grid;gap:8px}
.native-radio{display:flex;align-items:center;gap:16px;padding:13px 16px;min-height:66px;background:var(--app-card);border-radius:20px;cursor:pointer}
.native-radio:has(input:checked){background:var(--app-selected)}
.native-radio input{flex:0 0 20px;width:20px;height:20px;margin:0;accent-color:var(--app-primary)}
.native-radio strong{display:block;font-size:16px;line-height:22px;font-weight:500}
.native-radio small{display:block;font-size:14px;line-height:21px;color:var(--app-muted);margin-top:1px}
.native-budget-options{padding:9px 16px 12px;background:var(--app-selected);margin-top:-15px;border-radius:0 0 20px 20px;position:relative}
.native-budget-options p{font-size:14px;line-height:21px;color:var(--app-muted);margin-top:10px}
.native-save-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.native-save-bar>span{font-size:14px;line-height:21px;color:var(--app-muted)}
.native-save-actions{display:flex;gap:10px;align-items:center}
.native-save-actions .native-primary{width:auto;min-height:40px;padding:9px 16px}
.native-save-actions .native-inline-action{font-size:12px;max-width:90px;line-height:16px;text-align:center}
.native-bottom-action>.native-save-actions>*{flex:1;max-width:none;min-height:48px;font-size:14px;line-height:21px}
.native-focus-time{font-size:52px;line-height:64px;font-weight:600;font-variant-numeric:tabular-nums;margin:24px 0;text-align:center}
.native-focus-state{text-align:center;font-size:14px;line-height:21px;color:var(--app-muted)}
.native-focus-controls{display:flex;justify-content:center;gap:10px;margin:20px 0}
.native-focus-controls .native-primary{width:auto;min-width:110px}
.native-work-summary{font-size:16px;line-height:24px;margin-top:16px}
.native-app-list{margin-top:14px;border-radius:20px;background:var(--app-card);padding:8px 16px}
.native-app-list .native-row-button{padding-block:12px;border-bottom:1px solid var(--app-line)}
.native-app-list .native-row-button:last-child{border-bottom:0}
.native-row-copy{flex:1;min-width:0}
.native-row-copy small{display:block;font-size:14px;line-height:21px;color:var(--app-muted);font-weight:400}
.native-chevron{font-size:24px;color:var(--app-muted);line-height:1}
.native-activity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:12px}
.native-activity-tile{min-height:84px;padding:12px;background:var(--app-card);color:var(--app-ink);text-align:left;border:0;border-radius:20px}
.native-activity-tile strong{display:block;font-size:16px;line-height:22px;font-weight:500}
.native-activity-tile span{display:block;font-size:12px;line-height:16px;color:var(--app-muted);margin-top:5px}
.native-counter-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.native-counter-grid strong{font-size:28px;line-height:36px;font-weight:600;display:block}
.native-counter-grid span{font-size:14px;line-height:21px;color:var(--app-muted)}
.native-quote p{font-size:19px;line-height:26px;color:var(--app-ink);margin-bottom:12px}
.native-quote cite{font-size:14px;line-height:21px;color:var(--app-muted);font-style:normal}
.native-content-card h3{font-size:19px;line-height:26px;font-weight:600;margin:0 0 12px}
.native-content-card .native-source{font-size:12px;line-height:18px;margin-top:14px}
.native-content-card a{color:var(--app-primary);text-decoration:underline;text-underline-offset:3px}
.native-content-actions{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.native-select{width:100%;font-size:14px;line-height:21px;padding:10px 12px;min-height:44px;border:1px solid var(--app-outline);border-radius:12px;color:var(--app-ink);background:var(--app-surface);margin-bottom:10px}
.native-details{margin-top:16px}
.native-details summary{cursor:pointer;font-size:14px;line-height:21px;color:var(--app-primary);padding-block:8px}
.native-details p{font-size:14px;line-height:21px;color:var(--app-muted);padding-block:8px}
.native-chart{display:flex;gap:12px;align-items:end;height:85px;margin-top:18px;padding-bottom:8px;border-bottom:1px solid var(--app-line)}
.native-chart span{flex:1;text-align:center;font-size:12px;line-height:16px;color:var(--app-muted)}
.native-chart i{display:block;height:2px;margin-bottom:10px;background:var(--app-primary);border-radius:3px}
.native-switch-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 0;border-bottom:1px solid var(--app-line)}
.native-switch-row>span{flex:1;font-size:16px;line-height:22px}
.native-switch-row small{display:block;font-size:14px;line-height:21px;color:var(--app-muted);margin-top:4px}
.native-switch-row input{appearance:none;flex:0 0 42px;width:42px;height:26px;border-radius:100px;border:1px solid var(--app-outline);background:var(--app-card);position:relative;cursor:pointer}
.native-switch-row input:before{content:'';position:absolute;width:16px;height:16px;top:4px;left:4px;border-radius:50%;background:var(--app-muted);transition:transform .15s}
.native-switch-row input:checked{background:var(--app-primary);border-color:var(--app-primary)}
.native-switch-row input:checked:before{transform:translateX(16px);background:var(--app-surface)}
.native-sequence{margin-top:16px;text-align:center}
.native-sequence-status{font-size:22px;line-height:30px;color:var(--app-muted);margin-bottom:8px}
.native-sequence-grid{display:grid;grid-template-columns:repeat(3,88px);gap:8px;justify-content:center}
.native-sequence-tile{width:88px;height:88px;padding:0;border:0;border-radius:18px;background:var(--app-card);touch-action:manipulation}
.native-app .native-sequence-tile:disabled{opacity:1}
.native-sequence-tile[data-lit="true"]{background:var(--app-primary)}
.native-sequence-tile[data-tapped="true"]{background:var(--app-primary);box-shadow:inset 0 0 0 3px var(--app-base),0 0 0 2px var(--app-primary)}
.native-sequence-tile[data-tapped="true"][data-tap-error="true"]{background:var(--app-error,#A93D32);box-shadow:inset 0 0 0 3px var(--app-base),0 0 0 2px var(--app-error,#A93D32)}
.native-sequence-tile:not(:disabled):active{transform:scale(.94)}
.native-sequence-tile:focus-visible{outline:3px solid var(--app-primary);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.native-sequence-tile:not(:disabled):active{transform:none}}
.native-sequence-progress{font-size:14px;line-height:21px;color:var(--app-muted);margin-top:16px}
.native-game-result{font-size:16px;line-height:24px;text-align:center;margin-top:20px}
.native-dialog{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:336px;max-height:calc(100% - 60px);padding:22px 20px;border:1px solid var(--app-line);border-radius:28px;background:var(--app-surface);color:var(--app-ink);font-size:16px;line-height:24px;box-shadow:0 15px 45px #1b211c30;overscroll-behavior:contain}
.native-dialog::backdrop{background:#1b211c55}
.native-dialog h2{font-size:22px;line-height:30px;font-weight:600;font-family:inherit;letter-spacing:0;color:var(--app-ink);margin-bottom:14px}
.native-dialog .native-inline-action{float:right}
.native-dialog .native-app-list{margin-bottom:12px}
.native-preview-caption{font-size:12px;line-height:18px;color:var(--sl-muted);text-align:center;margin-top:14px}
@media(max-width:850px){.native-demo-section{gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.native-demo-copy h1{font-size:42px}.native-demo-copy>p:not(.eyebrow){font-size:16px}}
@media(max-width:650px){.native-demo-section{grid-template-columns:minmax(0,1fr);padding-block:20px 28px;gap:22px}.native-demo-copy{max-width:100%;padding-top:0}.native-demo-copy h1{font-size:36px;margin-block:12px}.native-demo-copy h1 br{display:none}.native-demo-copy>p:not(.eyebrow){max-width:100%;font-size:14px}.native-demo-shortcuts{flex-direction:row;flex-wrap:wrap;gap:7px;margin-block:14px}.native-demo-shortcuts button{font-size:14px;padding-inline:13px}.native-demo-copy>p.native-demo-note{border-top:0;padding-top:0;font-size:12px;margin-bottom:10px}.native-screen-reference{display:none}.native-demo-copy .text-link{display:none}.native-demo-visual{max-width:372px}.native-app{height:820px}.native-activity-grid{gap:12px}}
@media(max-width:380px){.native-screen{padding-inline:16px}.native-bottom-action{padding-inline:16px}.native-chip-row{gap:6px}.native-chip{padding-inline:10px}.native-navigation button span{width:50px}}
@media(prefers-reduced-motion:reduce){.native-app *{animation:none!important;transition:none!important}}

/* Render the native dp layout at a consistent scale inside the device frame. */
.native-app{--native-scale:.874;display:block;height:calc(924px * var(--native-scale) + 12px)}
.native-app-viewport{position:absolute;inset:0 auto auto 0;display:flex;flex-direction:column;width:412px;height:924px;transform:scale(var(--native-scale));transform-origin:0 0;overflow:hidden}
.native-status{flex-basis:50px}
.native-system-navigation{flex-basis:48px}
.native-navigation{flex-basis:80px;padding-top:12px}
.native-navigation button{font-size:14px;line-height:18px;min-height:60px}
.native-navigation button span{width:64px;height:32px;margin-bottom:5px}
.native-screen{padding:24px 24px 28px}
.native-mark{margin-bottom:0}
.native-mark.native-glyph{display:block;width:20px;height:20px;margin:0 auto 8px;color:var(--app-primary);opacity:.55}
.native-subtitle{font-size:16px;line-height:24px}
.native-card,.native-radio,.native-message,.native-app-list,.native-activity-tile{border-radius:18px}
.native-custom{height:56px}
.native-bottom-action{padding:16px 24px}
.native-dialog{position:fixed;inset:auto;max-width:388px;width:388px;max-height:780px;transform:translate(-50%,-50%) scale(var(--native-scale));transform-origin:center}
.native-app[data-app-theme="dark"]{--app-base:#141813;--app-surface:#1D231C;--app-card:#252D24;--app-selected:#2E362C;--app-line:#2E362C;--app-ink:#EDEAE1;--app-muted:#9CA396;--app-primary:#A8C3A5;--app-outline:#9CA396}
.native-app[data-app-theme="dark"] .native-primary,.native-app[data-app-theme="dark"] .native-chip[aria-pressed="true"]{color:#141813}
.native-quote p{font-style:italic}
.native-catalog-tabs{display:flex;gap:6px;overflow:auto;scrollbar-width:thin;margin-block:16px}
.native-catalog-tabs .native-chip{font-size:14px;padding-inline:12px}
.native-level{font-size:14px;line-height:21px;color:var(--app-muted);margin-top:2px}
.native-game-result-detail{font-size:14px;line-height:21px;color:var(--app-muted);text-align:center;margin-top:12px}
.native-exercise-help{margin-top:48px;text-align:center;font-size:16px;line-height:24px}
.native-fact-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.native-fact-categories .native-row-button{background:var(--app-card);border-radius:18px;padding:16px;min-height:84px}
.native-activity-list .native-row-button{align-items:start}
.native-own-note{height:96px;resize:vertical}
.native-own-minutes{display:block;font-size:14px;color:var(--app-muted);margin-block:20px}
.native-own-minutes .native-custom{margin-top:6px}
.native-own-row{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--app-line);font-size:16px}
.native-quote .native-inline-action{display:block}
.native-quote .native-extra{font-style:normal;font-size:14px;line-height:21px}
.native-work-controls-list{display:flex;justify-content:space-between;gap:16px;margin-top:10px}
.native-flow-gap{margin-top:20px}
@media(max-width:650px){.native-app{height:calc(924px * var(--native-scale) + 12px)}}

/* Current six-tab layout, retaining the existing app palette and phone geometry. */
.native-navigation button{font-size:12px;line-height:16px;overflow-wrap:anywhere}
.native-navigation button span{width:52px;max-width:100%}
.native-block-row{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--app-line)}
.native-block-row>.native-row-button{flex:1;min-width:0}
.native-block-status{display:flex;flex-direction:column;align-items:center;flex:0 0 58px;font-size:12px;font-weight:600}
.native-block-status svg{width:20px;height:20px}
.native-block-status[data-state=open]{color:#26743c}
.native-block-status[data-state=limited]{color:#9d540c}
.native-block-status[data-state=closed]{color:#b43730}
.native-line-chart{width:100%;height:145px;margin-top:18px;color:var(--app-primary)}
.native-line-chart text{font-size:10px;fill:currentColor}
.native-week-chart{overflow:hidden}
.native-week-chart>div{min-width:0;flex:1}
.native-week-chart .native-week-value{font-size:10px}