:root{--ink:#24211e;--muted:#716c64;--subtle:#a19a91;--paper:#f7f1ed;--paper-soft:#fffaf6;--paper-deep:#ece2db;--line:rgba(58,49,43,0.13);--line-strong:rgba(58,49,43,0.22);--rose:#d9c4c9;--clay:#b98977;--moss:#72806f;--water:#8aaab0;--gold:#c7a15b;--shadow:0 28px 80px rgba(70,52,40,0.12);--radius-lg:28px;--radius-md:20px;--radius-sm:14px}*{box-sizing:border-box}html{background:var(--paper)}body,html{min-height:100%}body{margin:0;color:var(--ink);background:radial-gradient(circle at 14% 8%,rgba(217,196,201,.62),transparent 30%),radial-gradient(circle at 88% 18%,rgba(138,170,176,.22),transparent 28%),linear-gradient(135deg,#fbf7f4,#f3ebe5 48%,#f7f1ed);font-family:ui-serif,Songti SC,"Noto Serif CJK SC","Source Han Serif SC",Georgia,serif}button,input,select{font:inherit}button{color:inherit}.app-shell{position:relative;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;justify-items:center;padding:clamp(14px,2.5vw,28px);overflow:hidden}.landing-shell{grid-template-columns:minmax(280px,.86fr) minmax(520px,1.14fr);justify-items:stretch;gap:clamp(22px,4vw,58px);padding:clamp(18px,4vw,44px)}.landing-shell.is-advancing,.paper-grain{pointer-events:none}.paper-grain{position:fixed;inset:0;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.55) 1px,transparent 0),linear-gradient(90deg,rgba(65,46,34,.04) 1px,transparent 0);background-size:22px 22px;mix-blend-mode:multiply}.brand-panel,.flow-card{position:relative;z-index:1;border:1px solid rgba(255,255,255,.72);background:rgba(255,252,248,.66);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.brand-panel{width:100%;min-height:min(680px,calc(100dvh - clamp(36px, 8vw, 88px)));display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,6vw,72px);padding:clamp(22px,4vw,38px);border-radius:var(--radius-lg);box-shadow:0 18px 58px rgba(70,52,40,.09);animation:panel-in .62s ease both}.brand-lockup{display:flex;align-items:center;gap:14px;min-width:0}.brand-lockup img{width:64px;height:64px;border-radius:18px;box-shadow:0 10px 24px rgba(84,61,58,.15)}.brand-lockup span,.brand-lockup strong{display:block}.brand-lockup strong{font-size:24px;line-height:1.05;font-weight:600;letter-spacing:0}.brand-lockup span{margin-top:4px;color:var(--muted);font-size:13px;white-space:nowrap}.brand-copy{max-width:440px}.brand-copy h1{margin:12px 0 18px;font-size:clamp(44px,6vw,72px);line-height:1.04}.brand-copy p{max-width:390px;margin-bottom:0;font-size:15px}.progress-block{position:absolute;z-index:3;top:9px;left:clamp(22px,3vw,34px);right:clamp(22px,3vw,34px);pointer-events:none;opacity:.22}.progress-track{height:1px;overflow:hidden;border-radius:999px;background:rgba(36,33,30,.055)}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--moss),var(--water),var(--clay));transition:width .52s cubic-bezier(.2,.8,.2,1)}.flow-card{width:min(100%,1180px);min-height:0;height:min(760px,calc(100dvh - clamp(36px, 8vw, 88px)));padding:clamp(18px,2.8vw,32px);border-radius:var(--radius-lg);background:rgba(255,252,248,.74);box-shadow:var(--shadow);animation:card-in .7s ease both;overflow:hidden;transition:width .46s cubic-bezier(.2,.8,.2,1),height .46s cubic-bezier(.2,.8,.2,1),transform .46s cubic-bezier(.2,.8,.2,1),opacity .24s ease}.landing-shell .flow-card{width:100%}.landing-shell.is-advancing .brand-panel{animation:brand-away .3s ease both}.landing-shell.is-advancing .flow-card{animation:landing-card-away .3s ease both}.focused-shell .flow-card{width:min(100%,1240px);height:calc(100dvh - clamp(32px, 5vw, 56px));animation:focus-card-in .52s cubic-bezier(.2,.8,.2,1) both}.screen{height:100%;min-height:0;animation:soft-enter .42s ease both}.form-screen,.loading-screen,.map-screen,.name-screen,.palette-screen,.reading-screen{display:flex;flex-direction:column}.name-screen{justify-content:center;max-width:680px}.form-screen{justify-content:center;max-width:820px}.focused-shell .form-screen{width:min(100%,900px);margin:0 auto}.map-screen,.palette-screen,.reading-screen{max-width:100%}.focused-shell .loading-screen,.focused-shell .palette-screen,.focused-shell .reading-screen{width:100%}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--moss);font-size:12px;font-weight:800}h1,h2,h3,p{margin-top:0}h1{max-width:640px;margin-bottom:24px;font-size:clamp(38px,5vw,64px);line-height:1.08}h1,h2{font-weight:560}h2{margin-bottom:18px;font-size:clamp(27px,3.2vw,42px);line-height:1.12}h3{margin-bottom:10px;font-size:clamp(20px,2.2vw,28px);line-height:1.22;font-weight:560}p{color:var(--muted);line-height:1.72}.input-with-icon,.large-input{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.58);box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}.large-input{width:min(100%,540px);height:58px;padding:0 18px}.compact-input{height:44px;min-height:44px}.form-grid input,.input-with-icon input,.large-input input,.location-select-grid select{width:100%;min-width:0;border:0;outline:0;color:var(--ink);background:transparent}.large-input input{font-size:clamp(20px,2.6vw,28px)}.btn,.chip,.city-presets button,.ios-segmented button,.search-results button,.variant-switcher button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease}.btn{height:46px;min-width:116px;padding:0 18px;font-weight:700}.btn-compact{height:44px;min-width:88px;padding:0 14px}.btn-primary{border-color:rgba(36,33,30,.7);color:#fffaf4;background:#2f2b27;box-shadow:0 12px 26px rgba(47,43,39,.16)}.btn-quiet,.btn-secondary,.chip{background:rgba(255,255,255,.58)}.btn-quiet{color:var(--muted)}.btn:hover,.chip:hover,.city-presets button:hover,.ios-segmented button:hover,.search-results button:hover,.variant-switcher button:hover{transform:translateY(-1px)}.btn:disabled{cursor:not-allowed;opacity:.42;transform:none;box-shadow:none}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:14px;gap:14px;margin-top:14px}.form-grid label,.location-select-grid label{display:grid;grid-gap:10px;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.48)}.form-grid label span,.location-picker-head span,.location-select-grid label span{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.form-grid input,.location-select-grid select{min-height:38px;font-size:19px}.control-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}.chip{height:42px;padding:0 14px}.location-picker{display:grid;grid-gap:10px;gap:10px;margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.4)}.location-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.location-select-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px}.location-select-grid label{padding:12px;border-radius:18px;background:rgba(255,255,255,.5)}.location-select-grid select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.location-select-grid select:disabled{cursor:not-allowed;opacity:.52}.icon-button,.map-mini-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.map-mini-button{gap:6px;height:34px;padding:0 11px;border-radius:999px;color:var(--ink);background:rgba(255,255,255,.62);font-size:12px;font-weight:700}.icon-button:hover,.map-mini-button:hover{transform:translateY(-1px);background:rgba(255,255,255,.82)}.icon-button{width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.62)}.location-note{margin:0;font-size:12px;line-height:1.5}.location-note.error{color:#8a473c}.compact-readout{min-height:38px}.chip.selected,.city-presets button.selected,.ios-segmented button.active,.variant-switcher button.active{border-color:rgba(114,128,111,.42);background:rgba(114,128,111,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.58)}.ios-segmented{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:18px;background:rgba(36,33,30,.055)}.ios-segmented.compact{width:148px}.ios-segmented button{height:34px;min-width:0;padding:0 12px;border-color:transparent;border-radius:14px;background:transparent;font-size:13px;font-weight:700}.variant-switcher{display:flex;flex-wrap:wrap;gap:8px}.variant-switcher button{min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.48);color:var(--muted);font-size:12px;font-weight:700}.screen-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.screen-head p{max-width:260px;margin-bottom:0;font-size:14px}.map-shell{position:relative;display:grid;grid-gap:10px;gap:10px;min-height:0}.map-modal{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:clamp(14px,3vw,34px)}.map-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(36,33,30,.24);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.map-modal-card{position:relative;z-index:1;width:min(920px,100%);max-height:min(92dvh,760px);display:grid;grid-gap:14px;gap:14px;overflow:auto;padding:clamp(14px,2.4vw,22px);border:1px solid rgba(255,255,255,.72);border-radius:var(--radius-lg);background:rgba(255,252,248,.92);box-shadow:0 28px 90px rgba(36,33,30,.24)}.map-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.map-modal-head h3{margin:7px 0 0}.map-card{position:relative;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.48)}.map-search{position:absolute;z-index:3;top:20px;left:20px;right:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:8px;gap:8px}.input-with-icon{padding:0 13px}.search-results{position:absolute;z-index:4;top:72px;left:20px;right:20px;display:grid;grid-gap:6px;gap:6px;max-height:172px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,252,248,.92);box-shadow:0 18px 40px rgba(70,52,40,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.search-results button{justify-content:flex-start;min-height:38px;padding:8px 10px;background:rgba(255,255,255,.62);text-align:left}.search-results span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.map-frame{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#e8e2da}.map-loading,.maplibre-map{width:100%;height:clamp(300px,42dvh,410px)}.map-modal .map-loading,.map-modal .maplibre-map{height:clamp(330px,52dvh,480px)}.map-loading{position:absolute;z-index:2;inset:0;display:grid;place-items:center;color:var(--muted);background:linear-gradient(135deg,rgba(255,250,246,.92),rgba(236,226,219,.72))}.maplibregl-canvas{filter:saturate(.56) sepia(.06) brightness(1.02) contrast(.92)}.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{opacity:.75}.freeflow-map-marker{position:relative;width:30px;height:30px;border:1px solid rgba(36,33,30,.36);border-radius:999px;background:rgba(255,252,248,.86);box-shadow:0 10px 28px rgba(36,33,30,.22)}.freeflow-map-marker span{position:absolute;inset:8px;border-radius:999px;background:var(--clay)}.city-presets{display:flex;flex-wrap:wrap;gap:8px}.city-presets button{height:34px;padding:0 12px;background:rgba(255,255,255,.54);font-size:13px}.location-readout{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content;max-width:100%;padding:10px 12px;border:1px solid rgba(114,128,111,.28);border-radius:var(--radius-sm);background:rgba(114,128,111,.09)}.location-readout small{color:var(--muted)}.loading-screen{justify-content:center}.stream-panel{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;grid-gap:clamp(18px,4vw,42px);gap:clamp(18px,4vw,42px);min-height:min(460px,100%)}.stream-orb{width:108px;height:108px;display:grid;place-items:center;border-radius:28px;background:rgba(255,255,255,.48);box-shadow:0 18px 52px rgba(84,61,58,.16);animation:breathe 2.3s ease-in-out infinite;overflow:hidden}.stream-orb img{width:84px;height:84px;border-radius:20px}.stream-copy{min-width:0}.stream-copy h2{margin:8px 0 14px}.placeholder-lines,.recommendation-skeleton{display:grid;grid-gap:10px;gap:10px;max-width:680px}.placeholder-lines span,.recommendation-skeleton span{height:14px;border-radius:999px;background:linear-gradient(90deg,rgba(36,33,30,.08),rgba(255,255,255,.54),rgba(36,33,30,.08));background-size:180% 100%;animation:shimmer 1.6s ease-in-out infinite}.placeholder-lines span:nth-child(2),.recommendation-skeleton span:nth-child(2){width:82%}.placeholder-lines span:nth-child(3),.recommendation-skeleton span:nth-child(3){width:64%}.recommendation-preview{max-width:680px;max-height:156px;margin:0;padding:13px 14px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);background:rgba(255,255,255,.42);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.65;white-space:pre-wrap;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}.reading-layout{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);grid-gap:18px;gap:18px;min-height:0;flex:1 1}.reading-card,.reading-side{min-height:0;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.44)}.reading-side{padding:18px;overflow:hidden}.reading-card{padding:18px 20px;overflow:auto}.reading-head{display:grid;grid-gap:8px;gap:8px}.reading-head h2{margin-bottom:0;font-size:clamp(24px,2.9vw,38px)}.demo-pill{width:-moz-fit-content;width:fit-content;padding:7px 10px;border-radius:999px;color:var(--moss);background:rgba(114,128,111,.12);font-size:12px}.pillar-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:9px;gap:9px;margin:16px 0}.pillar-strip div{min-height:74px;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(247,241,237,.58)}.pillar-strip small{display:block;color:var(--muted);font-size:12px}.pillar-strip strong{display:block;margin-top:8px;font-size:clamp(22px,2.5vw,30px);font-weight:560}.reading-text{padding-top:2px}.reading-text.compact{max-height:210px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}.reading-text h3{margin-top:18px}.reading-text h3:first-child{margin-top:0}.reading-text blockquote,.reading-text p{max-width:760px;margin-bottom:12px;font-size:16px}.reading-text blockquote{padding:12px 14px;border-left:3px solid var(--moss);border-radius:0 14px 14px 0;color:var(--muted);background:rgba(114,128,111,.08)}.list-line:before{content:"· "}.dayun-strip{display:flex;flex-wrap:wrap;gap:7px}.dayun-strip span{padding:7px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;background:rgba(255,255,255,.38)}.bracelet-page{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);grid-gap:12px;gap:12px;min-height:0;flex:1 1}.result-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:18px;gap:18px;align-items:start}.result-hero h2{margin:4px 0 8px;font-size:clamp(27px,3.4vw,42px)}.result-hero p{max-width:680px;margin-bottom:0}.useful-gods{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.result-side{display:grid;justify-items:end;grid-gap:8px;gap:8px}.avoid-line,.quiet-tip,.result-status,.useful-gods span{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.48);color:var(--muted);font-size:13px}.result-status{border-color:rgba(114,128,111,.26);background:rgba(114,128,111,.1);color:var(--moss)}.palette-summary-row{display:flex;flex-wrap:wrap;gap:8px}.palette-focus-card{display:grid;grid-template-columns:minmax(180px,.9fr) 236px minmax(250px,1.12fr);align-items:center;grid-gap:18px;gap:18px;min-height:0;padding:clamp(14px,2vw,20px);border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.44);overflow:hidden}.palette-copy h3{margin:7px 0 9px;font-size:clamp(22px,2.6vw,31px)}.palette-copy p{margin-bottom:0}.palette-visual{display:grid;place-items:center;min-height:236px}.bracelet-ring{position:relative;width:236px;height:236px;display:grid;place-items:center}.bracelet-ring>span{position:absolute;width:23px;height:23px;border-radius:999px;box-shadow:inset 5px 6px 10px rgba(255,255,255,.32),inset -5px -7px 12px rgba(0,0,0,.14),0 8px 16px rgba(53,42,35,.12)}.bracelet-center{width:106px;height:106px;display:grid;place-items:center;border:1px solid var(--line);border-radius:999px;color:var(--moss);background:rgba(247,241,237,.72)}.ratio-list{display:grid;grid-gap:8px;gap:8px;max-height:266px;overflow:auto}.ratio-row{display:grid;grid-template-columns:24px minmax(82px,.75fr) minmax(120px,1fr);align-items:center;grid-gap:9px;gap:9px;padding:9px;border-radius:16px;background:rgba(247,241,237,.62)}.ratio-row small,.ratio-row strong{display:block}.ratio-row strong{font-size:15px;font-weight:700}.ratio-row p,.ratio-row small{color:var(--muted);font-size:12px}.ratio-row p{margin:0;line-height:1.45}.swatch{width:21px;height:21px;border:1px solid rgba(36,33,30,.14);border-radius:999px}.error-line{position:absolute;z-index:5;top:16px;left:16px;right:16px;padding:11px 13px;border:1px solid rgba(164,78,64,.28);border-radius:var(--radius-sm);color:#7f3b31;background:rgba(255,244,240,.94);box-shadow:0 12px 32px rgba(127,59,49,.12)}@keyframes panel-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes card-in{0%{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes brand-away{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateX(-18px) scale(.985)}}@keyframes landing-card-away{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(10px) scale(.992)}}@keyframes focus-card-in{0%{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes soft-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media (max-width:900px){.app-shell{grid-template-columns:1fr;align-items:start;justify-items:stretch;gap:14px;padding:clamp(14px,3vw,24px);overflow:auto}.brand-panel{min-height:0;gap:18px;padding:18px}.brand-copy{display:none}.brand-lockup img{width:46px;height:46px;border-radius:14px}.brand-lockup strong{font-size:21px}.landing-shell .flow-card{height:min(760px,calc(100dvh - 150px))}.focused-shell{align-items:center}.focused-shell .flow-card{width:min(100%,1180px);height:calc(100dvh - clamp(28px, 6vw, 48px));justify-self:center}.palette-focus-card,.reading-layout{grid-template-columns:1fr}.reading-layout{grid-template-rows:auto minmax(0,1fr)}.reading-side{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1fr);grid-gap:12px;gap:12px}.pillar-strip{margin:0}.dayun-strip{grid-column:1/-1}.palette-focus-card{overflow:auto}.ratio-list{max-height:190px}}@media (max-width:560px){.app-shell{gap:10px;padding:10px}.brand-panel,.flow-card{border-radius:22px}.brand-panel{padding:13px}.brand-lockup span{display:none}.landing-shell .flow-card{height:calc(100dvh - 156px);min-height:0;max-height:none;overflow:hidden;padding:16px}.screen{min-height:0;overflow:auto}.focused-shell .flow-card{height:calc(100dvh - 20px);padding:16px}.progress-block{top:7px;left:18px;right:18px}h1{font-size:39px}h2{font-size:28px}.form-grid,.location-select-grid,.map-search,.reading-side,.result-hero,.stream-panel{grid-template-columns:1fr}.location-picker-head{align-items:flex-start;flex-direction:column}.map-search,.search-results{position:static;margin-bottom:10px}.search-results{max-height:170px}.map-loading,.map-modal .map-loading,.map-modal .maplibre-map,.maplibre-map{height:320px}.map-modal-card{max-height:92dvh;padding:12px}.reading-card{max-height:420px}.useful-gods{justify-content:flex-start}.result-side{justify-items:start}.ios-segmented{width:100%;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}.variant-switcher{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.variant-switcher button{flex:0 0 auto}.palette-visual{min-height:214px}.bracelet-ring{width:214px;height:214px;transform:scale(.92)}.ratio-row{grid-template-columns:24px minmax(0,1fr)}.ratio-row p{grid-column:2}.actions{width:100%}.btn{flex:1 1 150px}}