:root {
  color-scheme: light;
  --ink: #234f50;
  --muted: #526d72;
  --green: #267b72;
  --coral: #b35b74;
  --petal: #d88b9c;
  --glass: rgba(255,255,255,.48);
  --line: rgba(255,255,255,.82);
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#e6eeee; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
button:focus-visible { outline:3px solid #257b73; outline-offset:4px; }
[hidden] { display:none!important; }
.scenery { position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none; background:linear-gradient(135deg,#d3e8de 0%,#e6eff2 38%,#eee8ed 75%,#e1e2ef 100%); }
.scenery::after { content:""; position:absolute; inset:0; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.orb { position:absolute; border-radius:50%; filter:blur(50px); }
.orb-mint { width:620px; height:620px; top:8%; left:-190px; background:#95c9b67a; }
.orb-peach { width:600px; height:600px; top:-280px; right:-50px; background:#f7c5b990; }
.orb-lilac { width:700px; height:600px; bottom:-350px; right:-80px; background:#b0ace093; }
.leaf { position:absolute; border-radius:0 90% 0 90%; transform-origin:bottom left; background:linear-gradient(130deg,#729c8855,#cde8d128); border:1px solid #ffffff35; }
.leaf::after { content:""; position:absolute; height:1px; width:115%; top:50%; left:-7%; background:#ffffff60; transform:rotate(43deg); }
.leaf-one { width:220px; height:350px; bottom:-110px; left:-80px; transform:rotate(-18deg); filter:blur(2px); }
.leaf-two { width:140px; height:270px; bottom:-130px; left:120px; transform:rotate(-57deg); filter:blur(3px); }
.leaf-three { width:180px; height:310px; right:-110px; top:240px; transform:rotate(-23deg); opacity:.5; }
.leaf-four { width:150px; height:240px; right:15px; top:-110px; transform:rotate(55deg); opacity:.4; filter:blur(4px); }
.shell { max-width:1200px; padding:0 40px; margin:auto; }
.topbar { height:105px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff70; }
.wordmark { display:flex; align-items:center; gap:12px; font-size:23px; font-weight:650; letter-spacing:-1px; }
.brand-icon { width:44px; height:44px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(135deg,#ffffffb3,#ffffff38); border:1px solid white; box-shadow:0 4px 14px #4b817112,inset 0 1px 0 white; }
.brand-icon svg { width:25px; height:29px; color:#398478; }
.brand-sub { display:block; font-size:10px; font-weight:450; letter-spacing:2px; color:var(--muted); margin-top:4px; }
.top-actions { display:flex; align-items:center; gap:22px; }
.demo-tag { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:1px; color:var(--muted); }
.live-dot { width:5px; height:5px; border-radius:50%; background:#328274; box-shadow:0 0 0 4px #3282740d; }
.language { border:1px solid #ffffffe6; border-radius:30px; background:#ffffff50; padding:10px 16px; font-size:12px; font-weight:650; box-shadow:inset 0 1px 0 white; }
.language span { margin-left:8px; opacity:.6; }
main { display:grid; grid-template-columns:340px minmax(0,1fr); gap:64px; padding:38px 0 32px; align-items:center; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:1.8px; color:var(--muted); }
.tiny-spark { font-size:21px; color:#748d91; }
h1 { margin:17px 0 16px; font-weight:550; font-size:48px; letter-spacing:-2px; line-height:1.28; }
h1 em { color:var(--green); font-style:normal; }
html[lang=en] h1 { font-family:Georgia,serif; font-size:56px; font-weight:400; line-height:1.06; }
html[lang=en] h1 em { font-style:italic; }
.lead { font-size:12px; color:var(--muted); line-height:1.9; margin-bottom:27px; }
.glass { background:linear-gradient(150deg,#ffffff73,#ffffff3d); backdrop-filter:blur(28px) saturate(140%); -webkit-backdrop-filter:blur(28px) saturate(140%); border:1px solid var(--line); box-shadow:0 24px 60px #57757412,inset 0 1px 0 #ffffff; }
.atlas { padding:21px; border-radius:24px; }
.atlas-heading { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600; }
#collection-count { font-size:10px; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:500; }
.collection-track { height:3px; background:#6683801a; border-radius:3px; margin-top:13px; overflow:hidden; }
.collection-track span { display:block; height:100%; background:linear-gradient(90deg,#529a87,#95bdad); border-radius:3px; transition:width .3s; }
.chapter-row { display:flex; gap:7px; align-items:center; margin:17px 0 14px; font-size:10px; color:var(--muted); }
.chapter-dot { width:5px; height:5px; border-radius:50%; background:#688f88; }
#chapter-progress { margin-left:auto; font-size:9px; letter-spacing:.7px; }
.level-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.level-pill { border:1px solid #ffffffa8; border-radius:13px; background:#ffffff32; min-height:43px; font-size:13px; font-weight:550; position:relative; box-shadow:inset 0 1px 0 #ffffff7a; transition:background .15s,transform .15s; }
.level-pill:hover:enabled { background:#ffffff91; transform:translateY(-2px); }
.level-pill[aria-current=true] { color:#fff; background:linear-gradient(135deg,#378579,#599e8d); border-color:#7ab7a5; box-shadow:0 5px 12px #34847520,inset 0 1px 0 #ffffff45; }
.level-pill.completed::after { content:"✓"; position:absolute; top:4px; right:6px; font-size:8px; color:#39776b; }
.level-pill.completed[aria-current=true]::after { color:white; }
.level-pill:disabled { color:#7a8a8b; background:#ffffff1a; border-color:#ffffff59; }
.level-pill:disabled::after { content:"·"; position:absolute; top:0; right:6px; color:#859694; }
.chapter-labels { display:flex; justify-content:space-between; margin-top:15px; font-size:9px; letter-spacing:.4px; color:var(--muted); }
.howto { margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.howto>div { display:flex; gap:10px; align-items:center; }
.step-dot { font-size:9px; color:#597c76; letter-spacing:1px; border:1px solid #ffffffb3; border-radius:7px; padding:4px 6px; background:#ffffff35; }
.howto p { font-size:10px; line-height:1.6; margin:0; color:var(--muted); }
.note { display:flex; gap:8px; align-items:center; font-size:10px; color:var(--muted); margin-top:23px; }
.note>span:first-child { font-size:17px; }
.game-card { border-radius:34px; padding:26px 30px 24px; position:relative; overflow:hidden; }
.game-card::before { content:""; position:absolute; width:180px; height:180px; top:-80px; right:-50px; background:#ffffff50; filter:blur(30px); border-radius:50%; pointer-events:none; }
.game-heading { display:flex; justify-content:space-between; align-items:center; padding:0 4px; }
.kicker { font-size:9px; letter-spacing:1.8px; color:var(--muted); }
h2 { font-size:22px; margin:7px 0 0; font-weight:550; letter-spacing:-.6px; }
.flower-count { display:flex; align-items:center; gap:9px; font-size:13px; font-variant-numeric:tabular-nums; }
.flower-count svg { width:39px; height:39px; color:#3b887c; }
.flower-count circle { fill:none; stroke-width:2; }
.ring-track { stroke:#628a851f; }
#flower-ring { stroke:#4c9587; stroke-dasharray:113.1; stroke-dashoffset:113.1; transform:rotate(-90deg); transform-origin:22px 22px; transition:stroke-dashoffset .25s; }
.count-label { display:block; color:var(--muted); font-size:8px; margin-top:3px; letter-spacing:.5px; }
.level-detail { display:flex; align-items:center; gap:7px; margin:14px 4px 20px; font-size:9px; color:var(--muted); }
.detail-separator { opacity:.6; }
#difficulty { margin-left:auto; letter-spacing:3px; font-size:10px; color:#538c81; }
.checkpoint-rule { font-size:10px; color:#526d72; background:#ffffff43; border:1px solid #ffffff9e; border-radius:10px; padding:8px 11px; margin:-7px 0 15px; display:flex; align-items:center; justify-content:space-between; }
.checkpoint-rule b { font-size:12px; letter-spacing:5px; color:#826285; font-weight:550; }
.board-wrap { position:relative; max-width:460px; margin:auto; }
.board { aspect-ratio:1; border-radius:26px; background:linear-gradient(145deg,#d3e7e170,#e2e9f07a); border:1px solid #ffffff85; box-shadow:inset 0 1px 4px #ffffffa3,inset 0 -8px 28px #71919c0b; position:relative; isolation:isolate; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
.board::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 12% 0%,#ffffff5e,transparent 65%),radial-gradient(ellipse at 95% 100%,#c4c8e133,transparent 55%); }
.tile { position:absolute; background:linear-gradient(135deg,#ffffff8c,#ffffff35); border:1px solid #ffffffa6; border-radius:23%; padding:0; display:grid; place-items:center; touch-action:none; box-shadow:inset 0 1px 0 #ffffffe0,0 2px 5px #45766f04; transition:background .2s,box-shadow .2s; }
.tile svg { width:62%; height:62%; pointer-events:none; position:relative; z-index:2; }
.tile.rock { background:linear-gradient(135deg,#879ba71a,#a7b9bd27); border-color:#ffffff54; box-shadow:inset 0 1px 3px #72828b0d; }
.tile.visited { background:linear-gradient(135deg,#e5faf1a6,#c6e9de6b); border-color:#f7fffdcc; }
.tile.head { box-shadow:inset 0 0 0 1.5px #419d8c,0 0 16px #50bc991f; }
.tile .petals { fill:#adc2bd; transition:fill .2s; }
.tile.visited .petals { fill:var(--petal); }
.tile .stem { stroke:#8cab9e; }
.tile.visited .stem { stroke:#5b9683; }
.tile .center { fill:#d3ded1; }
.tile.visited .center { fill:#f5d8a2; }
.tile.source svg { color:#4a96a7; filter:drop-shadow(0 2px 3px #3687a51f); }
.tile.finish svg { color:#4d8f81; }
.tile.finished svg { color:#40877a; }
.bud-number { position:absolute; right:3px; bottom:3px; min-width:16px; height:16px; display:grid; place-items:center; background:#efebf7ee; color:#755886; border:1px solid #ffffff; border-radius:50%; font-size:9px; font-weight:750; z-index:3; pointer-events:none; }
.tile.visited .bud-number { color:white; background:#8b75a5; }
.path-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.path-layer polyline { fill:none; stroke:#78b7a3; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 2px #629f8c25); }
.legend { display:flex; justify-content:center; gap:17px; margin:16px 0 8px; font-size:9px; color:var(--muted); }
.legend>span { display:flex; gap:5px; align-items:center; }
.legend i { font-style:normal; }
.water-dot { width:7px; height:9px; border-radius:8px 8px 8px 1px; transform:rotate(-45deg); background:#538da0; }
.flower-dot { color:#bc6e87; font-size:14px; }
.finish-dot { color:#397f70; font-size:14px; }
.order-dot { width:13px; height:13px; display:grid; place-items:center; border:1px solid #b6a2c6; border-radius:50%; color:#755886; font-size:8px; }
.status { min-height:34px; text-align:center; margin:0; display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1.7; color:var(--muted); }
.status.error { color:#9b4054; }
.controls { display:flex; gap:10px; margin-top:8px; padding-top:15px; border-top:1px solid #ffffff85; }
.control { border:1px solid #ffffffbf; border-radius:14px; background:linear-gradient(145deg,#ffffff7a,#ffffff32); box-shadow:inset 0 1px 0 white,0 3px 8px #68877b06; min-height:45px; flex:1; display:flex; justify-content:center; align-items:center; gap:8px; font-size:12px; }
.control>span:first-child { color:#4c8b7d; font-size:19px; }
.control:disabled { opacity:.45; }
.control:hover:enabled { background:#ffffffac; }
.control.busy>span:first-child { animation:turn 2s linear infinite; }
.hint-marker { position:absolute; height:12px; width:12px; transform:translate(-50%,-50%); background:#a06eab; border-radius:50%; z-index:3; pointer-events:none; box-shadow:0 0 0 5px #a06eab23; animation:pulse 1.3s ease-in-out infinite; }
.completion { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; flex-direction:column; background:linear-gradient(135deg,#f0f8f0d9,#edf0f6e0); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); padding:35px; text-align:center; animation:appear .3s ease-out; }
.success-flower { font-size:94px; color:var(--petal); line-height:1; margin-bottom:25px; text-shadow:0 7px 18px #b1729c15; animation:bloom .6s ease-out; }
.success-kicker { font-size:9px; letter-spacing:2px; color:var(--muted); }
.completion h2 { font-size:29px; margin:12px 0; }
.completion>p:last-of-type { max-width:300px; font-size:12px; line-height:1.9; color:var(--muted); margin-bottom:28px; }
.primary { border:1px solid #8fbeae; border-radius:30px; background:linear-gradient(135deg,#39867a,#579b87); box-shadow:inset 0 1px 0 #ffffff40,0 7px 16px #39867a21; color:white; padding:15px 32px; font-size:12px; min-width:205px; }
.text-button { background:none; border:0; font-size:11px; color:var(--muted); padding:12px; margin-top:15px; }
footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #ffffff70; padding:22px 0 25px; font-size:9px; letter-spacing:.5px; color:var(--muted); }
@keyframes pulse { 50% { box-shadow:0 0 0 9px #a06eab0c; } }
@keyframes appear { from { opacity:0; } to { opacity:1; } }
@keyframes bloom { from { transform:scale(.7) rotate(-15deg); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes turn { to { transform:rotate(360deg); } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .glass { background:#edf4f0ed; } .completion { background:#edf4f0fa; } }
@media(max-width:1080px) { .shell { padding:0 28px; } main { grid-template-columns:300px minmax(0,1fr); gap:36px; } h1 { font-size:44px; } .game-card { padding:24px; } }
@media(max-width:800px) {
  .shell { max-width:550px; padding:0 16px; }
  .topbar { height:78px; }
  .wordmark { font-size:20px; }
  .brand-icon { width:37px; height:37px; border-radius:13px; }
  .brand-sub { font-size:9px; }
  .top-actions { gap:12px; }
  .demo-tag { font-size:9px; letter-spacing:.4px; }
  .language { padding:8px 12px; font-size:11px; }
  main { grid-template-columns:1fr; gap:24px; padding:20px 0 25px; }
  .game-card { grid-row:1; padding:20px 16px 18px; border-radius:27px; }
  .intro { grid-row:2; }
  .intro-copy,.howto,.note { display:none; }
  .atlas { padding:20px; }
  .atlas-heading { font-size:13px; }
  .level-pill { min-height:44px; }
  h2 { font-size:20px; }
  .game-heading { padding:0 3px; }
  .level-detail { margin:13px 3px 16px; }
  .board { border-radius:20px; }
  .legend { gap:13px; font-size:9px; }
  .status { min-height:40px; font-size:10px; }
  .controls { margin-top:4px; padding-top:12px; }
  .checkpoint-rule { margin:0 0 13px; font-size:9px; }
  .tile svg { width:64%; height:64%; }
  footer { font-size:9px; line-height:1.6; padding:18px 0; }
  footer>span:first-child { display:none; }
  .orb-mint { top:0; left:-300px; }
  .leaf-three { right:-150px; }
}
@media(max-width:360px) { .shell { padding:0 10px; } .demo-tag { display:none; } .wordmark { font-size:18px; } .game-card { padding:18px 13px 16px; } .legend { gap:9px; font-size:8px; } .bud-number { right:1px; bottom:1px; min-width:13px; height:13px; font-size:8px; } }
@media(max-height:530px) and (min-width:801px) { .topbar { height:65px; } main { padding:20px 0; } .intro-copy,.howto,.note { display:none; } .game-card { padding:18px; } .board-wrap { max-width:250px; } .legend { margin:10px 0 0; } .level-detail { margin:8px 0 12px; } .controls { padding-top:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }