:root{font-family:Inter,Apple SD Gothic Neo,Noto Sans KR,sans-serif;color:#f5f4e9;background:#bdd3cc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible{outline:3px solid #f5c678;outline-offset:4px}canvas{display:block;touch-action:none}header{position:absolute;top:max(24px,env(safe-area-inset-top));left:30px;pointer-events:none}header small{font-size:10px;letter-spacing:3px;color:#d4e1d1}h1{font-size:28px;letter-spacing:-1px;margin:7px 0 5px;font-weight:500}header p{margin:0;color:#e1eadb;font-size:12px}.glass{background:#193e35dc;border:1px solid #ffffff29;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 30px #15382c18;border-radius:18px}.status{position:absolute;right:26px;top:26px;padding:13px 17px;font-size:12px;color:#e6e8d9}.status span{color:#e7bd76;margin-right:7px}.route{position:absolute;left:30px;top:158px;padding:19px 20px;width:200px}.route small{font-size:10px;letter-spacing:2px;color:#abbfa8}.route ol{padding:0;margin:16px 0 0;list-style:none}.route li{font-size:12px;color:#a8c0ac;padding:8px 0 8px 20px;position:relative;border-left:1px solid #74918155}.route li:before{content:"";position:absolute;left:-3px;top:14px;width:5px;height:5px;background:#749181;border-radius:50%}.route li.active{color:#ffdb9b}.route li.active:before{background:#ffdb9b;box-shadow:0 0 0 4px #ffdb9b18}.route footer{font-size:11px;color:#aebfa9;border-top:1px solid #ffffff18;padding-top:14px;margin-top:13px}.bottom{position:absolute;bottom:26px;left:50%;transform:translate(-50%);text-align:center;max-width:calc(100% - 32px)}#location{font-size:11px;color:#e0e9d7;text-shadow:0 1px 7px #163f30;margin:10px}#interact{padding:14px 27px;border:1px solid #fff3;background:#f2ddb5;color:#254338;border-radius:30px;font-weight:600;min-width:190px}#interact:disabled{opacity:.75;cursor:default}.hint{font-size:11px;color:#f0f3e6;text-shadow:0 1px 5px #234c39;margin-top:14px}.tools{position:absolute;right:26px;bottom:26px;display:flex;gap:8px}.tools button{background:#193e35df;border:1px solid #fff3;border-radius:50%;width:44px;height:44px;font-size:18px}.intro{position:absolute;inset:0;background:#102b2390;display:grid;place-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:5}.intro article{width:min(450px,calc(100% - 40px));padding:36px}.intro h2{font-size:32px;font-weight:500;line-height:1.4;letter-spacing:-1px;margin:16px 0}.intro p{font-size:14px;line-height:1.8;color:#ced9c9}.intro small{font-size:10px;letter-spacing:2px;color:#dfc28d}.primary{background:#eddbb5;border:0;border-radius:25px;padding:13px 25px;color:#244136;width:100%;margin-top:16px}.intro .note{font-size:11px;color:#a8bba6;margin-bottom:0}#toast{position:absolute;left:50%;top:100px;transform:translate(-50%);padding:13px 22px;font-size:13px;max-width:85%;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}#toast.show{opacity:1}dialog{color:#f6f0de;border:1px solid #ffffff30;background:#173d33f5;border-radius:22px;width:min(380px,calc(100% - 36px));padding:28px}dialog::backdrop{background:#0d291e70}dialog h2{font-size:23px;font-weight:500}dialog p{font-size:13px;color:#bfd0bb;line-height:1.7}dialog button{display:block;padding:12px 16px;border-radius:20px;border:1px solid #ffffff30;background:#ffffff0c;width:100%;margin-top:10px}dialog button.close{border:0;color:#bbceba}#joystick{display:none;position:absolute;left:27px;bottom:32px;width:108px;height:108px;border:1px solid #ffffff55;border-radius:50%;background:#163f3433;touch-action:none}#stick{position:absolute;width:42px;height:42px;left:32px;top:32px;border-radius:50%;background:#e7e8d596;border:1px solid #fff8;pointer-events:none}.mobile-hint{display:none}.progress{height:2px;background:#ffffff20;margin-top:13px}.progress i{display:block;height:100%;background:#e4bd79;width:0}.error{position:absolute;inset:0;display:grid;place-items:center;color:#163e32;padding:40px}button[hidden],[hidden]{display:none!important}@media(pointer:coarse){#joystick{display:block}.desktop-hint{display:none}.mobile-hint{display:inline}}@media(max-width:650px){header{left:20px;top:22px}h1{font-size:23px}.status{right:16px;top:22px;padding:10px;font-size:10px}.route{left:20px;top:132px;width:150px;padding:13px 15px}.route li{font-size:10px;padding:6px 0 6px 13px}.route li:before{top:11px}.route footer{font-size:10px}.route small{font-size:9px}.tools{right:17px;bottom:31px;flex-direction:column}.bottom{bottom:155px;width:90%}.hint{font-size:10px}#interact{padding:12px 20px;font-size:12px;min-width:160px}#toast{top:82px;font-size:12px}.intro article{padding:28px}.intro h2{font-size:29px}}@media(prefers-reduced-motion:reduce){#toast{transition:none}}@media(max-width:650px){header small{display:none}header p{max-width:220px;line-height:1.5;font-size:11px}.status{top:83px;right:16px}.route{top:115px;width:140px}.route ol{display:none}.route footer{margin-top:8px;padding-top:8px}.route .progress{margin-top:9px}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}:root{-webkit-font-smoothing:antialiased}.status,#distance,#chat-cooldown{font-variant-numeric:tabular-nums}.quick-chat{position:absolute;right:28px;bottom:85px;width:285px;padding:18px;z-index:3}.quick-chat>div{display:flex;align-items:center;justify-content:space-between;font-size:13px}.quick-chat p{font-size:11px;color:#b8ccb9;line-height:1.5}.quick-chat button[data-say]{width:100%;min-height:44px;text-align:left;margin:5px 0;padding:10px 12px;border:1px solid #ffffff22;background:#ffffff09;border-radius:12px;font-size:13px}.quick-chat button[data-say]:hover:not(:disabled){background:#ffffff18}.quick-chat button:disabled{opacity:.45;cursor:default}.quick-chat kbd{font:inherit;font-size:10px;color:#ddc18e;margin-right:7px}.quick-chat small{display:block;color:#c4cfbc;font-size:10px;min-height:16px;margin-top:9px}#chat-close{border:0;background:transparent;font-size:22px;min-width:40px;min-height:40px}button{transition:scale .12s ease,background-color .12s ease}button:active:not(:disabled){scale:.96}h1,h2{text-wrap:balance}p{text-wrap:pretty}@media(max-width:650px){.quick-chat{right:16px;bottom:220px;width:min(285px,calc(100% - 32px))}.tools{gap:7px}.tools button{width:44px;height:44px}.bottom{bottom:175px}}@media(prefers-reduced-motion:reduce){button{transition:none}}.vendor-dialog{position:absolute;right:28px;bottom:85px;width:400px;max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain;padding:24px;z-index:3;background:#153c32f5;font-family:system-ui,Apple SD Gothic Neo,Malgun Gothic,Noto Sans KR,sans-serif;font-size:18px;line-height:1.55;word-break:keep-all}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialog-heading small{font-size:12px;color:#e2cb98;letter-spacing:.3px}.dialog-heading h2{font-size:26px;font-weight:700;margin:5px 0}.dialog-heading button{border:0;background:transparent;font-size:28px;min-width:44px;min-height:44px}.vendor-dialog p{min-height:74px;font-size:18px;line-height:1.7;color:#fff5df;margin:14px 0}.vendor-dialog>small{display:block;font-size:12px;line-height:1.6;color:#d0dfca;margin-top:16px}.vendor-dialog #vendor-choices :is(button,a){display:block;width:100%;min-height:52px;border:1px solid #ffffff40;background:#ffffff0d;border-radius:12px;margin-top:7px;padding:11px 14px;text-align:left;font:600 18px/1.5 system-ui,Apple SD Gothic Neo,Malgun Gothic,Noto Sans KR,sans-serif;text-decoration:none;color:#fff7e8;touch-action:manipulation}.vendor-dialog button:disabled{opacity:.45;cursor:default}.vendor-dialog #vendor-choices :is(button,a):hover{background:#ffffff20}.vendor-dialog #vendor-choices .vendor-support{background:#eddbb5;color:#234337;border-color:#f4e7c9}.vendor-dialog #vendor-choices .vendor-support:hover{background:#f5e6c8}.vendor-dialog a:focus-visible{outline:3px solid #f5c678;outline-offset:3px}@media(max-width:650px){.vendor-dialog{right:16px;bottom:235px;width:calc(100% - 32px);max-height:calc(100dvh - 250px);padding:18px;touch-action:pan-y}.dialog-heading h2{font-size:24px}.vendor-dialog p{min-height:64px;margin:12px 0;font-size:17px}.vendor-dialog #vendor-choices :is(button,a){font-size:17px;min-height:50px;margin-top:6px;padding:10px 12px}.vendor-dialog>small{font-size:12px;margin-top:12px}}@media(max-width:650px){.quick-chat,.vendor-dialog{bottom:235px}}#app>canvas{position:fixed;inset:0;width:100%;height:100%}.review-controls{position:absolute;right:26px;top:92px;padding:12px 14px;z-index:2;max-width:230px}.review-controls label{display:block;font-size:12px;color:#ead6ae;margin-bottom:8px}.review-controls select{width:100%;font:inherit;font-size:14px;color:#173d33;background:#f5e6c8;border:0;border-radius:8px;padding:9px}.solo-review .tools button:disabled{opacity:.45;cursor:default}@media(max-width:650px){.solo-review .status{top:94px;right:20px;max-width:calc(100% - 40px);font-size:11px}.review-controls{right:20px;top:145px;width:170px;padding:10px}.review-controls label{font-size:11px}}#vista-note{position:fixed;top:110px;left:50%;transform:translate(-50%);max-width:80vw;padding:10px 16px;border-radius:18px;font-size:12px;text-align:center;pointer-events:none}#vista-note[hidden]{display:none}@media(max-width:650px){#vista-note{top:145px;max-width:88vw;width:max-content;font-size:10px;padding:8px 12px}}.vista-active #toast{top:156px}@media(max-width:650px){.status{top:80px;right:16px;max-width:calc(100% - 32px)}.route{top:125px;left:16px;width:calc(100% - 32px);padding:10px 14px;border-radius:13px}.route small{display:none}.route footer{border:0;margin:0;padding:0}.route .progress{margin:0 0 7px}#vista-note{top:176px;width:calc(100% - 32px);max-width:none;font-size:10px;padding:9px 12px;border-radius:13px}#toast{top:176px;width:calc(100% - 32px);max-width:none;padding:10px 14px;font-size:12px}.vista-active #toast{top:222px}#interact{max-width:calc(100vw - 112px);min-width:160px}}@media(max-height:500px)and (min-width:651px){header{top:12px;left:16px}header p,header small{display:none}h1{font-size:20px}.route{top:65px;left:16px;width:150px;padding:10px}.route ol{display:none}.route footer{margin:0;padding:0;border:0}.route .progress{margin-top:6px}#toast{top:65px;max-width:48%;font-size:11px}#vista-note{top:65px;max-width:48%;font-size:10px}.vista-active #toast{top:108px}.bottom{bottom:14px}.hint{margin-top:7px}.intro article{padding:16px 24px;max-height:calc(100dvh - 20px);overflow:auto}.intro h2{font-size:24px;margin:8px 0}}:root{--ui-scale:1}.hud-top{display:contents}header{padding:12px 16px;border-radius:16px;background:#143b32e8;box-shadow:0 3px 18px #09291c26}header small{color:#ebd9b4}header p{color:#f2f5e8;font-size:14px;line-height:1.5}h1{font-weight:650;color:#fff8e8}.status{font-size:14px;color:#fff8e8;background:#143b32f5;line-height:1.45}.route{background:#143b32f2}.route ol{display:none}.route li{font-size:14px;line-height:1.45;padding-top:9px;padding-bottom:9px;color:#e0ebdb}.route li.active{color:#ffe0a1}.route footer{font-size:14px;line-height:1.5;color:#f4f1df}#route-toggle{border:0;background:transparent;color:#fff0cc;font-size:14px;font-weight:650;padding:0 0 6px;text-align:left;min-height:32px;width:100%}#auto-panel{position:absolute;left:auto;right:26px;top:88px;width:200px}#autowalk{width:100%;min-height:48px;padding:11px 12px;background:#1a493bf5;color:#fff5df;border:2px solid #e9d5a4;border-radius:16px;font-size:16px;line-height:1.4;font-weight:700}#autowalk.active{background:#f2ddb3;color:#173e32;border-color:#fff1cc}#autowalk:disabled{opacity:.65;cursor:default}#interact{font-size:16px;line-height:1.5;min-height:48px}.hint{font-size:13px;line-height:1.5}#location{font-size:15px;line-height:1.4;color:#fff9ea}#toast{font-size:15px;line-height:1.5;background:#153f35f5;color:#fff8e7}#vista-note{font-size:14px;line-height:1.5;background:#143b32f5;color:#fff4dc}.tools button{width:48px;height:48px;font-size:21px}.intro p{font-size:16px;line-height:1.65;color:#eef2e3}.intro .note{font-size:14px;line-height:1.6;color:#d8e5d3}.intro small{font-size:12px;color:#ecd6a5}.primary,.secondary{font-size:17px;min-height:48px;line-height:1.4}.secondary{width:100%;margin-top:10px;padding:12px 20px;border:1px solid #f2ddb580;border-radius:24px;background:#ffffff0c;color:#fff1d4}dialog{font-size:16px}dialog p{font-size:16px;line-height:1.6;color:#e1edda}dialog button{font-size:16px;min-height:48px}.route-dialog[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 40px);width:min(420px,calc(100% - 32px))}.route-dialog h2{margin:0 0 14px;flex:none}.route-dialog ol{margin:0;padding:0 0 0 24px;overflow-y:auto;min-height:0;line-height:1.5;font-size:16px}.route-dialog li{padding:8px 4px;color:#f7efd9}.route-dialog button{flex:none;margin-top:16px;font-weight:650;background:#f0ddb4;color:#173e32}.quick-chat button[data-say]{font-size:16px;line-height:1.45;min-height:48px}.quick-chat>div{font-size:16px}.quick-chat p{font-size:14px;color:#e0e9d8}.quick-chat small{font-size:13px;color:#e0e9d8}.compact-ui .hud-top{display:grid;position:absolute;top:calc(16px * var(--ui-scale));left:calc(16px * var(--ui-scale));right:calc(16px * var(--ui-scale));grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(10px * var(--ui-scale));pointer-events:none}.compact-ui .hud-top>*{pointer-events:auto;min-width:0}.compact-ui header{position:static;grid-column:1/-1;padding:calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));border-radius:calc(14px * var(--ui-scale));width:auto}.compact-ui header small{display:none}.compact-ui h1{font-size:calc(24px * var(--ui-scale));line-height:1.25;letter-spacing:-.5px;margin:0}.compact-ui header p{font-size:calc(14px * var(--ui-scale));line-height:1.45;max-width:none;margin:calc(4px * var(--ui-scale)) 0 0}.compact-ui #auto-panel{position:static;grid-column:1;width:auto;display:flex}.compact-ui #autowalk{font-size:calc(16px * var(--ui-scale));min-height:calc(52px * var(--ui-scale));padding:calc(9px * var(--ui-scale));border-radius:calc(14px * var(--ui-scale));border-width:calc(2px * var(--ui-scale))}.compact-ui .status{position:static;grid-column:2;width:auto;max-width:none;text-align:center;white-space:pre-line;font-size:calc(14px * var(--ui-scale));line-height:1.4;padding:calc(7px * var(--ui-scale));border-radius:calc(14px * var(--ui-scale));display:flex;align-items:center;justify-content:center}.compact-ui .route{position:static;grid-column:1/-1;width:auto;padding:calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));border-radius:calc(14px * var(--ui-scale))}.compact-ui .route ol{display:none}.compact-ui #route-toggle{font-size:calc(15px * var(--ui-scale));line-height:1.4;min-height:calc(32px * var(--ui-scale));padding:0 0 calc(7px * var(--ui-scale))}.compact-ui .route .progress{margin:0 0 calc(7px * var(--ui-scale));height:calc(3px * var(--ui-scale))}.compact-ui .route footer{margin:0;padding:0;border:0;font-size:calc(14px * var(--ui-scale));line-height:1.5}.compact-ui #vista-note,.compact-ui #toast{position:static;grid-column:1/-1;width:100%;max-width:none;transform:none;margin:0;padding:calc(10px * var(--ui-scale)) calc(13px * var(--ui-scale));font-size:calc(14px * var(--ui-scale));line-height:1.5;border-radius:calc(14px * var(--ui-scale))}.compact-ui #toast:not(.show){display:none}.compact-ui #vista-note{pointer-events:none}.compact-ui .bottom{bottom:calc(160px * var(--ui-scale) + env(safe-area-inset-bottom));left:50%;width:calc(100% - 152px * var(--ui-scale));max-width:calc(500px * var(--ui-scale))}.compact-ui #location{font-size:calc(14px * var(--ui-scale));line-height:1.45;margin:calc(8px * var(--ui-scale)) 0}.compact-ui #interact{font-size:calc(16px * var(--ui-scale));line-height:1.5;min-height:calc(48px * var(--ui-scale));min-width:0;max-width:100%;width:100%;padding:calc(11px * var(--ui-scale)) calc(12px * var(--ui-scale));border-radius:calc(26px * var(--ui-scale))}.compact-ui .hint{display:none}.compact-ui .tools{right:calc(16px * var(--ui-scale));bottom:calc(24px * var(--ui-scale) + env(safe-area-inset-bottom));gap:calc(8px * var(--ui-scale));flex-direction:column}.compact-ui .tools button{width:calc(48px * var(--ui-scale));height:calc(48px * var(--ui-scale));font-size:calc(21px * var(--ui-scale))}.compact-ui #joystick{display:block;left:calc(20px * var(--ui-scale));bottom:calc(28px * var(--ui-scale) + env(safe-area-inset-bottom));width:calc(108px * var(--ui-scale));height:calc(108px * var(--ui-scale))}.compact-ui #stick{width:calc(42px * var(--ui-scale));height:calc(42px * var(--ui-scale));left:calc(32px * var(--ui-scale));top:calc(32px * var(--ui-scale))}.compact-ui .intro article{width:min(calc(420px * var(--ui-scale)),calc(100% - 32px * var(--ui-scale)));max-height:calc(100dvh - 32px * var(--ui-scale));overflow-y:auto;padding:calc(24px * var(--ui-scale))}.compact-ui .intro h2{font-size:calc(30px * var(--ui-scale));line-height:1.3;margin:calc(12px * var(--ui-scale)) 0}.compact-ui .intro p{font-size:calc(16px * var(--ui-scale));line-height:1.6}.compact-ui .intro small{font-size:calc(12px * var(--ui-scale))}.compact-ui .intro .note{font-size:calc(14px * var(--ui-scale))}.compact-ui .primary,.compact-ui .secondary{font-size:calc(17px * var(--ui-scale));min-height:calc(48px * var(--ui-scale));padding:calc(12px * var(--ui-scale)) calc(18px * var(--ui-scale));margin-top:calc(10px * var(--ui-scale))}.compact-ui dialog{width:min(calc(420px * var(--ui-scale)),calc(100% - 32px * var(--ui-scale)));max-height:calc(100dvh - 32px * var(--ui-scale));padding:calc(20px * var(--ui-scale));font-size:calc(16px * var(--ui-scale))}.compact-ui dialog h2{font-size:calc(24px * var(--ui-scale))}.compact-ui dialog p,.compact-ui dialog button,.compact-ui .route-dialog ol{font-size:calc(16px * var(--ui-scale))}.compact-ui dialog button{min-height:calc(48px * var(--ui-scale));padding:calc(10px * var(--ui-scale))}.compact-ui .route-dialog li{padding:calc(8px * var(--ui-scale)) calc(4px * var(--ui-scale))}.compact-ui .quick-chat,.compact-ui .vendor-dialog{right:calc(16px * var(--ui-scale));bottom:calc(220px * var(--ui-scale));width:calc(100% - 32px * var(--ui-scale));max-height:calc(100dvh - 260px * var(--ui-scale));overflow-y:auto;padding:calc(18px * var(--ui-scale))}.compact-ui .quick-chat button[data-say],.compact-ui .vendor-dialog #vendor-choices :is(button,a){font-size:calc(16px * var(--ui-scale));line-height:1.5;min-height:calc(48px * var(--ui-scale));padding:calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale))}.compact-ui .quick-chat>div,.compact-ui .vendor-dialog p{font-size:calc(16px * var(--ui-scale));line-height:1.5}.compact-ui .quick-chat p,.compact-ui .quick-chat small,.compact-ui .vendor-dialog>small{font-size:calc(14px * var(--ui-scale));line-height:1.5}.compact-ui .dialog-heading h2{font-size:calc(24px * var(--ui-scale))}.compact-ui .dialog-heading small{font-size:calc(14px * var(--ui-scale))}.compact-ui.landscape-ui .hud-top{grid-template-columns:1.15fr 1fr .85fr}.compact-ui.landscape-ui header{grid-column:1;padding:calc(8px * var(--ui-scale))}.compact-ui.landscape-ui h1{font-size:calc(20px * var(--ui-scale))}.compact-ui.landscape-ui header p{display:none}.compact-ui.landscape-ui #auto-panel{grid-column:2}.compact-ui.landscape-ui .status{grid-column:3}.compact-ui.landscape-ui .route{grid-column:1;grid-row:2/4}.compact-ui.landscape-ui #vista-note,.compact-ui.landscape-ui #toast{grid-column:2/4}.compact-ui.landscape-ui .bottom{width:calc(240px * var(--ui-scale));bottom:calc(16px * var(--ui-scale));max-width:32vw}.compact-ui.landscape-ui .tools{flex-direction:row;bottom:calc(16px * var(--ui-scale));gap:calc(6px * var(--ui-scale))}.compact-ui.landscape-ui #joystick{left:calc(16px * var(--ui-scale));bottom:calc(16px * var(--ui-scale))}.compact-ui:not(.landscape-ui) header p{display:none}.compact-ui .route{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:calc(8px * var(--ui-scale));align-items:center}.compact-ui #route-toggle{grid-column:1;min-height:calc(44px * var(--ui-scale));padding:0;font-size:calc(15px * var(--ui-scale))}.compact-ui .route .progress{display:none}.compact-ui .route footer{grid-column:2;text-align:right;overflow-wrap:anywhere}.compact-ui.hiking header{display:none}.compact-ui.hiking .hud-top{top:calc(12px * var(--ui-scale));left:calc(12px * var(--ui-scale));right:calc(12px * var(--ui-scale));gap:calc(8px * var(--ui-scale))}.compact-ui.hiking .status{padding:calc(6px * var(--ui-scale)) calc(8px * var(--ui-scale));min-height:calc(52px * var(--ui-scale))}.compact-ui.hiking .route{padding:calc(4px * var(--ui-scale)) calc(12px * var(--ui-scale))}.compact-ui .bottom:has(#interact:disabled){display:none}.compact-ui #interact{word-break:keep-all}.compact-ui.hiking.landscape-ui .route{grid-column:1;grid-row:1}.compact-ui.hiking.landscape-ui #auto-panel{grid-column:2;grid-row:1}.compact-ui.hiking.landscape-ui .status{grid-column:3;grid-row:1}.graphics-dialog::backdrop{background:#102b23d9}.graphics-dialog h2{line-height:1.4}.graphics-dialog button{background:#f2ddb5;color:#254338;font-weight:650}@media(max-width:700px)and (orientation:landscape){.compact-ui.hiking.landscape-ui .bottom{bottom:calc(76px * var(--ui-scale) + env(safe-area-inset-bottom))}}