:root{
  /* Blue Lotus ECO: glass over the ECO world. One system, one experience.
     The sky gradient is the fallback shown until eco-world-eb41e849.png loads. */
  --sky:linear-gradient(180deg,#65C9EF 0%,#4FBEE7 16%,#36ABD8 34%,#188D9D 58%,#0B5962 80%,#073E49 100%);
  --bg:rgba(4,30,38,.42); --card:rgba(8,44,54,.58); --raised:rgba(255,255,255,.10); --ink:#efffff; --muted:rgba(225,247,250,.70); --soft-ink:rgba(235,252,252,.86);
  --line:rgba(255,255,255,.17); --accent:#99f0d5; --accent-ink:#04313a; --accent-soft:rgba(153,240,213,.20); --accent-text:#b9f6e4;
  --dough:#f4eee2; --blush:#ff8fb5;
  --ok:#99f0d5; --ok-soft:rgba(60,180,140,.22); --bad:#ffb3c1; --bad-soft:rgba(160,40,70,.30);
  --glass-hi:rgba(255,255,255,.14); --led:#99f0d5;
  --shadow:0 24px 60px -24px rgba(0,20,28,.75);
  --radius:22px;
  font-family:"Segoe UI",Tahoma,system-ui,-apple-system,Arial,sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
/* `hidden` must win over component display rules (the empty state used to stay visible) */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{grid-template-columns:minmax(0,1fr);
  margin:0;min-height:100vh;display:grid;justify-items:center;align-content:start;color:var(--ink);
  background:#0B5962 var(--sky) fixed;
}
main{width:min(1120px,100% - 32px);padding:28px 0 40px}

header{text-align:center;margin-bottom:28px}
.brand{font-size:clamp(2.6rem,9vw,4.6rem);font-weight:900;letter-spacing:-.05em;line-height:1}
.brand span{color:var(--accent)}
.tagline{margin:.6rem 0 0;color:var(--muted);font-size:1.2rem;font-weight:600}
a.brand{color:inherit;text-decoration:none}
.brand.small{font-size:1.6rem;display:inline-block;margin-bottom:10px}
h1.storefront{margin:0;font-size:clamp(2.2rem,8vw,3.6rem);font-weight:900;letter-spacing:-.04em;line-height:1.05}
h1.storefront span[aria-hidden]{color:var(--accent)}

.cta{font-size:1.5rem;font-weight:800}
.sub{color:var(--muted)}
.sub{font-size:1.05rem}
.sub u{color:var(--ink);font-weight:700;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}

/* mascot: steamed dumpling — idle, munching (hover/drag/converting), confused (crunchy) */
.muncher{width:132px;height:132px;margin-bottom:6px;animation:bob 3.2s ease-in-out infinite;overflow:visible}
.muncher .dough{fill:var(--dough)}
.muncher .pleats{fill:none;stroke:#000;stroke-opacity:.13;stroke-width:2.6;stroke-linecap:round}
.muncher .ink{fill:#08111c}
.muncher .line{fill:none;stroke:#08111c;stroke-linecap:round}
.muncher .shine{fill:#fff}
.muncher .blush{fill:var(--blush);fill-opacity:.7}
.muncher .tongue{fill:var(--blush)}
.muncher .crumb{fill:var(--accent)}
.muncher .drip{fill:var(--accent-text)}
.muncher .shadow{fill:#000;fill-opacity:.3}
.muncher .f-idle .eye{transform-origin:center;transform-box:fill-box;animation:blink 4.5s infinite}
.muncher .f-munch,.muncher .f-confused{display:none}
#empty:hover .muncher .f-idle,.drop.hot .muncher .f-idle,.drop.munching .mini .f-idle,.drop.crunchy .mini .f-idle{display:none}
#empty:hover .muncher .f-munch,.drop.hot .muncher .f-munch,.drop.munching .mini .f-munch{display:inline}
.drop.crunchy .mini .f-confused{display:inline}
.drop.munching .mini .chew{transform-origin:60px 86px;transform-box:view-box;animation:chew .45s ease-in-out infinite}
.drop.hot .muncher{animation:none;transform:scale(1.08)}
.mini{width:60px;height:60px;margin:0;flex:none;animation:none}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes chew{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}


/* result */
#result{animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.filehead{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.fileinfo{display:grid;gap:4px;min-width:0;flex:1}
.fileinfo strong{font-size:1.3rem;overflow-wrap:anywhere}
.filetag{justify-self:start;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);background:var(--accent-soft);padding:3px 9px;border-radius:99px}
.size{color:var(--muted);font-size:.95rem}

h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:24px 0 10px}
#routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}

.route{
  display:grid;gap:4px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--bg);border:2px solid var(--line);border-radius:18px;padding:16px 18px;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.route:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 24px -14px var(--accent)}
.route:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.route:disabled{opacity:.55;cursor:progress}
.route strong{font-size:1.25rem;display:flex;align-items:center;gap:8px}
.route .arrow{color:var(--accent);font-weight:900}
.route small{color:var(--muted);font-size:.88rem;line-height:1.4}
.route .benefit{font-weight:700;font-size:.95rem}
.route.preferred{border-color:var(--accent);background:var(--raised)}

/* per-route options (SVG size, PDF resolution, page size) */
.option{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.option legend{float:left;font-weight:700;font-size:.9rem;color:var(--muted);margin-right:10px;padding:0}
.segmented{display:inline-flex;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label{padding:7px 12px;font-weight:700;font-size:.88rem;cursor:pointer;white-space:nowrap}
.segmented label+input+label{border-left:2px solid var(--line)}
.segmented input:checked+label{background:var(--accent);color:var(--accent-ink)}
.segmented input:focus-visible+label{outline:3px solid var(--accent);outline-offset:-3px}

/* Pro */
.pro-badge{display:inline-block;font-size:.66rem;font-weight:900;letter-spacing:.08em;padding:2px 7px;border-radius:99px;background:var(--accent);color:var(--accent-ink);vertical-align:middle}
.route .pro-badge{margin-left:auto}
.route[aria-pressed="true"]{border-color:var(--accent);background:var(--raised)}

/* panel under the route cards: shrink options, page board, Pro gate */
.panel{margin-top:12px;padding:18px;border-radius:18px;background:var(--bg);border:2px solid var(--accent-soft);display:grid;gap:14px}
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-head strong{font-size:1.1rem}
.panel-head .muted{margin-left:auto}
.panel p{margin:0;line-height:1.5}
.panel-options{display:grid;gap:12px}
.panel .segmented{flex-wrap:wrap}
.muted{color:var(--muted)}
a.primary{display:inline-block;text-decoration:none;justify-self:start;font-weight:800;font-size:1rem;border-radius:12px;padding:11px 18px;background:var(--accent);color:var(--accent-ink)}
a.primary:hover{filter:brightness(1.08)}
a.primary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pro-own{display:flex;flex-wrap:wrap;gap:8px}
button.primary{
  justify-self:start;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;
  border-radius:12px;padding:11px 18px;border:0;background:var(--accent);color:var(--accent-ink);
}
button.primary:hover:not(:disabled){filter:brightness(1.08)}
button.primary:disabled{opacity:.5;cursor:not-allowed}
button.primary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pro-list{margin:0;padding-left:1.2em;line-height:1.6;color:var(--soft-ink)}

.board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;max-height:min(70vh,640px);overflow:auto}
.pg{display:grid;gap:6px;padding:8px;border-radius:14px;background:var(--card);border:1px solid var(--line);cursor:grab}
.pg.dragging{opacity:.4}
.pg-thumb{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:var(--raised)}
.pg-thumb img{max-width:100%;max-height:100%;box-shadow:0 2px 8px #0006;transition:transform .15s}
.pg-blank{width:70%;height:90%;background:#fff;opacity:.15}
.pg-label{font-size:.8rem;font-weight:800;text-align:center;color:var(--soft-ink)}
.pg-tools{display:flex;justify-content:space-between;gap:2px}
.pg-btn{font:inherit;font-size:.85rem;line-height:1;cursor:pointer;border:0;border-radius:8px;padding:6px 0;flex:1;background:transparent;color:var(--soft-ink)}
.pg-btn:hover{background:var(--raised);color:var(--accent-text)}
.pg-btn:focus-visible{outline:2px solid var(--accent)}
.pg.removed .pg-thumb{opacity:.25}
.pg.removed .pg-label{text-decoration:line-through;color:var(--muted)}

.pro{margin-top:28px;padding:22px 24px;border-radius:var(--radius);background:linear-gradient(160deg,var(--raised),var(--card));border:1px solid var(--accent-soft)}
.pro-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pro-head h2{margin:0;font-size:1.2rem;color:var(--ink);text-transform:none;letter-spacing:0}

/* teaching pass: privacy line, steps, capability map, changes, dev path */
.for-touch{display:none}
@media (hover:none) and (pointer:coarse){.for-mouse{display:none!important}.for-touch{display:inline}}
.privacy{margin:10px 0 0;font-size:.9rem;color:var(--soft-ink)}
.step-title{margin:0 0 10px}
#routes-heading{margin-top:22px}
.route .pro-badge{margin-left:auto}
.pro-mark{font-size:.66rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:1px 6px;border-radius:99px;border:1px solid var(--accent-soft);color:var(--accent-text);vertical-align:1px}
.pro-mark:hover{border-color:var(--accent)}
.changes-box h3{margin:0 0 4px;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.changes-box .changes{margin:0;padding-left:1.2em;color:var(--soft-ink);font-size:.92rem;line-height:1.5}
.pro-lede{margin:12px 0 10px;color:var(--ink);font-size:1.02rem;line-height:1.5}
.pro .pro-list{margin:0 0 10px}
.pro-terms{margin:0 0 14px;color:var(--soft-ink);font-size:.92rem}
.pro-action{display:grid;gap:8px;justify-items:start}
.pro-note{margin:0;color:var(--accent-text);font-size:.92rem;line-height:1.45}
.pro-note:empty{display:none}
.dev-path{text-align:center;margin:28px 0 0;color:var(--muted);font-size:.9rem}
.dev-path a{color:var(--accent-text);text-decoration:none;font-weight:700}
.dev-path a:hover{text-decoration:underline}
details.tech p{margin:10px 0 0;font-size:.88rem}
details.tech .ghost{margin-top:10px}

/* crunchy outcome */
#crunchy{display:grid;gap:6px;margin-top:14px;background:var(--bg);border:2px dashed var(--line);border-radius:18px;padding:18px}
#crunchy strong{font-size:1.15rem}
#crunchy span{color:var(--muted);line-height:1.45}
#crunchy .reason{justify-self:start;font-size:.78rem;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:2px 8px}
#crunchy button{justify-self:start;margin-top:6px}


button.ghost{
  font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;white-space:nowrap;
  border-radius:12px;padding:9px 14px;border:2px solid var(--line);background:var(--card);color:var(--ink);
  transition:border-color .15s;
}
button.ghost:hover{border-color:var(--accent)}

#status{margin:14px 0 0;min-height:1.4em;font-weight:600}
#status:empty{margin:0;min-height:0}
#status.ok,#status.bad,#status.busy{padding:10px 14px;border-radius:12px}
#status.ok{color:var(--ok);background:var(--ok-soft)}
#status.bad{color:var(--bad);background:var(--bad-soft)}
#status.busy{color:var(--muted);background:var(--bg)}

details{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
summary{cursor:pointer;font-weight:700;color:var(--muted);font-size:.9rem}
dl{display:grid;grid-template-columns:100px 1fr;gap:8px;margin:12px 0 0;font-size:.88rem}
dt{color:var(--muted)}
dd{margin:0;overflow-wrap:anywhere;font-family:ui-monospace,monospace}

/* chewing while converting */



.headline{margin:.7rem auto 0;max-width:30ch;font-size:clamp(1.2rem,3.6vw,1.55rem);font-weight:800;line-height:1.25;color:var(--ink);letter-spacing:-.01em}

.guide{margin-top:36px;padding:24px 26px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);line-height:1.6;color:var(--soft-ink)}
.guide h2{margin:26px 0 8px;font-size:1.15rem;color:var(--ink);text-transform:none;letter-spacing:0}
.guide h2:first-child{margin-top:0}
.guide p{margin:0 0 10px}
.guide ol,.guide ul{margin:0 0 10px;padding-left:1.4em}
.guide li{margin:4px 0}
.steps li::marker{color:var(--accent);font-weight:800}
.changes li::marker{color:var(--muted)}
.faq{display:grid;gap:8px}
.faq details{margin:0;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:1rem}
.faq details p{margin:8px 0 0}

.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--soft-ink);text-decoration:none}
.crumbs a:hover{color:var(--accent-text);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:700}
.jump{margin:12px 0 0;font-size:.95rem}
.jump a{color:var(--accent-text);text-decoration:none;font-weight:700}
.jump a:hover{text-decoration:underline}

/* developers page */
main.wide{width:min(960px,100% - 32px)}
.doc{padding:26px 30px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);line-height:1.6;color:var(--soft-ink)}
.doc h2{margin:34px 0 10px;font-size:1.35rem;color:var(--ink);text-transform:none;letter-spacing:0;scroll-margin-top:16px}
.doc h3{margin:24px 0 10px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-text)}
.doc p,.doc ul{margin:0 0 12px}
.doc li{margin:4px 0}
.doc a{color:var(--accent-text)}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--ink);overflow-wrap:anywhere}
.doc pre{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);overflow-x:auto}
.doc pre code{border:0;padding:0;background:none;font-size:.84rem;line-height:1.55;white-space:pre;overflow-wrap:normal}
.doc table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:.9rem;display:block;overflow-x:auto}
.doc th,.doc td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line)}
.doc td:first-child code{white-space:nowrap}
.doc th{color:var(--muted);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.doc details{margin:0 0 10px;border-top:0;padding-top:0}
.doc details p{margin-top:8px;line-height:2}
.mission{color:var(--ink);font-size:1.08rem;font-weight:600}
.work{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.work li{display:grid;align-content:start;gap:3px;margin:0;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.work b{color:var(--ink)}
.work span{font-size:.92rem}
@media (max-width:600px){.work{grid-template-columns:1fr}}
.timeline{list-style:none;padding:0;margin:4px 0 14px;display:grid;gap:0;border-left:2px solid var(--accent-soft)}
.timeline li{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:6px 0 6px 16px;position:relative}
.timeline li::before{content:'';position:absolute;left:-6px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.timeline b{color:var(--ink)}
.status{padding:12px 16px;border-radius:14px;background:var(--accent-soft);color:var(--ink);border:1px solid var(--accent)}
.ops{display:grid;gap:12px}
.op{padding:16px 18px;border-radius:16px;background:var(--bg);border:1px solid var(--line);scroll-margin-top:16px}
.op-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.op-head h4{margin:0;font-size:1rem}
.op p{margin:0 0 10px;color:var(--ink)}
.op dl{grid-template-columns:120px 1fr;font-size:.88rem;margin:0}
.op dd{font-family:inherit;line-height:1.55}
.tier{font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--soft-ink)}
.tier-pro{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

footer{text-align:center;margin-top:28px;color:var(--muted);font-size:.9rem}
footer a{color:var(--soft-ink);text-decoration:none}
footer a:hover{color:var(--accent-text);text-decoration:underline}

@media (max-width:600px){
  main{padding-top:36px}
  .guide{padding:20px 18px}
  .pro{padding:20px 18px}
  .doc{padding:20px 16px}
  .op dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* ================= Blue Lotus ECO shell ================= */
/* The ECO world: the original ECO background, cropped and toned exactly as on
   the ECO desktop (cover, centred at 48%, scaled 1.025), with ECO's full-viewport
   frost (blur 6px, saturate 118%). Only the world is behind the frost, so the
   frost is applied to the world itself as one still filter instead of a live
   backdrop blur: it looks the same and costs nothing while scrolling or
   during transitions. The glass sheen stays as its own layer. */
body.eco::before,body.eco::after{content:'';position:fixed;pointer-events:none;z-index:-1}
body.eco::before{inset:-2%;background:url(/eco-world-eb41e849.png) center 48%/cover no-repeat;transform:scale(1.025);
  filter:saturate(1.02) contrast(.97) brightness(1.05) blur(.35px) blur(6px) saturate(1.18);
  animation:eco-world-in 1.4s ease-out both,eco-frost-in 3.2s cubic-bezier(.4,0,.2,1) .4s both}
body.eco::after{inset:0;
  background:linear-gradient(118deg,rgba(250,255,255,.042),transparent 18% 58%,rgba(132,242,236,.020) 72%,rgba(238,255,255,.020)),
    linear-gradient(to bottom,rgba(242,255,255,.006),rgba(33,163,177,.012) 54%,rgba(6,91,98,.022))}
/* Entry only: on a fresh visit or reload the world fades in clear and the
   frost settles over it. Moving between our own pages (in place, a link or
   Back: eco-settled) shows the settled frost at once, and the interface never
   fades. Only the start is given, so the settled state is always the frost,
   and reduced motion goes straight to it. */
html.eco-settled body.eco::before{animation:none}
@keyframes eco-frost-in{from{filter:saturate(1.02) contrast(.97) brightness(1.05) blur(.35px) blur(0) saturate(1)}}
/* Text that sits directly on the world gets ECO's own legibility shadow. */
.eco-top,.fw-bar,.db-head,.db-hint,body.eco>main>header{text-shadow:0 1px 3px rgba(0,70,89,.6)}
.led{display:inline-block;width:14px;height:4px;border-radius:4px;background:var(--led);box-shadow:0 0 8px var(--led);vertical-align:middle}

/* ---- ECO station: top bar, Dreamline, file window, Dream Bar --------------------
   Values follow the ECO station references (entry surface and file opened). */
:root{--eco-radius:13px 7px 14px 8px;--eco-radius-sm:9px 5px 10px 6px;--display:"Montserrat","Segoe UI","Noto Sans",system-ui,sans-serif}
body.eco{font-family:"Segoe UI","Noto Sans","DejaVu Sans","Liberation Sans",system-ui,sans-serif;color:#e8f4fb}
.label{margin:0;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#daf7f7}

.eco-top{width:100%;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 28px 0}
.eco-identity{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;text-decoration:none;color:#f4ffff;flex:1 1 0}
.eco-brand{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.eco-sub{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(234,255,255,.78)}
.eco-greet{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.eco-mood{font-size:14px;color:#ebffff}
.eco-place{font-family:var(--display);font-weight:600;font-size:30px;color:#f2ffff;line-height:1.2}
.eco-place-sub{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#e1fcfc}
.eco-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;flex:1 1 0}
.eco-chips li{padding:6px 12px;border-radius:var(--eco-radius-sm);background:rgba(3,39,47,.42);border:1px solid rgba(221,251,253,.42);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#b9dce3;text-shadow:none;white-space:nowrap}
.eco-chips b{color:#eaffff}

main.station{width:min(1240px,100% - 32px);padding:24px 0 40px}
.stage{display:flex;flex-direction:column;align-items:center;gap:22px}

/* Dreamline: the entry. Drop a file or say what you need. */
.dreamline{width:100%;max-width:680px;display:flex;flex-direction:column;gap:12px;padding:18px 22px 16px;border-radius:var(--eco-radius);
  background:linear-gradient(144.25deg,rgba(255,255,255,.24) 0%,rgba(7,66,79,.36) 34%,rgba(7,66,79,.42) 100%);
  border:1px solid rgba(221,251,253,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 20px 52px rgba(10,40,70,.28);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
.dl-head{display:flex;align-items:baseline;gap:10px;text-shadow:0 1px 3px rgba(0,70,89,.6)}
.dl-head .label{font-size:10px}
.dl-mode,.dl-where{font-size:10px;color:rgba(234,255,255,.78)}
.dl-mode{padding:1px 7px;border-radius:99px;border:1px solid rgba(221,251,253,.35);letter-spacing:.06em;text-transform:uppercase}
.dl-intro .headline,.dl-intro h1.storefront{margin:0;max-width:none;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:0;line-height:1.3;color:#f4ffff}
.dl-intro .tagline{margin:.35rem 0 0;font-size:14px;font-weight:400;color:#e8f4fb}
.dl-intro .crumbs{margin:0 0 4px;font-size:12px}
.drop-field{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:14px 16px;border-radius:var(--eco-radius-sm);
  background:rgba(3,35,45,.62);border:1px dashed rgba(205,248,250,.5);cursor:pointer;outline:none;transition:background .2s,border-color .2s}
.drop-field:focus-visible{border-style:solid;border-color:#8fe0ff;box-shadow:0 0 0 2px rgba(143,224,255,.35)}
.drop.hot .drop-field{background:rgba(18,88,99,.62);border-style:solid;border-color:var(--accent)}
.drop-field .muncher{width:56px;height:56px;margin:0}
.df-text{flex:1 1 200px;display:flex;flex-direction:column;gap:2px}
.drop-field .cta{font-size:15px;font-weight:600;color:#e8f4fb}
.drop-field .sub{font-size:12px;color:#9fbac6}
.choose{padding:7px 14px;border-radius:var(--eco-radius-sm);background:rgba(18,88,99,.62);border:1px solid rgba(143,224,255,.55);color:#dff8f8;font-size:12px;font-weight:600}
.drop-field:hover .choose{background:rgba(34,126,137,.8)}
.dl-log{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:280px;overflow-y:auto}
.msg{padding:9px 12px;border-radius:var(--eco-radius-sm);background:rgba(3,35,45,.45);border:1px solid rgba(205,248,250,.22);font-size:13px;line-height:1.45;color:#e8f4fb}
.msg .who{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#daf7f7;margin-bottom:2px}
.msg.operator{margin-left:40px;background:rgba(18,88,99,.5)}
.msg.operator .who{color:rgba(234,255,255,.66)}
.msg .proposal{margin-top:8px;padding:8px 10px;border-radius:var(--eco-radius-sm);background:rgba(7,66,79,.4);border:1px solid rgba(143,224,255,.55);color:#f4ffff;font-weight:600}
.msg .proposal small{display:block;font-weight:400;color:rgba(234,255,255,.66);margin-top:2px}
.msg .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.msg .acts button{font:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--eco-radius-sm);cursor:pointer;border:1px solid rgba(209,252,252,.32);background:rgba(18,88,99,.62);color:#dff8f8}
.msg .acts button.use{background:#227e89;border-color:rgba(143,224,255,.55);color:#f4ffff}
.msg .acts button:disabled{opacity:.5;cursor:default}
.dl-input{display:flex;gap:8px}
.dl-input input{flex:1;min-width:0;font:inherit;font-size:14px;color:#f4ffff;background:rgba(3,35,45,.62);border:1px solid rgba(205,248,250,.35);border-radius:var(--eco-radius-sm);padding:10px 12px}
.dl-input input::placeholder{color:#7e9aa8}
.dl-input input:focus-visible{outline:2px solid #8fe0ff;outline-offset:1px}
.dl-input button{width:44px;border:1px solid rgba(143,224,255,.55);border-radius:var(--eco-radius-sm);cursor:pointer;font-size:1.05rem;font-weight:800;color:#f4ffff;background:#227e89}
.dl-foot{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:11px;color:rgba(234,255,255,.78)}
.dl-foot span+span{color:rgba(243,255,255,.62)}
/* With a file open, Dreamline steps below the file window and keeps only the conversation. */
.stage:has(#result:not([hidden])) .dl-intro,.stage:has(#result:not([hidden])) .dl-foot{display:none}

/* The file window */
.file-window{width:100%;max-width:1000px;padding:8px;border-radius:34px 23px 29px 17px;
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(10,62,77,.3) 10%,rgba(4,63,82,.5) 100%);
  border:1px solid rgba(248,254,255,.92);
  box-shadow:0 0 0 1px rgba(0,92,115,.18),0 28px 65px rgba(0,45,65,.42),0 0 30px rgba(225,255,251,.14),inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
.fw-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 14px 12px}
.fw-bar .muncher.mini{width:30px;height:30px;margin:0;animation:none}
.fw-bar h2{margin:0;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:#f2fbff;overflow-wrap:anywhere}
.fw-sub{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(240,255,255,.72)}
.back{margin-left:auto;font:inherit;font-size:11px;padding:5px 12px;border-radius:var(--eco-radius-sm);background:rgba(18,88,99,.62);border:1px solid rgba(209,252,252,.32);color:#dff8f8;cursor:pointer;text-shadow:none}
.back:hover{background:rgba(34,126,137,.8)}
.fw-body{border-radius:24px 14px 22px 12px;background:rgba(3,39,47,.34);border:1px solid rgba(255,255,255,.34);padding:18px;display:flex;flex-direction:column;gap:14px}
.fw-label{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.fw-label b{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#daf7f7}
.fw-label span{font-size:11px;color:rgba(234,255,255,.66)}
.fw-cols{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.paper{flex:1 1 300px;max-width:360px;background:#f4fafb;color:#14252b;border:1px solid rgba(10,42,51,.28);border-radius:4px;box-shadow:0 18px 48px rgba(0,26,34,.29);padding:24px 26px;font-family:"Ubuntu","Segoe UI","Noto Sans",sans-serif;display:flex;flex-direction:column;gap:10px}
.paper h3{margin:0;font-size:22px;font-weight:700}
.paper-size{margin:0;font-size:13px;color:rgba(20,37,43,.7)}
.paper dl{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px;line-height:18px}
.paper dt{color:#1c6b7a}
.paper dd{margin:0;font-family:inherit;overflow-wrap:anywhere}
.paper dd.mono{font-family:"DejaVu Sans Mono",ui-monospace,monospace;font-size:11px}
.agree{margin:4px 0 0;font-size:12px;color:rgba(20,37,43,.62)}
.convert-to{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--eco-radius);
  background:linear-gradient(144.25deg,rgba(22,62,73,.65) 0%,rgba(4,48,59,.56) 34%,rgba(4,48,59,.56) 100%);
  border:1px solid rgba(221,251,253,.46);box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 8px 24px rgba(0,65,72,.12)}
#routes-heading{margin:0;font-size:10px}
#routes{display:flex;flex-direction:column;gap:10px}
.convert-to .route{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 12px;text-align:left;width:100%;font:inherit;color:#e8f4fb;cursor:pointer;
  padding:10px 12px;border-radius:var(--eco-radius-sm);background:rgba(3,35,45,.4);border:1px solid rgba(205,248,250,.28);box-shadow:none;transform:none}
.convert-to .route::after{content:"Choose";grid-column:2;grid-row:1/span 3;padding:8px 16px;border-radius:var(--eco-radius-sm);background:rgba(18,88,99,.62);border:1px solid rgba(209,252,252,.32);color:#dff8f8;font-size:12px;font-weight:600}
.convert-to .route strong{grid-column:1;font-size:15px;color:#f4ffff;display:flex;align-items:center;gap:8px}
.convert-to .route .benefit{grid-column:1;font-size:13px;font-weight:400;color:#e8f4fb}
.convert-to .route .losses{grid-column:1;font-size:11px;color:rgba(234,255,255,.66)}
.convert-to .route.preferred,.convert-to .route[aria-pressed="true"],.convert-to .route:hover:not(:disabled){background:rgba(7,66,79,.4);border-color:rgba(143,224,255,.55);transform:none;box-shadow:none}
.convert-to .route[aria-pressed="true"]::after{content:"Chosen";background:#227e89;border-color:rgba(143,224,255,.55);color:#f4ffff}
.convert-to .route .pro-badge{margin-left:0}
.convert-to .panel{margin:0;border-radius:var(--eco-radius-sm);background:rgba(3,35,45,.55);border:1px solid rgba(143,224,255,.4)}
.convert-to .primary{border-radius:var(--eco-radius-sm);background:#227e89;color:#f4ffff;border:1px solid rgba(143,224,255,.55)}
#status{margin:0}
#status.ok{display:flex;gap:8px;align-items:baseline;color:#e8f4fb;background:none;padding:2px 0 0;font-weight:400;font-size:13px}
#status.ok::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#75df9b;box-shadow:0 0 8px #75df9b;transform:translateY(-1px)}
.receipt{margin:0;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:rgba(234,255,255,.66)}
.file-window details.tech{margin:0;border-top:1px solid rgba(255,255,255,.14);padding-top:10px}
.file-window details.tech summary{font-size:11px;color:rgba(234,255,255,.66)}

/* Dream Bar. contain:paint keeps the long card row inside its own scroller;
   without it mobile browsers widen the whole page to the row's length. */
.dream-bar{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:16px;scroll-margin-top:24px}
.db-head{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.db-head h2{margin:0;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f4ffff}
.db-head span{font-size:11px;color:rgba(234,255,255,.85)}
.db-track{list-style:none;margin:0;padding:16px max(16px,calc(50% - 105px));width:100%;display:flex;align-items:center;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;contain:paint;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.db-track li{flex:none;scroll-snap-align:center}
.db-card{width:186px;display:flex;flex-direction:column;gap:6px;padding:12px 14px 10px;text-decoration:none;color:#f4ffff;border-radius:var(--eco-radius);
  background:linear-gradient(144.25deg,rgba(110,200,196,.42) 0%,rgba(7,66,79,.42) 100%);border:1px solid rgba(244,255,255,.3);
  transition:transform .2s,border-color .2s}
.db-card:hover,.db-card:focus-visible{transform:translateY(-3px);border-color:rgba(255,255,255,.56);outline:none}
.db-card[aria-current]{width:210px;padding:14px 16px 12px;background:linear-gradient(144.25deg,rgba(140,236,255,.36) 0%,rgba(10,62,77,.6) 100%);border-color:rgba(255,255,255,.56);box-shadow:0 14px 32px rgba(0,45,65,.3)}
.db-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.db-card[aria-current] .db-title{font-size:16px}
.db-icon{flex:none;width:22px;height:16px;border-radius:6px 3px 6px 3px;background:linear-gradient(135deg,#a5ebe6,#4dd7e7);border:1px solid rgba(245,255,255,.34)}
.db-desc{font-size:11px;line-height:1.35;color:rgba(234,255,255,.78);min-height:2.7em}
.db-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,255,255,.7)}
.db-hint{margin:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,255,255,.62)}

/* below the station: same glass family */
.guide,.pro,.doc{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--eco-radius)}
footer{color:var(--soft-ink)}

@media (max-width:760px){
  .eco-top{padding:14px 16px 0;gap:10px}
  .eco-identity{flex:0 0 auto}
  .eco-chips{flex:1 1 0;gap:6px}
  .eco-chips li{padding:4px 8px;font-size:9px}
  .eco-greet{order:3;flex-basis:100%}
  .eco-mood{display:none}
  .eco-place{font-size:22px}
  main.station{padding-top:16px}
  .dreamline{padding:16px}
  .fw-body{padding:12px}
  .paper{max-width:none;padding:20px}
  .convert-to .route{grid-template-columns:1fr}
  .convert-to .route::after{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .dream-bar{margin-top:40px}
}
@media (max-width:420px){
  .eco-chips li{padding:5px 8px}
  .msg.operator{margin-left:20px}
}