:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--brand-h: 220;--brand-s: 88%;--brand-l: 56%;--accent: hsl(var(--brand-h) var(--brand-s) var(--brand-l));--accent-weak: hsl(var(--brand-h) var(--brand-s) 60% / .12);--accent-weak-2: hsl(var(--brand-h) var(--brand-s) 60% / .18);--ring: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / .45);--bg: hsl(210 40% 98%);--bg-2:hsl(210 38% 96%);--card:hsl(0 0% 100% / .8);--border: hsl(215 20% 70% / .35);--text: hsl(222 47% 11%);--muted: hsl(215 20% 45%);--radius: 16px;--radius-sm: 12px;--shadow-1: 0 6px 18px hsl(220 40% 20% / .07);--shadow-2: 0 18px 40px hsl(220 40% 20% / .1);--gap: 14px;--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;--fs-xs: clamp(12px, .75rem + .2vw, 13px);--fs-sm: clamp(13px, .8rem + .3vw, 14px);--fs-md: clamp(15px, .9rem + .4vw, 16px);--fs-lg: clamp(18px, 1rem + .8vw, 20px);--fs-xl: clamp(22px, 1.2rem + 1.2vw, 28px)}@media (prefers-color-scheme: dark){:root{--bg: hsl(222 30% 6%);--bg-2:hsl(222 33% 8%);--card:hsl(222 40% 8% / .72);--border: hsl(220 12% 60% / .18);--text: hsl(210 40% 96%);--muted: hsl(215 18% 72%);--accent: hsl(200 90% 60%);--accent-weak: hsl(200 90% 60% / .12);--accent-weak-2: hsl(200 90% 60% / .2);--ring: hsl(200 90% 60% / .45);--shadow-1: 0 8px 22px hsl(220 80% 2% / .35);--shadow-2: 0 22px 60px hsl(220 80% 2% / .45)}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);color:var(--text);background:radial-gradient(1200px 800px at 10% -10%,var(--accent-weak),transparent 60%),radial-gradient(900px 700px at 100% 10%,var(--accent-weak-2),transparent 55%),linear-gradient(180deg,var(--bg),var(--bg-2));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wx-app{--vh: 1vh;min-height:calc(var(--vh) * 100);padding:calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 16px);max-width:980px;margin-inline:auto;display:grid;gap:20px}.wx-header{display:grid;gap:6px}.wx-title{margin:0;font-size:var(--fs-xl);letter-spacing:-.02em;font-weight:800}.wx-instruction{margin:0;color:var(--muted);font-size:var(--fs-sm)}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);backdrop-filter:saturate(120%) blur(8px);-webkit-backdrop-filter:saturate(120%) blur(8px)}.wx-form{display:grid;gap:var(--gap);padding:14px;composes:card}.wx-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1)}.field{display:grid;gap:6px}.field label{font-weight:700;font-size:var(--fs-sm);color:var(--muted)}.field input{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff9;color:var(--text);font-size:var(--fs-md);outline:none;transition:box-shadow .2s ease,border-color .2s ease,transform .05s ease}@media (prefers-color-scheme: dark){.field input{background:#0f152480}}.field input:hover{border-color:var(--accent)}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}.actions{display:grid;grid-template-columns:1fr auto;gap:var(--gap)}@media (min-width: 560px){.wx-form{grid-template-columns:1fr 1fr 1fr auto;align-items:end}.actions{grid-template-columns:auto auto;justify-self:end}}.btn{appearance:none;border:none;border-radius:14px;min-height:48px;padding:12px 16px;font-weight:800;font-size:var(--fs-md);cursor:pointer;transition:transform .06s ease,box-shadow .15s ease,background .2s ease,opacity .2s ease;will-change:transform}.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.btn[disabled]{opacity:.6;cursor:not-allowed}.btn-primary{color:#fff;background:linear-gradient(180deg,hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 6%)),var(--accent)) padding-box,radial-gradient(120% 180% at 30% -20%,var(--accent),transparent 60%) border-box;box-shadow:0 6px 14px hsl(var(--brand-h) 70% 40% / .25),var(--shadow-2)}.btn-primary:hover{box-shadow:0 10px 22px hsl(var(--brand-h) 70% 40% / .3),var(--shadow-2)}.btn-primary:active{transform:translateY(1px)}.btn-toggle{background:var(--accent-weak);color:var(--text);font-variant-numeric:tabular-nums;width:64px;box-shadow:inset 0 0 0 1px var(--border)}.btn-toggle[aria-pressed=true]{background:hsl(var(--brand-h) var(--brand-s) var(--brand-l) / .16);box-shadow:inset 0 0 0 2px var(--accent)}.wx-info{margin:0;color:var(--muted);font-size:var(--fs-sm)}.wx-error{margin:0;color:#e23636;background:#e236361f;padding:10px 12px;border:1px solid hsl(0 75% 55% / .35);border-radius:12px;font-size:var(--fs-sm)}.summary{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:16px}.summary p{margin:0 0 8px;font-size:var(--fs-md)}.summary h3{margin:10px 0;font-size:var(--fs-lg)}.packing-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}.packing-list li{position:relative;padding-left:18px;font-size:var(--fs-sm);color:var(--text)}.packing-list li:before{content:"•";position:absolute;left:0;top:0;color:var(--accent);line-height:1}.weather-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:14px;display:grid;gap:14px;position:relative;overflow:clip}.weather-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--accent-weak),transparent 60%);pointer-events:none}.card-head{display:grid;gap:6px;z-index:1}.card-head .date{margin:0;font-size:var(--fs-lg);font-weight:800}.tip{display:block;font-size:var(--fs-sm);color:var(--muted)}.hourly-row{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:10px;overflow-x:auto;padding:2px 4px 6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent 0,black 28px,black calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,black 28px,black calc(100% - 28px),transparent 100%);z-index:1}.hourly-row::-webkit-scrollbar{height:10px}.hourly-row::-webkit-scrollbar-thumb{background:#5c6f8a59;border-radius:999px}.hourly-chip{scroll-snap-align:start;min-width:104px;padding:10px 12px;text-align:center;border-radius:12px;border:1px solid var(--border);background:#ffffff8c;backdrop-filter:saturate(120%) blur(6px);-webkit-backdrop-filter:saturate(120%) blur(6px);transition:transform .12s ease,box-shadow .18s ease,border-color .15s ease;box-shadow:0 2px 10px #1f2c470f}@media (prefers-color-scheme: dark){.hourly-chip{background:#0e15258c}}.hourly-chip:hover{transform:translateY(-2px);box-shadow:0 8px 20px #1f2c4724;border-color:var(--accent)}.hourly-chip .hour{margin:0 0 4px;font-weight:700;font-size:var(--fs-xs);color:var(--muted)}.hourly-chip .temp{margin:4px 0;font-size:clamp(18px,1rem + .8vw,22px);font-weight:900;letter-spacing:.01em}.hourly-chip .desc,.hourly-chip .details{margin:0;font-size:var(--fs-xs);color:var(--muted)}.chart{position:relative;height:clamp(180px,42vw,280px);width:100%;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,var(--accent-weak-2),transparent 60%),repeating-linear-gradient(180deg,transparent 0 28px,hsl(215 20% 70% / .12) 28px 29px);border:1px solid var(--border);box-shadow:inset 0 -1px #ffffff4d}@media (min-width: 820px){.wx-app{gap:24px}.wx-form,.summary,.weather-card{padding:18px}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.summary{position:relative;padding:20px 18px 18px;border-radius:18px;border:1px solid var(--border);background:radial-gradient(120% 140% at 0% -20%,var(--accent-weak-2),transparent 55%) padding-box,linear-gradient(180deg,var(--card),color-mix(in oklab,var(--card) 75%,transparent)) padding-box,linear-gradient(135deg,var(--accent),transparent 35%,transparent 65%,var(--accent)) border-box;box-shadow:0 1px #fff9 inset,var(--shadow-1)}@media (prefers-color-scheme: dark){.summary{background:radial-gradient(120% 140% at 0% -20%,var(--accent-weak-2),transparent 55%) padding-box,linear-gradient(180deg,#0f1524bf,#0c111db3) padding-box,linear-gradient(135deg,var(--accent),transparent 35%,transparent 65%,var(--accent)) border-box;box-shadow:0 1px #ffffff0a inset,var(--shadow-2)}}.summary>p:first-child{margin:0 0 10px;display:grid;grid-auto-flow:column;align-items:center;gap:10px;font-size:var(--fs-md);line-height:1.35}.summary>p:first-child:before{content:"🧳";display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:color-mix(in oklab,var(--accent) 18%,transparent);box-shadow:inset 0 0 0 1px var(--border);font-size:18px}.summary h3{margin:6px 0 14px;font-size:clamp(17px,1rem + .4vw,19px);font-weight:800;position:relative}.summary h3:after{content:"";display:block;height:3px;width:56px;margin-top:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.6}.packing-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:10px 28px}@media (min-width: 560px){.packing-list{grid-template-columns:1fr 1fr}}.packing-list li{position:relative;padding-left:22px;font-size:var(--fs-sm);line-height:1.35}.packing-list li:before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,white 0 35%,transparent 36%),var(--accent);box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 40%,transparent),0 2px 6px #1f2c472e}@media (hover: hover){.summary:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}}@media print{.summary{background:#fff;box-shadow:none;border-color:#ddd}.packing-list{grid-template-columns:1fr 1fr}}