:root{--tone-blue:#175bc4;--tone-blue-bg:#eaf1ff;--tone-teal:#126b76;--tone-teal-bg:#e4f5f5;--tone-violet:#6946ae;--tone-violet-bg:#f1ebfc;--tone-green:#176c51;--tone-green-bg:#e6f4ec;--tone-amber:#89520c;--tone-amber-bg:#fff2da;--tone-red:#a32b34;--tone-red-bg:#fcecef;--tone-slate:#526372;--tone-slate-bg:#edf1f5}
[data-tone=blue]{--tone:var(--tone-blue);--tone-bg:var(--tone-blue-bg)}
[data-tone=teal]{--tone:var(--tone-teal);--tone-bg:var(--tone-teal-bg)}
[data-tone=violet]{--tone:var(--tone-violet);--tone-bg:var(--tone-violet-bg)}
[data-tone=green]{--tone:var(--tone-green);--tone-bg:var(--tone-green-bg)}
[data-tone=amber]{--tone:var(--tone-amber);--tone-bg:var(--tone-amber-bg)}
[data-tone=red]{--tone:var(--tone-red);--tone-bg:var(--tone-red-bg)}
[data-tone=slate]{--tone:var(--tone-slate);--tone-bg:var(--tone-slate-bg)}
.ui-icon{width:24px;height:24px;display:block;flex:none}
.icon-wrap{display:inline-flex;align-items:center;justify-content:center;flex:none;pointer-events:none}
.list-row>.icon-wrap{width:44px;height:44px;border-radius:14px;background:var(--tone-bg);color:var(--tone)}
.list-row>.icon-wrap+span{flex:1;min-width:0}
.primary,.secondary,.danger{display:flex;align-items:center;justify-content:center;gap:10px}
.primary>.icon-wrap,.secondary>.icon-wrap,.danger>.icon-wrap{width:22px;height:22px}
.secondary[data-tone]{background:var(--tone-bg);color:var(--tone)}
.icon-button{display:inline-flex;align-items:center;justify-content:center;color:var(--tone,var(--ink))}
nav button>.icon-wrap{width:44px;height:29px;border-radius:12px;color:var(--muted)}
nav button[aria-current=page]>.icon-wrap{background:var(--tone-blue-bg);color:var(--tone-blue)}
nav button[aria-current=page]{font-weight:650}
.device>.demo-line{display:flex;align-items:center;justify-content:center;gap:7px}
.demo-line>.icon-wrap .ui-icon{width:17px;height:17px}.demo-line>.icon-wrap{margin:0;font-size:inherit}
.quick-access{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 14px}
.quick-access button{border:1px solid var(--line);background:white;border-radius:16px;min-height:82px;padding:10px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--ink);font-size:12px;font-weight:550}
.quick-access .icon-wrap{width:36px;height:36px;border-radius:12px;background:var(--tone-bg);color:var(--tone)}
main:has(>.hero-card):not(:has(>.route-step))>.quick-access{order:4}
main:has(>.hero-card):not(:has(>.route-step))>.map{order:5}
main:has(>.hero-card):not(:has(>.route-step))>.card:not(.hero-card){order:6}
.hero-card .tag{background:#233f51;color:#d8f3ec}
.hero-card .tag .ui-icon{width:15px;height:15px}
.state-label{display:inline-flex;align-items:center;gap:6px}
.state-label .ui-icon{width:16px;height:16px}
.nav3d-views button{display:flex;align-items:center;justify-content:center;gap:5px}
.nav3d-views .ui-icon{width:18px;height:18px}
.mini-tools button{display:flex;align-items:center;gap:6px}.mini-tools .ui-icon{width:17px;height:17px}
.search-field{position:relative}.search-field>.ui-icon{position:absolute;left:13px;bottom:13px;color:var(--muted)}.search-field input{padding-left:45px}
.notice.warning>.ui-icon{display:inline-block;width:18px;height:18px;vertical-align:middle;margin-right:7px}
button.switch{min-width:50px;min-height:44px;background:transparent;position:relative;padding:10px 3px}
button.switch:after{content:"";position:absolute;inset:7px 0;border-radius:20px;background:#c3ced8;z-index:0}
button.switch:before{position:relative;z-index:1}
button.switch[aria-checked=true]{background:transparent}button.switch[aria-checked=true]:after{background:var(--blue)}
@media(max-width:360px){.quick-access{gap:6px}.quick-access button{font-size:11px}.nav3d-views button{gap:3px;font-size:11px}}
@media(max-height:560px) and (max-width:1000px){
 body{padding:0;display:block}.presentation{display:none}
 .device{width:100%;height:100dvh;max-height:none;min-height:0;border:0;border-radius:0;box-shadow:none}
 #sheet,#navigation{border-radius:0}.device>header{padding:8px 22px;min-height:60px}
 nav{padding:4px 10px max(4px,env(safe-area-inset-bottom))}
}
