/* Full chapters share the continuous day stage; no module-card appendix. */
.story-controls{max-width:100%;margin-top:26px}.story-feature-copy{display:grid;gap:18px;margin-top:28px}.story-feature-copy p{font-size:16px;line-height:1.85;color:var(--muted)}.story-input{display:grid;gap:10px;margin:20px 0;font-size:15px;color:var(--muted)}.story-input input,.story-input textarea{width:100%;min-width:0;border:0;border-bottom:1px solid var(--control-border);border-radius:0;padding:14px 0;background:transparent;color:var(--ink);font:inherit}.story-input textarea{resize:vertical;min-height:90px;max-height:180px}.story-options{display:grid}.story-options button{display:flex;align-items:center;gap:18px;min-height:62px;padding:18px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;font:inherit}.story-options button>span:first-child{color:var(--muted);font-size:12px}.story-options button>.icon,.story-options button>span:last-child{margin-left:auto}.story-options button[aria-pressed=true]{color:var(--accent);border-bottom-color:var(--accent)}.weekly-steps{display:grid;gap:16px;margin:25px 0}.weekly-steps label{display:flex;gap:15px;align-items:center;min-height:44px;font-size:16px}.weekly-steps input{width:20px;height:20px;accent-color:var(--accent)}.routine-tabs,.reading-modes,#gece>.segments{margin-top:26px}.water-period{margin-top:25px}
.capture-sheets{position:absolute;inset:14% 3% auto 8%;display:grid;gap:14px;max-height:75%;overflow:auto;padding:8px 16px 28px}.capture-sheets>.eyebrow{color:var(--ink);margin:0 0 8px}.capture-sheets>div{background:var(--surface);padding:24px 25px;box-shadow:0 14px 30px color-mix(in srgb,var(--ink) 8%,transparent);transform:rotate(-2deg);display:flex;gap:16px;align-items:start}.capture-sheets>div:nth-child(odd){transform:rotate(2deg)}.capture-sheets>div>span{font-size:12px;color:var(--muted)}.capture-sheets p{font:italic 24px/1.5 Georgia,serif;overflow-wrap:anywhere}.scene-not .landscape{opacity:.45}
.scene-belge .document-landscape{opacity:.35}.document-stack{position:absolute;inset:12% 8% 13% 13%}.document-back{position:absolute;inset:5% -5% -2% 5%;background:var(--ambient);transform:rotate(7deg);border:1px solid var(--line)}.document-sheet{position:relative;background:var(--surface);color:var(--ink);padding:35px 34px;border:1px solid var(--line);box-shadow:0 25px 50px color-mix(in srgb,var(--ink) 9%,transparent);transform:rotate(-3deg);min-height:100%;transition:transform .35s}.document-sheet[data-format=photo]{transform:rotate(2deg);border:12px solid var(--surface);padding:23px 22px;background:var(--surface-alt)}.document-meta{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;color:var(--muted);margin-bottom:25px}.document-sheet>.icon{width:32px;height:32px;color:var(--accent)}.document-sheet h3{font:italic 37px/1.15 Georgia,serif;margin:18px 0 10px}.document-sheet>p{font-size:16px;color:var(--muted)}.document-lines{display:grid;gap:9px;margin:28px 0}.document-lines i{height:1px;background:var(--line)}.document-lines i:last-child{width:60%}.document-expiry{display:flex;justify-content:space-between;gap:16px;font-size:13px}.document-expiry strong{font-size:17px;font-variant-numeric:tabular-nums}.document-sheet .document-reminder{margin-top:22px;font-size:15px;color:var(--accent)}.document-sheet>small{display:block;color:var(--muted);font-size:12px;margin-top:18px}
.scene-arac .landscape{inset:8% -15% 4%;opacity:.7}.vehicle-mileage{position:absolute;top:12%;left:3%;display:grid;gap:12px}.vehicle-mileage>span{font-size:15px;color:var(--muted)}.vehicle-mileage>strong{font-size:clamp(45px,5.5vw,76px);font-weight:400;letter-spacing:-.06em;line-height:1.1}.vehicle-mileage small{font-size:20px;letter-spacing:0;margin-left:12px}.vehicle-receipt{position:absolute;top:42%;left:18%;right:0;padding:32px;background:var(--surface);transform:rotate(-3deg);box-shadow:0 20px 40px color-mix(in srgb,var(--ink) 8%,transparent)}.vehicle-receipt h3{font:italic 34px Georgia,serif;margin:17px 0 10px}.vehicle-receipt>p{font-size:14px;color:var(--muted)}.vehicle-receipt>strong{display:block;font-size:40px;letter-spacing:-.04em;margin:22px 0}.expense-thread{display:flex;align-items:center;gap:12px;border-top:1px dashed var(--control-border);padding-top:22px;color:var(--accent);font-size:15px}.expense-thread>i{width:7px;height:7px;background:var(--olive);border-radius:50%}
.scene-yon .landscape{opacity:.35}.direction-path{position:absolute;inset:12% 0 auto 8%;padding:20px 20px 30px}.direction-path h3{font:italic 37px/1.25 Georgia,serif;margin:22px 0 32px}.direction-path>div{display:grid;grid-template-columns:42px 1fr;column-gap:18px;position:relative;padding:0 0 32px}.direction-path>div:before{content:'';position:absolute;left:20px;top:42px;bottom:0;border-left:1px solid var(--control-border)}.direction-path>div:last-of-type:before{display:none}.direction-path i{width:42px;height:42px;border:1px solid var(--control-border);border-radius:50%;display:grid;place-items:center;font-size:14px;font-style:normal;background:var(--paper)}.direction-path>div[data-complete=true] i{background:var(--button);color:var(--on-button);border-color:var(--button)}.direction-path>div>span{font-size:21px;line-height:1.5;align-self:center}.direction-path small{grid-column:2;color:var(--muted);font-size:13px}.direction-path>p{font-size:15px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}
.scene-ilac .landscape{opacity:.38}
.zen-leaf{position:absolute;inset:10% 6% 10% 8%;display:flex;flex-direction:column;justify-content:center;padding:40px 30px;text-align:center}.zen-leaf h3{font:italic 48px/1.2 Georgia,serif;color:var(--accent);margin:28px 0}.zen-leaf blockquote{font:23px/1.8 Georgia,serif;margin:0}.zen-stem{font:90px Georgia,serif;color:var(--accent);margin-top:30px}.scene-kitap:has(.zen-leaf) .landscape{opacity:.28}
.sleep-orbit{position:absolute;top:12%;left:2%;right:2%;aspect-ratio:1}.sleep-orbit>svg{width:100%;height:100%;fill:none;stroke:var(--line);stroke-width:1}.sleep-orbit path{stroke:var(--accent);stroke-width:2;stroke-linecap:round}.sleep-orbit>div{position:absolute;inset:24% 12%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sleep-orbit span{font:italic 25px Georgia,serif}.sleep-orbit strong{font-size:clamp(60px,6vw,88px);font-weight:400;letter-spacing:-.06em;line-height:1.4;font-variant-numeric:tabular-nums}.sleep-orbit p{font-size:14px;color:var(--muted)}.sleep-record{position:absolute;bottom:8%;left:20%;right:4%;display:grid;gap:8px;padding:23px 28px;background:var(--surface);transform:rotate(-3deg);border:1px solid var(--line)}.sleep-record>span,.sleep-record>small{font-size:13px;color:var(--muted)}.sleep-record>strong{font-size:30px;font-weight:400}.scene-gece:has(.sleep-orbit) .landscape{opacity:.48}
@media(max-width:860px),(max-height:680px){.chapter:has(.story-controls)>.inline-world,.chapter:has(.zen-leaf)>.inline-world{height:580px;aspect-ratio:auto}.chapter:has(.story-controls)>.segments{order:1}.chapter:has(.story-controls)>.demo-panel{order:4}.chapter:has(.story-controls)>.inline-world,.chapter:has(.zen-leaf)>.inline-world{order:2}.chapter:has(.story-controls)>.controls{order:3}.chapter:has(.story-controls)>.next-stop{order:5}.document-stack{inset:10% 8% 10%}.document-sheet{padding:30px}.vehicle-receipt{left:10%;right:5%;top:40%}.direction-path{inset:10% 0 auto}.sleep-orbit{left:6%;right:6%;top:4%}.sleep-record{bottom:8%;left:14%;right:8%}.capture-sheets{inset:10% 2% auto;max-height:85%}}
@media(max-width:520px){.chapter:has(.story-controls)>.inline-world,.chapter:has(.zen-leaf)>.inline-world{height:520px}.document-sheet h3{font-size:31px}.document-sheet{padding:25px 22px}.document-stack{inset:8% 5% 12%}.document-expiry{flex-direction:column;gap:5px}.document-lines{margin:22px 0}.document-meta{margin-bottom:18px}.capture-sheets p{font-size:21px}.capture-sheets>div{padding:22px 18px}.vehicle-mileage{left:5%;top:9%}.vehicle-receipt{left:5%;right:5%;padding:27px;top:34%}.vehicle-receipt h3{font-size:29px}.vehicle-receipt>strong{font-size:34px}.direction-path{padding-inline:15px}.direction-path h3{font-size:31px;margin-bottom:28px}.direction-path>div>span{font-size:18px}.zen-leaf{inset:4% 0;padding:28px 22px}.zen-leaf h3{font-size:37px}.zen-leaf blockquote{font-size:21px}.zen-stem{font-size:70px}.sleep-orbit{top:8%;left:0;right:0}.sleep-orbit strong{font-size:65px}.sleep-orbit span{font-size:21px}.sleep-record{left:10%;right:4%;bottom:12%;padding:20px}}
@media(prefers-reduced-motion:reduce){.document-sheet{transition:none}}
@media(max-width:520px){.chapter:has(.document-stack)>.inline-world,.chapter:has(.direction-path)>.inline-world{height:580px}}

/* Native inputs retain their labels and keyboard behaviour; only their skin changes. */
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;position:relative;display:inline-grid;
  place-content:center;flex:0 0 24px;width:24px;height:24px;margin:0;
  border:1.5px solid var(--control-border);border-radius:7px;
  background:var(--surface);color:var(--on-button);cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease;
}
input[type="checkbox"]:checked{background:var(--button);border-color:var(--button)}
input[type="checkbox"]::after{
  content:"";width:6px;height:10px;border:solid currentColor;border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg) scale(0);transform-origin:center;
  transition:transform .15s ease;
}
input[type="checkbox"]:checked::after{transform:translateY(-1px) rotate(45deg) scale(1)}
input[type="checkbox"]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}
.weekly-steps{gap:6px}
.weekly-steps label{min-height:52px;padding:10px 12px;margin-inline:-12px;border-radius:12px;cursor:pointer;transition:background-color .18s ease;line-height:1.5}
.weekly-steps input{width:24px;height:24px;flex-basis:24px}
.live-switch{min-height:52px;padding-block:8px;gap:14px;cursor:pointer;line-height:1.5}
.live-switch input[type="checkbox"]{
  display:block;flex:0 0 46px;width:46px;height:28px;border:1px solid var(--control-border);
  border-radius:20px;background:var(--surface-alt);
}
.live-switch input[type="checkbox"]::after{
  position:absolute;left:3px;top:3px;width:20px;height:20px;border:0;border-radius:50%;
  background:var(--muted);transform:none;box-shadow:0 1px 3px #00000012;
  transition:transform .18s ease,background-color .18s ease;
}
.live-switch input[type="checkbox"]:checked{background:var(--button);border-color:var(--button)}
.live-switch input[type="checkbox"]:checked::after{background:var(--on-button);transform:translateX(18px)}
@media(hover:hover){.weekly-steps label:hover{background:var(--surface)}.live-switch:hover input:not(:disabled){border-color:var(--accent)}}
@media(prefers-reduced-motion:reduce){input[type="checkbox"],input[type="checkbox"]::after,.weekly-steps label{transition:none!important}}
@media(forced-colors:active){input[type="checkbox"],.live-switch input[type="checkbox"]{appearance:auto;-webkit-appearance:auto;width:24px;height:24px;flex-basis:24px}input[type="checkbox"]::after{display:none}}
/* Compact selectors keep their own width inside the chapter flex layout. */
/* 2026-10-11: evcil dost (08:15) ve yolculuk (15:30) duraklari; antrenman arka plani; Puroute Pro fiyati. */
.scene-dost .pet-landscape,.scene-yolculuk .trip-landscape{opacity:.55}.scene-spor .movement-landscape{opacity:.28}
.pet-card,.trip-card{position:absolute;inset:auto 7% 9% 14%;padding:30px 28px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 22px 44px color-mix(in srgb,var(--ink) 9%,transparent);transform:rotate(-2deg);animation:entry-appear .4s var(--ease)}
.trip-card{inset:10% 9% auto 12%;transform:rotate(2deg)}
.pet-card>.eyebrow,.trip-card>.eyebrow{font-size:12px;letter-spacing:.1em;color:var(--muted)}
.pet-card h3,.trip-card h3{font:italic 36px/1.15 Georgia,serif;color:var(--accent);margin:14px 0 16px}
.pet-card ul,.trip-card ul{list-style:none;padding:0;margin:0}
.pet-card li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.pet-card li>span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:44px}
.pet-card li>strong{font-weight:400}.pet-card li .icon{margin-left:auto;width:18px;height:18px;color:var(--accent)}
.pet-card li[data-done=true]>strong{color:var(--muted);text-decoration:line-through}
.pet-next{margin-top:18px;font-size:15px;color:var(--accent)}
.trip-countdown{font-size:15px;color:var(--muted);margin:-6px 0 18px}
.trip-card li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.trip-card li>i{width:16px;height:16px;border:1px solid var(--control-border);border-radius:4px;flex:none}
.trip-card li[data-done=true]>i{background:var(--accent);border-color:var(--accent)}
.trip-card li[data-done=true]{color:var(--muted);text-decoration:line-through}
.trip-leave{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;color:var(--accent)}.trip-leave .icon{width:18px;height:18px}
@media(max-width:860px),(max-height:680px){.inline-world:has(.scene-dost),.inline-world:has(.scene-yolculuk){height:560px;aspect-ratio:auto}.pet-card,.trip-card{inset:auto 5% 6% 5%}.trip-card{inset:6% 5% auto 5%}}
.pricing-life{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);padding-block:clamp(60px,9vw,120px);border-top:1px solid var(--line)}
.pricing-life h2{font-size:clamp(36px,5vw,64px);line-height:1.08;font-weight:400;letter-spacing:-.03em;margin:16px 0 22px}.pricing-life h2 em{font-family:Georgia,serif;color:var(--accent)}
.pricing-life>div>p{font-size:17px;line-height:1.8;color:var(--muted);max-width:52ch}
.pricing-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start}
.pricing-plans>div{padding:26px 24px;background:var(--surface);border:1px solid var(--line)}
.pricing-plans>div:first-child{border-color:var(--accent)}
.pricing-plans h3{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.pricing-amount{font-size:clamp(34px,4vw,48px);letter-spacing:-.04em;color:var(--ink);margin:12px 0 8px}.pricing-amount small{font-size:16px;letter-spacing:0;color:var(--muted)}
.pricing-plans>div>p:last-child{font-size:14px;color:var(--muted)}
.pricing-plans>.fine-print{grid-column:1/-1}
@media(max-width:760px){.pricing-life{grid-template-columns:1fr}.pricing-plans{grid-template-columns:1fr}}
/* 2026-10-11: ozellik demolari (feature-demos.tsx). Ornek veri; once oynar, sonucu tutar. */
.demo-panel{margin-top:36px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:18px;min-width:0}
.demo-panel>.eyebrow{margin:0}
.demo-tabs{display:flex;flex-wrap:wrap;gap:6px}
.demo-tabs>button{flex:1 1 auto;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:22px;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.demo-tabs>button[aria-pressed=true]{background:var(--button);border-color:var(--button);color:var(--on-button)}
.demo-tabs-small>button{flex:0 1 auto;font-size:13px;padding:8px 12px;min-height:40px}
.demo{display:grid;gap:14px;min-width:0;animation:entry-appear .32s var(--ease)}
.demo-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 7%,transparent);min-width:0}
.demo-chart{width:100%;height:auto;display:block;overflow:visible}
.demo-grid line{stroke:var(--line);stroke-width:1}
.demo-grid text,.demo-threshold text,.demo-peak text,.demo-marker text{font-size:11px;fill:var(--muted);font-family:Archivo,Arial,sans-serif;font-variant-numeric:tabular-nums}
.demo-threshold line{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:5 5}
.demo-trace{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.demo-peak circle{fill:var(--accent)}.demo-peak text{fill:var(--ink);font-weight:600}
.demo-hold{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.demo-marker line{stroke:var(--accent);stroke-width:1.4}
.demo-marker text{fill:var(--accent);font-weight:600}
.demo-marker-confirm line{stroke-dasharray:3 4}
.demo-dot{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.demo-result{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:14px}
.demo-result>span{display:inline-flex;align-items:center;gap:6px}
.demo-result .icon{width:16px;height:16px;color:var(--accent);flex:none}
.demo-result-lock,.demo-result-rest{opacity:0;transform:translateY(4px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.demo-result[data-done=true] .demo-result-lock,.demo-result[data-done=true] .demo-result-rest{opacity:1;transform:none}
.demo-result-rest{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600}
.demo-caption{display:grid;gap:4px;min-height:52px;margin:0}
.demo-caption>strong{font-size:17px;font-weight:600;color:var(--ink)}
.demo-caption>span{font-size:14px;color:var(--muted);line-height:1.5}
.demo-controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.demo-button{min-height:44px;padding:10px 18px;border-radius:22px;border:1px solid var(--button);background:var(--button);color:var(--on-button);font:inherit;font-size:14px;cursor:pointer}
.demo-button-quiet{background:transparent;color:var(--ink);border-color:var(--control-border)}
.demo-button:disabled{opacity:.45;cursor:default}
.demo-scrub{flex:1 1 180px;display:grid;gap:6px;font-size:12px;color:var(--muted)}
.demo-scrub input{width:100%;accent-color:var(--accent);min-height:28px}
.demo-note{font-size:12px;color:var(--muted)}
.demo-link{min-height:44px;background:none;border:0;text-decoration:underline;font:inherit;font-size:14px;cursor:pointer}
.demo button:focus-visible,.demo-tabs button:focus-visible,.demo input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.demo-phone{position:relative;margin-inline:auto;width:min(100%,320px);min-height:360px;padding:22px 14px 18px;border-radius:38px;background:linear-gradient(160deg,#5d6f58,#2f3b2d);box-shadow:inset 0 0 0 6px #1b211a,0 24px 48px color-mix(in srgb,var(--ink) 18%,transparent);display:flex;flex-direction:column;gap:14px}
.demo-phone-time{display:flex;flex-direction:column;align-items:center;gap:2px;color:#f4f1e6}
.demo-phone-time .icon{width:16px;height:16px}
.demo-phone-time strong{font-size:52px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.la-card{border-radius:22px;padding:14px;background:color-mix(in srgb,#fbfaf5 88%,transparent);color:#2b302b;display:grid;gap:10px;animation:entry-appear .24s var(--ease);min-width:0}
.la-head{display:flex;align-items:center;gap:8px;font-size:13px;color:#62695f;min-width:0}
.la-badge{width:22px;height:22px;border-radius:6px;background:#455942;color:#fbfaf5;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.la-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px}
.la-row b{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.la-primary{min-height:44px;padding:0 16px;border-radius:22px;border:0;background:#455942;color:#fbfaf5;font:inherit;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.la-primary .icon{width:16px;height:16px}
.la-stepper{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(64px,auto) 44px;align-items:center;gap:6px;font-size:14px}
.la-stepper button{width:44px;height:44px;border-radius:50%;border:1px solid #c9cdbf;background:#fff;color:#2b302b;font-size:22px;line-height:1;cursor:pointer}
.la-stepper output{text-align:center;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.la-saved{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600}
.la-saved .icon{width:22px;height:22px;color:#455942}
.demo-island{margin-inline:auto;display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 14px;border-radius:22px;background:#000;color:#f4f1e6;font-size:14px}
.demo-island b{font-variant-numeric:tabular-nums;color:#b6caaa}
.demo-island[data-expanded=true]{display:block;width:100%;padding:6px;border-radius:30px}
.la-island{background:#111;color:#f4f1e6}
.la-island .la-head{color:#a5b19f}
.la-island .la-stepper button{background:#222;color:#f4f1e6;border-color:#3d493e}
.la-island .la-saved .icon{color:#b6caaa}
.la-island .la-primary{background:#b6caaa;color:#1a241a}
.demo-phone[data-view=island] .demo-link{color:#e6ecdc;align-self:center}
.demo-watch-row{display:flex;flex-wrap:wrap;gap:30px 22px;align-items:center;justify-content:center;padding-block:22px}
.demo-watch-body{width:190px;height:226px;border-radius:52px;padding:14px;background:linear-gradient(160deg,#4b5547,#1f251e);box-shadow:inset 0 0 0 5px #151a14,0 20px 40px color-mix(in srgb,var(--ink) 18%,transparent);position:relative;isolation:isolate;flex:none}
.demo-watch-body::before,.demo-watch-body::after{content:'';position:absolute;left:40px;right:40px;height:26px;background:#5e6b58;border-radius:10px;z-index:-1}
.demo-watch-body::before{top:-20px}.demo-watch-body::after{bottom:-20px}
.demo-watch-screen{height:100%;border-radius:40px;background:#000;color:#f4f1e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:12px;animation:entry-appear .24s var(--ease)}
.demo-watch-screen small{font-size:11px;color:#a5b19f;letter-spacing:.06em}
.demo-watch-screen strong{font-size:20px;font-weight:600}
.demo-watch-screen span{font-size:12px;color:#a5b19f}
.demo-watch-screen button{margin-top:8px;min-height:44px;padding:0 18px;border-radius:22px;border:0;background:#b6caaa;color:#1a241a;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.demo-ring{position:relative;width:118px;height:118px;display:grid;place-items:center}
.demo-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.demo-ring circle{fill:none;stroke:#2c352a;stroke-width:8}
.demo-ring .demo-ring-value{stroke:#b6caaa;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.demo-ring strong{font-size:26px;font-variant-numeric:tabular-nums}
.demo-ring span{position:absolute;bottom:20px}
.demo-receipt{flex:1 1 180px;max-width:260px;display:grid;gap:6px;padding:14px 16px;border-radius:14px;border:1px dashed var(--control-border);color:var(--muted);font-size:14px;transition:border-color .3s,background .3s}
.demo-receipt[data-synced=true]{border-style:solid;border-color:var(--accent);background:var(--surface);color:var(--ink)}
.demo-receipt strong{display:flex;align-items:center;gap:6px;font-weight:600}
.demo-receipt .icon{width:16px;height:16px;color:var(--accent);flex:none}
.demo-receipt-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.demo-report-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}
.demo-card-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.demo-settings dl{display:grid;gap:10px;margin:0}
.demo-settings dl>div{display:grid;gap:2px}
.demo-settings dt{font-size:12px;color:var(--muted)}
.demo-settings dd{margin:0;font-size:16px;font-weight:600}
.demo-month ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.demo-month-head{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.demo-month-head b{color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-bars{display:grid;gap:3px;margin:5px 0 3px}
.demo-bars i{display:block;height:6px;border-radius:3px;background:var(--line);transition:width .45s var(--ease)}
.demo-bars i+i{background:var(--accent)}
.demo-report-grid[data-shown=false] .demo-bars i{width:0!important}
.demo-month small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.la-departure{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 8%,transparent);max-width:440px}
.la-departure .la-head{color:var(--muted)}
.la-countdown b{font-size:34px;color:var(--accent)}
.la-actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.la-actions>button:first-child{min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--control-border);background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.la-maps{display:flex;flex-wrap:wrap;gap:6px;animation:entry-appear .2s var(--ease)}
.la-maps>button{flex:1 1 90px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.la-maps>button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.la-departure[data-stopped=true]{opacity:.75}
.backup-life{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(56px,8vw,100px);border-top:1px solid var(--line);scroll-margin-top:100px}
.backup-copy h2{font-size:clamp(34px,4.6vw,60px);line-height:1.08;letter-spacing:-.04em;font-weight:400;margin:16px 0 18px}
.backup-copy h2 em{font-family:Georgia,serif;color:var(--accent)}
.backup-copy>p{font-size:17px;line-height:1.75;color:var(--muted);margin:0}
.demo-flow{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);align-items:stretch;gap:6px}
.demo-node{display:grid;align-content:start;justify-items:center;gap:8px;padding:14px 8px;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-align:center;font-size:13px;min-height:150px;min-width:0;transition:border-color .3s,box-shadow .3s}
.demo-node[data-active=true]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.demo-step{width:22px;height:22px;border-radius:50%;background:var(--button);color:var(--on-button);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.demo-node strong{font-weight:600;overflow-wrap:anywhere}
.demo-node-body{display:grid;justify-items:center;gap:6px}
.demo-node small{font-size:12px;color:var(--muted)}
.demo-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;animation:entry-appear .3s var(--ease)}
.demo-chips span{font-size:11px;padding:3px 7px;border-radius:10px;background:var(--ambient);color:var(--ink)}
.demo-packet{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:6px 10px;border-radius:10px;background:var(--ink);color:var(--paper);animation:entry-appear .3s var(--ease)}
.demo-packet .icon{width:14px;height:14px}
.demo-arrow{align-self:center;height:1px;background:var(--control-border);position:relative}
.demo-arrow::after{content:'';position:absolute;right:-1px;top:-4px;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;border-left:6px solid var(--control-border)}
.demo-keyrail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 14px;border:1px dashed var(--control-border);border-radius:12px;font-size:13px;color:var(--muted);transition:border-color .3s,color .3s}
.demo-keyrail[data-active=true]{border-style:solid;border-color:var(--accent);color:var(--ink)}
.demo-keyrail .icon{width:16px;height:16px;color:var(--accent);flex:none}
.demo-keyrail small{margin-left:auto;font-size:12px}
.demo-controls .demo-tabs{flex-basis:100%}
@media(max-width:860px){.backup-life{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){
.demo-report-grid{grid-template-columns:minmax(0,1fr)}
.demo-flow{grid-template-columns:minmax(0,1fr);gap:4px}
.demo-arrow{width:1px;height:18px;justify-self:center}
.demo-arrow::after{right:-4px;top:auto;bottom:-1px;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:6px solid var(--control-border);border-bottom:0}
.demo-node{min-height:0;grid-template-columns:auto minmax(0,1fr) auto;justify-items:start;align-items:center;text-align:left;padding:12px}
.demo-node-body{justify-items:end;justify-self:end}
.demo-phone{min-height:330px}
.demo-phone-time strong{font-size:44px}
.demo-tabs>button{font-size:13px;padding:9px 10px}
.demo-keyrail small{margin-left:0;flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.demo,.la-card,.demo-watch-screen,.demo-chips,.demo-packet,.la-maps{animation:none}.demo-bars i,.demo-ring .demo-ring-value,.demo-result-lock,.demo-result-rest{transition:none}}
/* 2026-10-11 mobil: dil seciciyi kisa kodla goster, nokta halkalari dar ekranda cakismasin, yer etiketleri basliga binmesin. */
.language-picker{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.04em}
.language-picker .icon{width:14px;height:14px}
.header-actions .language-picker select{position:absolute;inset:0;width:100%;max-width:none;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;padding:0}
.language-picker:focus-within{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:520px){.time-stops i{box-shadow:0 0 0 2px var(--paper)}.place-trail>button>span{display:none}}
@media(max-width:560px){.demo-panel>.demo-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 2026-10-11 (MacBook Air 13"): 20 durakla saat etiketleri 1800 px altinda sigmiyordu; sayac ve son duraklar kesiliyordu.
   Etiketler gizlenir (guncel saat ve durak solda yazar), noktalar esnek genislikte, sayac her zaman gorunur. */
.live-time,.rail-counter{flex:none}
@media(max-width:1800px){.time-stops{gap:0;min-width:0;align-self:stretch;align-items:center}.time-stops>a{font-size:0;min-width:0;flex:1 1 0;padding-top:0;gap:0;justify-content:center;min-height:44px}.time-stops::before{top:50%}}
/* 2026-10-11 sadelestirme: su bolumu bardak + hedef halkasi + grafik. */
:root{--water-front:#5f9598;--water-back:#a9cbc6;--water-glass:#ffffff8c}
[data-theme=dark]{--water-front:#78aeab;--water-back:#3d6a6b;--water-glass:#ffffff12}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--water-front:#78aeab;--water-back:#3d6a6b;--water-glass:#ffffff12}}
.hydration-stage{position:absolute;inset:7% 8% 6%;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,26px);text-align:center}
.water-hero{display:flex;align-items:center;justify-content:center;gap:clamp(22px,4vw,56px)}
.water-glass-svg{width:clamp(104px,11vw,150px);height:auto;overflow:visible;filter:drop-shadow(0 18px 26px color-mix(in srgb,var(--ink) 10%,transparent))}
.glass-body{fill:var(--water-glass)}
.glass-outline{fill:none;stroke:var(--control-border);stroke-width:2;stroke-linejoin:round}
.glass-shine{fill:none;stroke:#ffffff80;stroke-width:3;stroke-linecap:round}
.water-level{transition:transform .45s var(--ease)}
.water-front{fill:var(--water-front)}.water-back{fill:var(--water-back)}
.water-wave{animation:wave-settle 1.6s var(--ease) both}.water-back{animation-name:wave-settle-back}
@keyframes wave-settle{from{transform:translateX(-80px) scaleY(2.2)}to{transform:none}}
@keyframes wave-settle-back{from{transform:translateX(80px) scaleY(2.6)}to{transform:none}}
.water-drop path{fill:var(--water-front)}
.water-drop{opacity:0;animation:water-drop .45s cubic-bezier(.5,0,.9,.6) both}
@keyframes water-drop{from{transform:translateY(0);opacity:1}85%{opacity:1}to{transform:translateY(var(--drop-to));opacity:0}}
.water-ring{position:relative;width:clamp(130px,13vw,176px);aspect-ratio:1}
.water-ring svg{width:100%;height:100%;display:block}
.water-ring circle{fill:none;stroke-width:6}
.ring-track{stroke:var(--line)}
.ring-fill{stroke:var(--water-front);stroke-linecap:round;stroke-dasharray:100;transform:rotate(-90deg);transform-origin:center;transform-box:fill-box;transition:stroke-dashoffset .45s var(--ease),stroke .3s}
.hydration-stage[data-done=true] .ring-fill{stroke:var(--accent)}
.water-ring>div{position:absolute;inset:0;display:grid;place-content:center;gap:2px}
.water-ring output{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.water-ring small{font-size:13px;color:var(--muted)}
.water-goal{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--muted);min-height:22px}
.water-goal .icon{width:16px;height:16px;color:var(--accent)}
.hydration-stage[data-done=true] .water-goal{color:var(--accent);animation:goal-in .5s var(--ease)}
@keyframes goal-in{from{opacity:0;transform:translateY(6px)}}
.water-chart{width:min(100%,430px);margin:0 auto;padding:16px 18px 12px;border-radius:18px;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 14px 30px color-mix(in srgb,var(--ink) 7%,transparent)}
.water-chart>p{margin:0 0 10px;font-size:13px;color:var(--muted);text-align:left}
.hydration-stage .water-bars{position:relative;height:clamp(104px,15vh,140px);display:flex;gap:10px;align-items:stretch}
.hydration-stage .water-bars>div{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:22px}
.hydration-stage .water-bars span{width:100%;max-width:34px;min-height:4px;border-radius:7px 7px 3px 3px;background:var(--water-back);transition:height .45s var(--ease),background .3s}
.hydration-stage .water-bars [data-met=true] span{background:color-mix(in srgb,var(--water-front) 75%,var(--water-back))}
.hydration-stage .water-bars [data-today=true] span{background:var(--water-front)}
.hydration-stage .water-bars small{position:absolute;bottom:0;font-size:11px;line-height:16px;color:var(--muted)}
.hydration-stage .water-bars [data-today=true] small{color:var(--ink);font-weight:600}
.water-goal-line{position:absolute;left:0;right:0;bottom:calc(22px + (100% - 22px) * var(--goal));border-top:1.5px dashed var(--accent);opacity:.7;pointer-events:none}
.routine-paper>div[data-state] b{display:inline-block;animation:dose-mark .35s var(--ease)}
.routine-paper>div[data-state=taken] b{color:var(--accent)}
@keyframes dose-mark{from{transform:scale(.4);opacity:0}}
.capture-sheets>div{animation:note-in .4s var(--ease) both}
@keyframes note-in{from{opacity:0;translate:0 14px}}
.direction-path>p{display:flex;align-items:center;gap:14px}
.direction-meter{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.direction-meter>i{display:block;height:100%;background:var(--accent);transition:width .4s var(--ease)}
.direction-path div[data-complete=true] i{animation:dose-mark .35s var(--ease)}
.vehicle-receipt h3{animation:goal-in .35s var(--ease)}
.expense-thread>i{animation:thread-pulse 1s var(--ease)}
@keyframes thread-pulse{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--olive) 60%,transparent)}to{box-shadow:0 0 0 10px transparent}}
@media(max-width:860px),(max-height:680px){.inline-world:has(.hydration-stage){height:480px}.hydration-stage{inset:6% 5% 5%}}
@media(max-width:520px){.inline-world:has(.hydration-stage){height:410px}.water-hero{gap:22px}.water-glass-svg{width:96px}.water-ring{width:132px}}
@media(prefers-reduced-motion:reduce){.water-wave,.water-drop,.water-goal,.capture-sheets>div,.routine-paper b,.direction-path i,.vehicle-receipt h3,.expense-thread>i{animation:none!important}.water-drop{display:none}.water-level,.ring-fill,.hydration-stage .water-bars span,.direction-meter>i{transition:none}}
.sleep-orbit path{transition:d .35s var(--ease)}
.sleep-orbit .sleep-dot{fill:var(--accent);stroke:var(--paper);stroke-width:3;transition:cx .35s var(--ease),cy .35s var(--ease)}
@media(prefers-reduced-motion:reduce){.sleep-orbit path,.sleep-orbit .sleep-dot{transition:none}}
.dream-constellation .dream-thread{stroke:var(--accent);stroke-width:2.2;vector-effect:non-scaling-stroke;fill:none;stroke-dasharray:100;animation:thread-draw 1.1s var(--ease) both}
@keyframes thread-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.dream-entry{animation:note-in .35s var(--ease) both}.dream-entry+.dream-entry{animation-delay:.08s}
.shopping-list>button{animation:note-in .3s var(--ease) both}
.shopping-list strong{animation:amount-flash .6s var(--ease)}
@keyframes amount-flash{from{color:var(--accent);transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.dream-constellation .dream-thread,.dream-entry,.shopping-list>button,.shopping-list strong{animation:none!important}}
.demo-legend{display:flex;gap:18px;margin:0;font-size:13px;color:var(--muted)}
.demo-legend span{display:inline-flex;align-items:center;gap:7px}
.demo-legend i{width:14px;height:6px;border-radius:3px;background:var(--line)}
.demo-legend span+span i{background:var(--accent)}
.personal-tiles>div{animation:note-in .3s var(--ease) both}
@media(prefers-reduced-motion:reduce){.personal-tiles>div{animation:none}}
.morning-composition .paper-note{animation:note-in .4s var(--ease) both}.morning-composition .note-1{animation-delay:.06s}.morning-composition .note-2{animation-delay:.12s}
@media(prefers-reduced-motion:reduce){.morning-composition .paper-note{animation:none}}
/* Ozellik listesi: bilgi amacli, cercevesiz; 4+ madde genis alanda iki sutun (tek kalan son madde tam satir). */
.feature-list{container-type:inline-size;max-width:480px;margin-top:20px}
.feature-list ul{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:8px 24px;margin:0;padding:0;list-style:none;min-height:calc(var(--rows-narrow) * 28px - 8px);animation:list-fade .14s ease-out}
.feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px;color:color-mix(in srgb,var(--ink) 78%,var(--paper))}
.feature-list li::before{content:'';flex:none;width:10px;height:1.5px;margin-top:9.25px;background:var(--accent)}
@container (min-width:400px){.feature-list ul{min-height:calc(var(--rows-wide) * 28px - 8px)}.feature-list ul:is([data-count="4"],[data-count="5"],[data-count="6"]){grid-template-columns:repeat(2,minmax(0,1fr))}.feature-list ul[data-count="5"]>li:last-child{grid-column:1/-1}}
@keyframes list-fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.feature-list ul{animation:none}}

/*
 * Secim dugmeleri (2026-10-11 urun sahibi: "sola yigili oldugu icin guzel durmuyor, daha iyi bir alternatif
 * bul"): sutun genisliginde esit sutunlar; secili olan tek bir kayan gostergeyle (::before) isaretlenir,
 * konumu :has() ile secili dugmeden gelir. Secenekler: zemin uzerinde kayan yuzey. Bolumun gorunumunu
 * degistirenler (.view-switch): alt cizgili sekme. Metin kisalmaz/kirpilmaz, gerekirse satir atlar.
 */
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs){--seg-n:2;--seg-i:0;position:relative;isolation:isolate;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;align-self:stretch;justify-self:stretch;flex:0 0 auto;width:100%;max-width:100%;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface-alt)}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs)::before{content:'';position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--seg-n));border-radius:8px;background:var(--surface);box-shadow:0 1px 4px color-mix(in srgb,var(--ink) 12%,transparent),inset 0 0 0 1px var(--line);transform:translateX(calc(100% * var(--seg-i)));transition:transform .2s cubic-bezier(.2,.8,.2,1)}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs):has(>button:nth-child(3)){--seg-n:3}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs):has(>button:nth-child(4)){--seg-n:4}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs):has(>button:nth-child(2)[aria-pressed=true]){--seg-i:1}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs):has(>button:nth-child(3)[aria-pressed=true]){--seg-i:2}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs):has(>button:nth-child(4)[aria-pressed=true]){--seg-i:3}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs):not(:has(>button[aria-pressed=true]))::before{opacity:0}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs)>button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;width:auto;margin:0;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:15px;font-weight:500;line-height:1.3;text-align:center;white-space:normal;overflow-wrap:break-word;hyphens:auto;cursor:pointer;box-shadow:none;transition:color .2s ease}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs)>button[aria-pressed=true]{background:transparent;border-color:transparent;color:var(--ink);box-shadow:none}
:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs)>button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(hover:hover){:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs)>button:hover{color:var(--ink);background:transparent}}
:is(.chapter .segments.view-switch,.demo-panel>.demo-tabs){padding:0;border:0;border-radius:0;background:none;box-shadow:inset 0 -1px 0 var(--line)}
:is(.chapter .segments.view-switch,.demo-panel>.demo-tabs)::before{top:auto;bottom:0;left:0;height:2px;width:calc(100% / var(--seg-n));border-radius:2px;background:var(--accent);box-shadow:none}
:is(.chapter .segments.view-switch,.demo-panel>.demo-tabs)>button{min-height:48px;padding:12px 8px;border-radius:0}
.demo-controls .demo-tabs-small{flex-basis:100%}
/* Antrenman ozellik sekmeleri (4): telefonda 2x2; kayan gosterge yerine secili sekmenin kendi alt cizgisi. */
@media(max-width:560px){.demo-panel>.demo-tabs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));box-shadow:none}.demo-panel>.demo-tabs::before{display:none}.demo-panel>.demo-tabs>button{box-shadow:inset 0 -1px 0 var(--line)}.demo-panel>.demo-tabs>button[aria-pressed=true]{box-shadow:inset 0 -2px 0 var(--accent)}}
@media(max-width:520px){:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs)>button{font-size:14px;padding:10px 8px}}
@media(prefers-reduced-motion:reduce){:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs)::before,:is(.chapter .segments,.personal-preview .feature-filters,.demo-tabs-small,.demo-panel>.demo-tabs)>button{transition:none}}
/* Ikinci surum (?v=2): girdiyi site verir. Dokunus halkasi gercek kontrolun ustunde; kalici duraklat. */
.auto-touch{position:fixed;z-index:70;width:44px;height:44px;border-radius:50%;pointer-events:none;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.auto-pressed{outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:3px}
.auto-bar{position:fixed;z-index:60;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 14%,transparent);backdrop-filter:blur(10px)}
.auto-bar>button,.auto-bar>a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--button);color:var(--on-button);font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.auto-bar>a{background:transparent;color:var(--ink)}
.auto-bar .icon{width:16px;height:16px}
.auto-bar>button:focus-visible,.auto-bar>a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.auto-touch{display:none}}
@media(max-width:860px){.auto-bar{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:3px}.auto-bar>a{display:none}.auto-bar>button{width:48px;height:48px;min-height:48px;padding:0;justify-content:center}.auto-bar>button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}