:root{color:#f5efe5;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#12100e;font-family:ui-rounded,SF Pro Rounded,Avenir Next,Avenir,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#12100e;min-height:100%}body{min-width:320px;min-height:100%;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:3px;outline:3px solid #f4b64e}.app-shell{background:#12100e;min-height:100dvh;position:relative;overflow:hidden}.app{z-index:1;width:min(100%,760px);min-height:100dvh;margin:0 auto;padding:18px 18px 28px;position:relative}.ambient{pointer-events:none;filter:blur(24px);opacity:.26;border-radius:999px;width:420px;height:420px;position:fixed}.ambient-one{background:#a45b2d;top:-170px;right:-170px}.ambient-two{opacity:.16;background:#7a6244;bottom:-120px;left:-250px}.topbar{justify-content:space-between;align-items:center;gap:12px;min-height:46px;display:flex}.wordmark,.share-button,.nav-item,.style-chip,.step-tab,.next-step,.quiz-options button,.choice,.secondary-button{color:inherit;background:0 0;border:0}.wordmark{color:#fff8ef;letter-spacing:-.02em;align-items:center;gap:9px;padding:2px 0;font-family:Georgia,Times New Roman,serif;font-size:17px;display:inline-flex}.wordmark-mark{color:#e9b573;border:1px solid #c58b50;border-radius:50%;place-items:center;width:27px;height:27px;font-size:15px;font-style:italic;display:grid}.share-button{color:#f6d9ac;background:#fff6e814;border-radius:999px;align-items:center;gap:6px;min-height:44px;padding:0 12px;font-size:13px;font-weight:700;display:inline-flex}.share-button span:first-child{font-size:18px;line-height:1}.navigation{background:#ffffff09;border:1px solid #f8e9d614;border-radius:14px;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;margin:18px 0 0;padding:4px;display:grid}.nav-item{color:#b6aaa0;border-radius:10px;min-height:40px;font-size:13px;font-weight:750}.nav-item.active{color:#19120d;background:#edc487;box-shadow:0 2px 12px #0003}.toast{z-index:10;color:#fff7e9;text-align:center;background:#292018;border:1px solid #f4b64e80;border-radius:12px;width:min(100% - 32px,430px);margin:0;padding:12px 16px;font-size:13px;position:fixed;top:82px;left:50%;transform:translate(-50%);box-shadow:0 12px 35px #00000059}.hero{padding:62px 6px 56px;position:relative}.eyebrow{color:#eab66d;letter-spacing:.14em;text-transform:uppercase;margin:0 0 9px;font-size:11px;font-weight:800}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Georgia,Times New Roman,serif;font-weight:400}.hero h1{color:#fff7ee;letter-spacing:-.06em;max-width:560px;margin-bottom:18px;font-size:clamp(45px,12vw,76px);line-height:.98}.hero h1 em{color:#e7a957;font-weight:400}.hero-copy{color:#c8b9aa;max-width:415px;margin-bottom:27px;font-size:16px;line-height:1.55}.hero-actions{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.primary-button{color:#1b120a;background:#f0bd72;border:0;border-radius:14px;justify-content:center;align-items:center;gap:17px;min-height:48px;padding:0 20px;font-size:14px;font-weight:850;display:inline-flex;box-shadow:0 8px 24px #b3632440}.primary-button span{font-size:20px;line-height:1}.age-note{color:#8f8378;font-size:12px}.hero-orbit{color:#a88a68;border:1px solid #efb7633d;border-radius:50%;width:138px;height:138px;font-family:Georgia,Times New Roman,serif;font-size:12px;font-style:italic;position:absolute;top:25px;right:8px}.hero-orbit:after{content:"";border:1px dashed #edb56338;border-radius:50%;position:absolute;inset:19px}.hero-orbit span{position:absolute}.hero-orbit span:first-child{top:-6px;left:51px}.hero-orbit span:nth-child(2){bottom:16px;left:-8px}.hero-orbit span:nth-child(3){bottom:30px;right:-10px}.hero-orbit b{color:#edbd76;font-size:31px;font-weight:400;position:absolute;top:49px;left:52px}.section-block,.wheel-section{border-top:1px solid #fff1de1a;margin-top:10px;padding:28px 0}.section-heading{justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.section-heading h2,.label-card h2,.practical-card h2{color:#fff7ef;letter-spacing:-.045em;margin:0;font-size:clamp(31px,7vw,42px);line-height:1}.count-badge,.wheel-hint{color:#b8a79a;border:1px solid #ffedd324;border-radius:99px;flex:none;padding:7px 10px;font-size:11px}.section-intro{color:#b9aca1;max-width:500px;margin:18px 0 21px;font-size:15px;line-height:1.55}.style-rail{scrollbar-width:none;gap:8px;padding:3px 1px 14px;display:flex;overflow-x:auto}.style-rail::-webkit-scrollbar{display:none}.style-chip{color:#c9bbb0;background:#ffffff06;border:1px solid #ffedd321;border-radius:99px;flex:none;align-items:center;gap:7px;min-height:42px;padding:0 13px;font-size:13px;display:inline-flex}.style-chip.selected{color:#fff8ef;background:#dc9b4921;border-color:#eeb96fa6}.style-dot{border-radius:50%;width:8px;height:8px}.style-card{background:linear-gradient(130deg, color-mix(in srgb, var(--accent) 19%, #211913) 0%, #ffffff08 70%);border:1px solid #ffebd024;border-radius:20px;padding:23px;position:relative;overflow:hidden}.style-card:after{border:1px solid color-mix(in srgb, var(--accent) 65%, transparent);content:"";opacity:.7;border-radius:50%;width:140px;height:140px;position:absolute;top:-45px;right:-52px}.style-card-top{color:#cabbaa;justify-content:space-between;gap:10px;font-size:12px;display:flex}.style-cue{color:#f2c580;font-style:italic}.style-card h3{color:#fff8ef;letter-spacing:-.045em;margin:18px 0 8px;font-size:37px}.style-card>p{color:#d4c7bb;max-width:470px;margin-bottom:16px;font-size:15px;line-height:1.55}.note-row{flex-wrap:wrap;gap:7px;display:flex}.note-row span{color:#efd4ad;background:#ffffff0b;border:1px solid #ffeed926;border-radius:99px;padding:6px 9px;font-size:12px}.style-card .serving-tip{color:#c6b9ad;border-top:1px solid #ffeed91f;margin:20px 0 0;padding-top:15px;font-size:13px}.serving-tip b{color:#f7c87f}.label-card,.practical-card{background:#ffffff09;border:1px solid #ffecd51c;border-radius:20px;gap:25px;margin:28px 0 10px;padding:25px;display:grid}.label-card dl{gap:0;margin:0;display:grid}.label-card dl div{border-top:1px solid #fff0da17;padding:15px 0}.label-card dt{color:#f1c485;margin-bottom:4px;font-size:13px;font-weight:800}.label-card dd{color:#b9aca1;margin:0;font-size:13px;line-height:1.5}.taste-hero{padding:50px 5px 35px}.taste-hero h1,.journal-view h1{color:#fff8ef;letter-spacing:-.055em;max-width:560px;margin:0 0 15px;font-size:clamp(43px,11vw,68px);line-height:.99}.taste-hero>p:last-child{color:#c3b6ab;max-width:470px;margin:0;font-size:16px;line-height:1.55}.steps{padding:6px 0 30px}.step-tabs{border:1px solid #ffeeda1a;border-radius:14px;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:12px;padding:4px;display:grid}.step-tab{color:#aa9c91;border-radius:10px;min-height:52px;padding:6px 4px;font-size:13px;font-weight:800}.step-tab span{color:#6e5e51;margin-bottom:2px;font-size:10px;display:block}.step-tab.active{color:#20160d;background:#eac080}.step-tab.active span{color:#795126}.active-step{background:#2b2119;border-radius:20px;min-height:290px;padding:29px 25px;position:relative;overflow:hidden}.active-step:after{content:"";border:1px solid #edb56245;border-radius:50%;width:230px;height:230px;position:absolute;bottom:-83px;right:-72px}.big-step-number{color:#efb86a3d;font-family:Georgia,Times New Roman,serif;font-size:80px;line-height:.8;position:absolute;top:16px;right:20px}.active-step h2{z-index:1;color:#fff5ea;letter-spacing:-.04em;max-width:510px;margin:0;font-size:clamp(27px,6vw,39px);line-height:1.11;position:relative}.step-prompt{z-index:1;color:#c5b4a6;max-width:430px;margin:22px 0 20px;font-size:14px;line-height:1.45;position:relative}.step-prompt b{color:#f4ce97;font-weight:650}.next-step{z-index:1;color:#f4c682;align-items:center;gap:8px;min-height:44px;padding:0;font-size:13px;font-weight:800;display:inline-flex;position:relative}.next-step span{font-size:18px}.wheel-section{margin-top:3px}.wheel-layout{align-items:center;gap:25px;display:grid}.flavour-wheel{aspect-ratio:1;background:conic-gradient(from -15deg,#557477 0deg 30deg,#4b6873 30deg 60deg,#5b8790 60deg 90deg,#b3be77 90deg 120deg,#d1a452 120deg 150deg,#cb8054 150deg 180deg,#a85d42 180deg 210deg,#8d5742 210deg 240deg,#945249 240deg 270deg,#997152 270deg 300deg,#8d9576 300deg 330deg,#a1816e 330deg 360deg);border:17px solid #272019;border-radius:50%;width:min(76vw,360px);margin:9px auto 0;position:relative;box-shadow:inset 0 0 0 1px #fffaee21,0 16px 45px #00000040}.flavour-wheel:before{content:"";border:1px solid #fff6e761;border-radius:50%;position:absolute;inset:45px}.flavour-wheel:after{content:"";background:repeating-conic-gradient(from -15deg,#0000 0deg 29.2deg,#251a1475 29.5deg 30deg);border-radius:50%;position:absolute;inset:0}.wheel-inner{z-index:2;color:#fff5e8;text-align:center;background:#2d2219;border:1px solid #faf0e159;border-radius:50%;place-items:center;width:93px;height:93px;font-family:Georgia,Times New Roman,serif;font-size:16px;font-style:italic;line-height:.9;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 8px #2d22194d}.wheel-note{z-index:3;width:0;height:0;transform:rotate(var(--angle)) translateY(min(-28vw, -132px)) rotate(var(--reverse-angle));transform-origin:0 0;display:block;position:absolute;top:50%;left:50%}.wheel-note i{color:#1d1712;text-align:center;text-shadow:0 1px #ffffff29;width:69px;margin:-8px 0 0 -34px;font-size:clamp(9px,2.5vw,12px);font-style:normal;font-weight:850;line-height:1.1;display:block}.wheel-key{gap:7px;max-width:400px;margin:0 auto;display:grid}.wheel-key p{color:#ae9f92;align-items:baseline;gap:6px;margin:0;font-size:12px;display:flex}.wheel-key b{color:#e9d3b3;font-weight:800}.key-dot{border-radius:50%;flex:none;width:8px;height:8px;display:inline-block}.key-dot.warm{background:#c9744e}.key-dot.bright{background:#b4b87a}.key-dot.deep{background:#527579}.key-dot.grain{background:#a27e56}.practical-card{margin-top:28px}.practical-grid{gap:13px;display:grid}.practical-grid p{border-top:1px solid #fff0da17;gap:4px;margin:0;padding-top:13px;display:grid}.practical-grid b{color:#f0c582;font-family:Georgia,Times New Roman,serif;font-size:20px;font-weight:400}.practical-grid span{color:#b9aca1;font-size:13px;line-height:1.45}.quiz-card{color:#251910;background:#ecc281;border-radius:20px;margin:29px 0 8px;padding:27px 23px}.quiz-header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.quiz-card .eyebrow{color:#785224;margin-bottom:0}.quiz-header>span{color:#795124;font-size:12px;font-weight:800}.quiz-progress{background:#5d381730;border-radius:99px;width:100%;height:5px;margin:16px 0 23px;overflow:hidden}.quiz-progress span{border-radius:inherit;background:#6b4423;height:100%;transition:width .2s;display:block}.quiz-card h2{letter-spacing:-.045em;margin:0 0 20px;font-size:clamp(29px,7vw,40px);line-height:1.04}.quiz-options{gap:9px;display:grid}.quiz-options button{color:#3d2817;text-align:left;background:#fffaef54;border:1px solid #56311240;border-radius:13px;justify-content:space-between;align-items:center;gap:12px;min-height:55px;padding:12px 13px 12px 15px;font-size:13px;font-weight:720;line-height:1.25;display:flex}.quiz-options button span{flex:none;font-size:19px}.quiz-result{text-align:center}.result-dot{border:3px solid #fff9edb3;border-radius:50%;width:18px;height:18px;margin:18px auto 10px;display:block;box-shadow:0 0 0 3px #50321921}.quiz-result h2{margin-bottom:8px}.quiz-result>p:not(.eyebrow){color:#5f4126;max-width:430px;margin:0 auto 18px;font-size:14px;line-height:1.45}.quiz-result .note-row{justify-content:center}.quiz-result .note-row span{color:#5f3d21;background:#fffcf352;border-color:#4d2d1338}.secondary-button{color:#51331c;border:1px solid #53301359;border-radius:12px;min-height:44px;margin-top:22px;padding:0 14px;font-size:13px;font-weight:850}.journal-view{padding:50px 5px 20px}.journal-lede{color:#c3b6ab;max-width:480px;margin:0 0 29px;font-size:16px;line-height:1.55}.journal-form{background:#ffffff09;border:1px solid #ffefdb1f;border-radius:20px;gap:17px;padding:22px;display:grid}.journal-form label,.water-choice{color:#ebd2ae;gap:8px;font-size:12px;font-weight:800;display:grid}.journal-form input,.journal-form textarea{color:#fff5e8;background:#110c0980;border:1px solid #ffecd629;border-radius:12px;width:100%;font-size:15px;font-weight:450}.journal-form input{min-height:48px;padding:0 13px}.journal-form textarea{resize:vertical;min-height:102px;padding:12px 13px;line-height:1.45}.journal-form input::placeholder,.journal-form textarea::placeholder{color:#7d7168}.water-choice{grid-template-columns:repeat(3,1fr)}.water-choice>span{grid-column:1/-1}.choice{color:#bfb0a2;border:1px solid #ffecd626;border-radius:10px;min-height:42px;padding:0 5px;font-size:11px;font-weight:750}.choice.selected{color:#fff3e2;background:#cf893d2e;border-color:#e8ae61}.journal-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.journal-actions>span{color:#bfae9c;font-size:12px}.journal-tip{color:#a99b8f;background:#ffffff06;border-left:2px solid #b4773b;margin-top:18px;padding:17px}.journal-tip b{color:#e6b573;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.journal-tip p{margin:7px 0 0;font-size:13px;line-height:1.45}footer{color:#82756b;border-top:1px solid #fff0da17;justify-content:space-between;gap:14px;margin-top:46px;padding:18px 4px 2px;font-size:11px;display:flex}footer span:first-child{color:#c8aa83;font-family:Georgia,Times New Roman,serif;font-size:13px}@media (width>=620px){.app{padding:24px 32px 38px}.hero{padding-top:72px}.hero-orbit{width:168px;height:168px;right:20px}.hero-orbit span:first-child{left:65px}.hero-orbit span:nth-child(2){bottom:22px}.hero-orbit span:nth-child(3){bottom:37px}.hero-orbit b{top:62px;left:67px}.label-card,.practical-card{grid-template-columns:1fr 1.35fr;align-items:start}.label-card dl{padding-left:10px}.wheel-layout{grid-template-columns:1fr 1fr;gap:28px}.wheel-key{margin:0}.practical-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=390px){.app{padding-left:15px;padding-right:15px}.hero{padding-top:54px}.hero-orbit{transform-origin:100% 0;right:-14px;transform:scale(.78)}.hero h1{font-size:45px}.wheel-note{transform:rotate(var(--angle)) translateY(-28vw) rotate(var(--reverse-angle))}}