:root{--color-paper:#f4eee5;--color-ink:#171513;--color-red:#a2393d;--color-button:#3d3d3d;--color-result:#3d2b22;--color-muted:#766f68;--color-line:#9c9185;--color-selected:#ead8ce;--color-arrow:#c7d736;--color-result-line:#a49388;--paper:var(--color-paper);--ink:var(--color-ink);--red:var(--color-red);--line:var(--color-line);--pink:var(--color-selected);--wood:var(--color-result);--lime:var(--color-arrow);--apply-topbar:46px;--apply-stepnav:90px;--apply-left:65%;--apply-right:35%;--apply-panel-pad-x:6.5%;--apply-control-row:48px;--apply-action-height:38px;--apply-action-width:154px;--atmosphere-x:7%;--atmosphere-scale:1.35}*{box-sizing:border-box}html,body,#app{margin:0;min-width:1180px;min-height:100%;color:var(--ink);font-family:Inter,sans-serif}button{font:inherit;color:inherit}.paper{background:#f5efe7 url('/assets/01-homepage/homepage bg.webp') center/cover}.primary,.light,.outline-light{border:0;border-radius:50px;background:var(--color-button);color:#fff;padding:10px 20px;min-width:var(--apply-action-width);height:var(--apply-action-height);text-align:left;font-size:10px}.primary i,.light i,.outline-light i{float:right;color:var(--lime);font-style:normal;font-size:17px;line-height:12px}.primary:disabled{opacity:.42}.seal{width:18px;height:18px;object-fit:contain}.topbar{height:var(--apply-topbar);padding:0 3%;display:flex;align-items:center;gap:9px;background:#f7f1e9 url('/assets/03-step1/background.webp') center/cover;border-bottom:1px solid #b6aca2;font-size:9px}.topbar span{position:absolute;left:50%;transform:translateX(-50%);font-size:7px}.topbar em{margin-left:auto;font-size:9px;font-style:normal;color:var(--red)}
.home{height:100vh;min-height:850px;position:relative;overflow:hidden}.project-meta{position:absolute;top:20px;left:24px;display:flex;gap:28px;align-items:center;font-size:11px;color:#555;z-index:5}.project-meta img{width:50px}.bamboo{position:absolute}.home-left{left:0;top:65px;width:23%}.home-right{right:0;top:0;width:23%}.home-title{position:absolute;top:14%;left:22%;width:56%;text-align:center;z-index:2;font-family:Didot,'Cormorant Garamond',serif}.home-title h1{font-size:clamp(76px,7.2vw,140px);line-height:.76;font-weight:400;letter-spacing:.01em;margin:55px 0 0}.home-title h1 em{color:#b04a50}.home-title>img{position:absolute;width:40px;right:7%;top:49%}.home-title p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(20px,1.8vw,34px);line-height:1.25;margin-top:55px}.mountains{position:absolute;top:25%;left:0;width:100%}.home-info{position:absolute;top:56%;left:8%;right:8%;height:29%}.home-info>div:not(.east){position:absolute;display:flex;gap:20px;align-items:flex-start}.home-info>div:first-child{left:0;top:10%}.home-info .role{left:4%;top:54%}.home-info h3{font-family:'Cormorant Garamond',serif;color:#b44e53;font-weight:500;font-size:22px;margin:0}.home-info p{border-top:1px solid;padding-top:16px;margin:0;font-size:16px}.east{position:absolute;right:2%;top:5%;width:29%;height:95%;text-align:center;font-family:Didot,serif}.east img{height:100%;max-width:100%}.east b{position:absolute;left:5%;right:5%;top:38%;font-size:42px}.east span{position:absolute;color:#765e51;font-size:22px}.c1{left:0;top:22%}.c2{right:0;top:22%}.c3{left:0;top:72%}.c4{right:0;top:72%}.wood-cta{position:absolute;bottom:0;height:14%;width:100%;background:url('/assets/01-homepage/wood-texture.webp') center/cover;display:grid;place-items:center}.outline-light{background:transparent;border:2px solid white;text-align:center;font-family:Didot,serif;min-width:320px}.outline-light i{display:none}
.choose{height:100vh;min-height:780px;position:relative;overflow:hidden;background-image:url('/assets/02-choose project/choose project-bg.webp')}.choose-bamboo{position:absolute;right:0;top:0;width:20%}.choose-head{position:absolute;left:8%;right:8%;top:12%;display:flex;justify-content:space-between;align-items:flex-end}.choose-head h1{font:400 clamp(56px,5.4vw,100px)/.95 Didot,serif;margin:0}.choose-head em{color:#b4484e}.choose-head p{font:italic 18px/1.3 'Cormorant Garamond',serif;margin:0 3% 1% 0}.product-grid{position:absolute;left:8%;right:8%;top:37%;height:44%;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.product-card{position:relative;background:transparent;border:0;border-right:1px solid var(--line);text-align:left;padding:0 25px}.product-card:first-child{border-left:0}.product-card.selected{background:rgba(213,190,177,.45);border-bottom:8px solid var(--red)}.product-card .radio,.radio{position:absolute;width:16px;height:16px;border:1px solid var(--red);border-radius:50%;right:20px;top:20px}.selected>.radio,.selected .radio{background:var(--red)}.product-card img{position:absolute;top:11%;left:20%;width:60%;height:50%;object-fit:contain}.product-card small{position:absolute;top:48%;left:14px;color:var(--red)}.product-card div{position:absolute;bottom:25px;left:25px;right:10px}.product-card label{font-size:12px;color:#b34d53}.product-card h2{font:34px Didot,serif;margin:6px 0}.product-card p{font:italic 14px 'Cormorant Garamond',serif;margin:0}.choose>.primary{position:absolute;right:8%;bottom:7%}.choose-seal{position:absolute;left:2%;bottom:3%;width:38px}
.apply{height:100vh;min-height:780px;overflow:hidden}.workspace{height:calc(100vh - 180px);min-height:600px;display:grid;grid-template-columns:65% 35%}.live{position:relative;background:url('/assets/03-step1/gridding.webp') center/cover;border-right:1px solid var(--line)}.live>span{position:absolute;left:4%;top:5%;font-size:14px}.live>span:first-letter{color:var(--red)}.composition{position:absolute;width:min(46%,550px);aspect-ratio:1395/2301;left:50%;top:50%;transform:translate(-50%,-50%)}.composition img.layer,.composition img.product-layer{position:absolute;width:171%;height:auto;left:-35.5%;top:26.5%;z-index:2}.composition img.scroll{position:absolute;inset:0;width:100%;height:100%;z-index:0}.composition img.product-layer{z-index:10}.composition img.enhanced{width:171%}.composition-tags{position:absolute;z-index:20;right:9%;bottom:15%;color:var(--red);font:700 14px Didot,serif;text-align:left}.composition-copy{position:absolute;z-index:20;bottom:8%;left:12%;right:12%;background:#817160;color:#fff;text-align:center;padding:7px;font:16px Didot,serif}.vertical-brand{position:absolute;z-index:20;top:24%;left:10%;writing-mode:vertical-rl;font-size:8px}.composition>.seal{position:absolute;z-index:20;top:38%;left:9%;width:19px;height:19px}.step-panel{padding:6% 7%;position:relative;overflow:hidden}.eyebrow,.step-panel h4{color:#b64c52;font-family:Didot,serif}.step-panel h1{font:42px Didot,serif;margin:14px 0}.step-panel h1 em{color:#b34f55}.step-panel>p{font-size:12px;color:#7f776f;margin-bottom:36px}.step-panel h4{font:12px Inter,sans-serif;margin:20px 0 10px}.step-panel h4 small{color:#777;font-weight:400}.options{border-top:1px solid var(--line)}.option{position:relative;width:100%;height:72px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;padding:10px 20px}.option b{display:block;font:24px Didot,serif;font-weight:400}.option small{font-size:11px;color:#766f68}.option.selected{background:rgba(230,207,197,.55)}.frame-options .option{height:58px}.frame-options .option b{font-size:22px}.base-options,.type-options{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.base{position:relative;border:1px solid var(--line);background:transparent;height:92px;padding:0}.base.selected,.type.selected{background:#ecd9d0}.base img{width:100%;height:65px;object-fit:contain}.base span{position:absolute;top:96px;left:0;width:100%;font:13px Didot,serif}.base .radio{top:116px;right:calc(50% - 8px)}.motif-options{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.motif-options .option{height:76px;border-right:1px solid var(--line)}.motif-options .option b{font-size:21px}.type{height:75px;background:transparent;border:1px solid var(--line);position:relative}.type b{font-size:32px}.type span{position:absolute;top:82px;left:0;width:100%;font:14px Didot,serif}.type .radio{top:7px;right:7px;width:12px;height:12px}.copy-options{margin-top:40px}.copy-options .option{height:56px}.copy-options .option b,.tag-options .option b{font-size:18px}.tag-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tag-options .option{height:40px;border:1px solid var(--line);padding:8px}.tag-options .radio{top:12px;right:8px;width:12px;height:12px}.summary{border-top:1px solid var(--line)}.summary div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:22px 15px}.summary dt{font-size:13px}.summary dd{margin:0;color:#b0484e;font:20px Didot,serif;max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-actions{position:absolute;bottom:4%;left:7%;right:7%;display:flex;align-items:center;justify-content:space-between}.back{border:0;background:transparent}.stepnav{height:104px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}.stepnav div{display:flex;align-items:center;justify-content:center;gap:15px;border-right:1px solid var(--line)}.stepnav .active{background:#ecdbd1;border-bottom:5px solid var(--red)}.stepnav img{width:55px;height:55px;object-fit:contain}.stepnav span{display:flex;flex-direction:column;font:14px Didot,serif;color:#756d65}.stepnav b{font-size:17px;font-weight:400;color:#806d62}.stepnav .active b{color:var(--red)}
.reflection{min-height:100vh;display:grid;grid-template-columns:39% 61%}.reflection-art{position:relative;background:url('/assets/08-judge-the-image-page/bg-2.webp') center/cover;color:#fff;padding:6% 5%}.reflection-art h1{font:clamp(56px,5vw,90px)/1.03 Didot,serif;margin:0}.reflection-art h1 em{color:#b9484e;font-style:normal}.reflection-art>p{font-size:13px}.composition.compact{width:42%;top:70%;height:auto}.questions{padding:5% 6%;position:relative}.question{border-top:1px solid var(--line);padding:26px 0}.question h2{font:22px Didot,serif;font-weight:400;margin:0 0 22px}.question h2 span{color:#b84f54;font:18px Inter,sans-serif;margin-right:25px}.scale{display:grid;grid-template-columns:repeat(5,1fr)}.scale button{height:58px;border:1px solid var(--line);border-right:0;background:transparent}.scale button:last-child{border-right:1px solid var(--line)}.scale button.selected{background:var(--red);color:white}.question>small{display:flex;justify-content:space-between;color:#a49b93;margin-top:8px;font-size:9px}.question>small b{font-weight:400}.slider-q input{width:100%;accent-color:var(--red)}.slider-q strong{color:var(--red)}.reflection-actions{display:flex;justify-content:space-between;align-items:center;margin-top:70px}
.result{min-height:100vh;background:var(--wood);color:#efe8df;position:relative;overflow:hidden;padding-bottom:140px}.result .topbar{color:#111}.result-bamboo{position:absolute;right:-3%;top:75px;width:30%;opacity:.45}.result-hero{position:relative;z-index:2;display:grid;grid-template-columns:36% 64%;padding:70px 4% 40px}.result h4{font-size:11px;color:#cb6a70}.result-hero .composition{position:relative;left:auto;top:auto;transform:none;width:62%;margin-top:20px}.reading{padding:6% 2%}.reading h1{font:clamp(50px,5vw,90px)/.9 Didot,serif;margin:20px 0 50px}.reading h1 em{color:#b84e53;font-style:normal}.scores{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #9a8a80;border-bottom:1px solid #9a8a80}.scores span{display:flex;flex-direction:column;padding:18px;border-right:1px solid #9a8a80;font-size:10px;color:#aa9a90}.scores span:last-child{border:0}.scores b{font:23px Didot,serif;color:#c46c70}.reading>p{font-size:11px;color:#a7958b;margin-top:28px}.accordions{margin:0 4%;position:relative;z-index:3}.accordion{width:100%;min-height:105px;color:#eee5dc;background:transparent;border:0;border-top:1px solid #a49388;display:grid;grid-template-columns:45px 1fr 30px;text-align:left;padding:20px 8px}.accordion:last-child{border-bottom:1px solid #a49388}.accordion.open{background:#741e28}.accordion small{color:#cb6a70}.accordion span{display:flex;flex-direction:column}.accordion b{font:23px Didot,serif;font-weight:400}.accordion em{font-style:normal;font-size:9px;color:#a9978e}.accordion p{font-size:11px;line-height:1.6;max-width:75%;margin-top:24px}.accordion>i{font-style:normal;color:#d16d72}.result blockquote{position:relative;z-index:2;text-align:center;font:clamp(45px,4.5vw,75px)/1.15 Didot,serif;margin:110px 10% 80px}.result-mountains{position:absolute;bottom:0;width:100%;opacity:.4}.result-actions{position:relative;z-index:2;display:flex;justify-content:center;gap:25px}.outline-dark,.light{min-width:230px;height:60px}.outline-dark{background:transparent;border:1px solid #eee;color:#eee}.light{background:#f7efe7;color:#665c55}.modal{position:fixed;z-index:99;inset:0;background:rgba(10,10,10,.92);display:grid;place-items:center}.dialog{position:relative;width:64%;min-height:72%;background:#f5eee6;color:#766d66;padding:4% 5%}.dialog h4{letter-spacing:3px}.dialog h1{font:clamp(52px,5vw,84px)/.82 Didot,serif;color:#171513;margin:30px 0 45px}.dialog h1 em{color:#a53b40;font-style:normal}.dialog p{font-size:13px;line-height:1.65}.close{position:absolute;right:25px;top:20px;width:50px;height:50px;background:transparent;border:1px solid #c0b8b0}.return{margin-top:30px;width:320px;height:72px;background:#111;color:#ddd;border:0;text-align:left;padding:0 30px;letter-spacing:1px}.return i{float:right;color:var(--lime)}
@media(max-height:800px){.choose-head{top:10%}.product-grid{top:34%;height:48%}}
.composition img.product-layer{width:37%;left:27%;top:39%}
.composition img.product-layer.enhanced{width:171%;left:-35.5%;top:26.5%}

/* Shared Apply Filter geometry: these values govern Steps 01–05 together. */
.apply .topbar{height:var(--apply-topbar)}
.apply{min-height:0}
.apply .workspace{height:calc(100vh - var(--apply-topbar) - var(--apply-stepnav));min-height:0;grid-template-columns:var(--apply-left) var(--apply-right)}
.apply .composition{width:min(48%,550px);top:53%}
.apply .composition img.product-layer:not(.enhanced){top:38%;z-index:100}
.apply .composition.product-skincare img.product-layer:not(.enhanced){top:34%}
.apply .composition img.frame-layer{height:auto;z-index:80}
.apply .composition img.frame-square{width:51.5%;left:20.1%;top:25.5%}
.apply .composition img.frame-circular{width:53%;left:20%;top:25.5%}
.apply .composition img.frame-floral{width:52.8%;left:19.1%;top:24.9%}
.apply .composition img.frame-fan-shaped{width:53.5%;left:19.8%;top:25.6%}
.apply .composition img.platform-layer{height:auto;z-index:90}
.apply .composition img.platform-pedestal-tray{width:57.01%;left:16.69%;top:41.89%}
.apply .composition img.platform-wooden-stand{width:57.06%;left:16.77%;top:42.09%}
.apply .composition img.platform-scholar-s-rock{width:73.27%;left:6.34%;top:37.26%}
.apply .composition img.platform-scroll-platform{width:57.11%;left:16.45%;top:41.82%}
.apply .composition{--atmosphere-product-x:0%}
.apply .composition.product-perfume{--atmosphere-product-x:.013%}
.apply .composition.product-fragrance{--atmosphere-product-x:-.891%}
.apply .composition img.atmosphere-yellow{--atmosphere-color-x:8.556%}
.apply .composition img.atmosphere-pink{--atmosphere-color-x:8.486%}
.apply .composition img.atmosphere-green{--atmosphere-color-x:10.174%}
.apply .composition img.atmosphere-blue{--atmosphere-color-x:10.104%}
.apply .composition img.atmosphere-layer{transform:translateX(calc(var(--atmosphere-color-x) + var(--atmosphere-product-x))) scale(var(--atmosphere-scale));transform-origin:center}
.composition .composition-paper{position:absolute;z-index:10;left:11%;top:10.6%;width:70.5%;height:72.3%;overflow:hidden;pointer-events:none}
.composition .composition-paper .motif-layer{position:absolute;height:auto;max-width:none}
.composition .composition-paper .motif-mountain{z-index:20;width:185%;left:-39%;top:-2%}
.composition .composition-paper .motif-plum-blossom{z-index:30;width:200%;left:-48%;top:-17%}
.composition .composition-paper .motif-bamboo{z-index:40;width:215%;left:-46%;top:-20%}
.composition .composition-paper .motif-woven-blind{z-index:50;width:200.1%;left:-41.2%;top:-7.1%}
.composition .composition-paper .motif-moon{z-index:60;width:256.6%;left:-101.3%;top:-7.1%}
.composition .composition-paper .motif-wild-geese{z-index:70;width:235.5%;left:-49.5%;top:-7.1%}
.apply .composition img.product-layer{z-index:100}
.apply .composition img.product-layer.enhanced{transform:translateX(6%)}
.apply .composition.product-skincare:not(.step-1) img.product-layer.enhanced{top:22.5%}
.apply .step-panel{padding:5.2% var(--apply-panel-pad-x);overflow:hidden}
.apply .eyebrow{font-size:10px}
.apply .step-panel h1{font-size:36px;line-height:1.02;margin:11px 0 15px}
.apply .step-panel>p{font-size:10px;line-height:1.35;margin:0 0 27px;max-width:94%}
.apply .step-panel h4{font-size:10px;margin:15px 0 8px}
.apply .option{height:var(--apply-control-row);padding:7px 16px}
.apply .option b{font-size:20px;line-height:1.05}
.apply .option small{font-size:9px;line-height:1.15}
.apply .radio{width:12px;height:12px;right:15px;top:calc(50% - 6px)}
.apply .frame-options .option{height:48px}
.apply .frame-options .option b,.apply .motif-options .option b{font-size:18px}
.apply .frame-options .frame-option{display:flex;align-items:center;gap:12px;padding-left:8px;padding-right:16px}
.apply .frame-icon{position:relative;display:block;width:40px;height:40px;flex:0 0 40px}
.apply .frame-icon img{position:absolute;left:50%;top:50%;height:auto;max-width:none;transform:translate(-50%,-50%)}
.apply .frame-option:nth-child(1) .frame-icon img{width:126px}
.apply .frame-option:nth-child(2) .frame-icon img{width:126px}
.apply .frame-option:nth-child(3) .frame-icon img{width:116px}
.apply .frame-option:nth-child(4) .frame-icon img{width:116px}
.apply .frame-label{display:block;min-width:0}
.apply .motif-options .option{height:62px}
.apply .motif-hint{display:block;margin:-18px 0 8px;color:#7f776f;font:8px/1.25 Inter,sans-serif}
.apply .motif-options{border-left:0}
.apply .motif-options .option{border-left:0}
.apply .motif-options .option:nth-child(even){border-right:0}
.apply .base-options,.apply .type-options{gap:10px}
.apply .base{height:76px}
.apply .base img{position:absolute;left:50%;top:50%;height:auto;max-width:none;transform:translate(-50%,-50%)}
.apply .base:nth-child(1) img{width:70%}
.apply .base:nth-child(2) img{width:70%}
.apply .base:nth-child(3) img{width:90%}
.apply .base:nth-child(4) img{width:57.5%}
.apply .base span{top:80px;font-size:11px}
.apply .base .radio{top:99px;right:calc(50% - 6px)}
.apply .type{height:63px}
.apply .type b{font-size:27px}
.apply .type span{top:68px;font-size:11px}
.apply .type .radio{top:6px;right:6px}
.apply .copy-options{margin-top:4px}
.apply .copy-options .option{height:45px}
.apply .copy-options .option b,.apply .tag-options .option b{font-size:14px}
.apply .tag-options{gap:7px}
.apply .tag-options .option{height:34px;padding:6px}
.apply .tag-options .radio{right:6px}
.apply .summary div{padding:17px 13px}
.apply .summary dt{font-size:11px}
.apply .summary dd{font-size:17px}
.apply .step-actions{bottom:4.2%;left:var(--apply-panel-pad-x);right:var(--apply-panel-pad-x)}
.apply .back{font-size:11px;padding:0}
.apply .step-actions .primary{min-width:var(--apply-action-width);height:var(--apply-action-height);padding:10px 19px;font-size:10px}
.apply .step-actions .primary{position:relative}
.apply .step-actions .primary i{float:none;position:absolute;right:19px;top:calc(50% - 3px);margin:0;line-height:1;transform:translateY(-50%)}
.apply [data-action="reflect"]{min-width:190px!important}
.apply .stepnav{height:var(--apply-stepnav);background:#f7f1e9 url('/assets/03-step1/background.webp') center/cover}
.apply .stepnav>div{display:grid;place-items:center;gap:0}
.apply .stepnav-item{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:10px}
.apply .stepnav-icon{position:relative;display:block;width:40px;height:50px;flex:0 0 40px}
.apply .stepnav-icon img{position:absolute;left:50%;top:50%;height:auto;max-width:none;transform:translate(-50%,-50%)}
.apply .stepnav>div:nth-child(1) img{width:190px}
.apply .stepnav>div:nth-child(2) img{width:165px}
.apply .stepnav>div:nth-child(3) img{width:145px}
.apply .stepnav>div:nth-child(4) img{width:140px}
.apply .stepnav>div:nth-child(5) img{width:140px}
.apply .stepnav-copy{display:flex;min-width:72px;flex-direction:column;align-items:flex-start;font-family:Didot,'Cormorant Garamond',serif;color:#756d65;line-height:1.05}
.apply .stepnav-copy b{font-family:'DM Sans',Inter,sans-serif;font-size:11px;font-weight:300;line-height:1}
.apply .stepnav-copy small{margin-top:4px;font-size:9px;line-height:1;white-space:nowrap}

/* Step 04 controls and paper-bound text composition. */
.apply .step-panel-4 h1{font-size:32px;margin:9px 0 13px}
.apply .step-panel-4>p{font-size:9px;line-height:1.35;margin-bottom:20px;max-width:100%}
.apply .step-panel-4 h4{font-size:9px;line-height:1.2;margin:12px 0 7px}
.apply .step-panel-4 h4 small{font-size:7px;margin-left:4px}
.apply .step-panel-4 .type-options{gap:10px;margin-bottom:29px}
.apply .step-panel-4 .type{height:52px}
.apply .step-panel-4 .type-glyph{position:absolute;inset:0;display:block;overflow:hidden}
.apply .step-panel-4 .type-glyph img{position:absolute;width:230px;height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%)}
.apply .step-panel-4 .type-name{position:absolute;top:57px;left:0;width:100%;font:10px/1 Didot,'Cormorant Garamond',serif;text-align:center;white-space:nowrap}
.apply .step-panel-4 .type .radio{width:10px;height:10px;top:6px;right:6px}
.apply .step-panel-4 .copy-options{margin-top:0}
.apply .step-panel-4 .copy-options .option{height:39px;padding:6px 14px}
.apply .step-panel-4 .copy-options .option b{font-size:11px;line-height:1.1}
.apply .step-panel-4 .copy-options .radio{width:10px;height:10px;right:10px;top:calc(50% - 5px)}
.apply .step-panel-4 .tag-options{gap:7px}
.apply .step-panel-4 .tag-options .option{height:30px;padding:5px 20px 5px 7px;overflow:hidden}
.apply .step-panel-4 .tag-options .option b{font-size:9px;line-height:1;white-space:nowrap}
.apply .step-panel-4 .tag-options .radio{width:10px;height:10px;right:6px;top:calc(50% - 5px)}
.apply .step-panel-4 .step-actions .primary{min-width:132px}
.composition-paper .composition-type{position:absolute;z-index:110;width:142%;height:auto;max-width:none;left:-51%;top:-12%}
.composition-paper .vertical-brand{position:absolute;z-index:111;top:19%;left:10%;color:var(--ink);font:6px/1 Inter,sans-serif;writing-mode:vertical-rl}
.composition-paper .composition-seal{position:absolute;z-index:111;top:33%;left:9.3%;width:17px;height:17px;object-fit:contain}
.composition-paper .composition-tags{position:absolute;z-index:111;left:58%;right:3%;top:79%;bottom:auto;color:var(--red);font:700 9px/1.25 Didot,'Cormorant Garamond',serif;text-align:left;white-space:nowrap}
.composition-paper .composition-copy{position:absolute;z-index:111;left:11%;right:11%;bottom:2.5%;background:#817160;color:#fff;padding:5px 4px;font:9px/1.1 Didot,'Cormorant Garamond',serif;text-align:center;white-space:nowrap}
.composition>.composition-tags{position:absolute;z-index:120;left:58%;top:67%;right:auto;bottom:auto;color:var(--red);font:700 9px/1.25 Didot,'Cormorant Garamond',serif;text-align:left;white-space:nowrap;pointer-events:none}

/* The finished Skincare artwork has a wider transparent canvas. These values
   align its visible bottle-and-jar bounds to the shared Step 01–03 product box. */
.composition.product-skincare img.product-layer.finished-product{width:118.9%;left:-4.41%;top:27.15%;transform:none}
.apply .composition.product-skincare img.product-layer.finished-product{top:27.106%}
.apply .composition.product-skincare:not(.step-1) img.product-layer.finished-product.enhanced{top:27.106%;transform:none}

/* Product artwork is aligned by its visible pixels, not by each transparent canvas. */
.apply .composition.product-perfume img.product-layer:not(.finished-product){width:24.034%;left:33.762%;top:35.713%;transform:none}
.apply .composition.product-fragrance img.product-layer:not(.finished-product){width:37.643%;left:26.122%;top:33.569%;transform:none}
.apply .composition.product-teabox img.product-layer:not(.finished-product){width:36.566%;left:27.516%;top:34.074%;transform:none}
.composition.product-perfume img.product-layer.finished-product{width:113.869%;left:.948%;top:30.219%;transform:none}
.composition.product-fragrance img.product-layer.finished-product{width:124.414%;left:-2.277%;top:23.031%;transform:none}
.composition.product-teabox img.product-layer.finished-product{width:124.932%;left:-12.910%;top:29.401%;transform:none}

/* Reflection reuses the Step 05 composition geometry, then scales the complete
   composition element as one preview. No child layer is re-laid out here. */
.reflection-art .composition.compact{width:min(31.2vw,550px);height:auto;left:31%;top:70%;transform:translate(-50%,-50%) scale(.68);transform-origin:center}
.reflection-art .composition img.frame-layer{height:auto;z-index:80}
.reflection-art .composition img.frame-square{width:51.5%;left:20.1%;top:25.5%}
.reflection-art .composition img.frame-circular{width:53%;left:20%;top:25.5%}
.reflection-art .composition img.frame-floral{width:52.8%;left:19.1%;top:24.9%}
.reflection-art .composition img.frame-fan-shaped{width:53.5%;left:19.8%;top:25.6%}
.reflection-art .composition img.platform-layer{height:auto;z-index:90}
.reflection-art .composition img.platform-pedestal-tray{width:57.01%;left:16.69%;top:41.89%}
.reflection-art .composition img.platform-wooden-stand{width:57.06%;left:16.77%;top:42.09%}
.reflection-art .composition img.platform-scholar-s-rock{width:73.27%;left:6.34%;top:37.26%}
.reflection-art .composition img.platform-scroll-platform{width:57.11%;left:16.45%;top:41.82%}
.reflection-art .composition img.product-layer{z-index:100}
.reflection-art .composition.product-skincare:not(.step-1) img.product-layer.finished-product.enhanced{top:27.106%;transform:none}
.reflection{position:relative;overflow:hidden}
.reflection-bamboo{position:absolute;z-index:1;left:26%;bottom:-5%;width:42%;height:auto;pointer-events:none}
.reflection-art,.reflection .questions{position:relative;z-index:2}

/* Result uses the same Step 05 layer geometry and scales only the complete
   composition container for its page-level preview. */
.result-hero .composition.compact{position:relative;width:min(31.2vw,550px);height:auto;left:auto;top:auto;margin:20px 0 0;transform:scale(.8);transform-origin:top left}
.result-hero .composition img.frame-layer{height:auto;z-index:80}
.result-hero .composition img.frame-square{width:51.5%;left:20.1%;top:25.5%}
.result-hero .composition img.frame-circular{width:53%;left:20%;top:25.5%}
.result-hero .composition img.frame-floral{width:52.8%;left:19.1%;top:24.9%}
.result-hero .composition img.frame-fan-shaped{width:53.5%;left:19.8%;top:25.6%}
.result-hero .composition img.platform-layer{height:auto;z-index:90}
.result-hero .composition img.platform-pedestal-tray{width:57.01%;left:16.69%;top:41.89%}
.result-hero .composition img.platform-wooden-stand{width:57.06%;left:16.77%;top:42.09%}
.result-hero .composition img.platform-scholar-s-rock{width:73.27%;left:6.34%;top:37.26%}
.result-hero .composition img.platform-scroll-platform{width:57.11%;left:16.45%;top:41.82%}
.result-hero .composition img.product-layer{z-index:100}
.result-hero .composition.product-skincare:not(.step-1) img.product-layer.finished-product.enhanced{top:27.106%;transform:none}
.result-actions .outline-dark,.result-actions .light{font-family:Inter,sans-serif;font-size:10px;font-weight:400;line-height:1;letter-spacing:0;text-transform:uppercase}

/* Homepage follows the tall editorial composition from the Figma reference. */
.home{position:relative;width:100%;height:calc(100vw * 1206 / 1083);min-height:0;max-height:none;overflow:visible;background-color:#f5efe7;background-repeat:repeat;background-size:1600px auto}
.home-hero{position:relative;height:59vw;min-height:0;overflow:hidden}
.home .project-meta{top:1.55vw;left:1.55vw;gap:1.95vw;font-size:clamp(8px,.7vw,11px);line-height:1.18}
.home .project-meta img{width:3.36vw;height:auto;object-fit:contain}
.home-left{left:-8%;top:6.4vw;width:33.75%;height:auto;transform-origin:left top}
.home-right{right:0;top:0;width:22.6%;height:auto}
.home-rail{position:absolute;z-index:4;left:5.35%;top:6.5vw;width:1px;height:45.3vw;background:#6e6964}
.home-rail::before,.home-rail::after{content:"";position:absolute;left:-4px;width:8px;height:8px;background:#b0444b;transform:rotate(45deg)}
.home-rail::before{top:-10px}.home-rail::after{bottom:-10px}
.home-title{top:16.8vw;left:25.8%;width:48.4%;font-family:Didot,'Cormorant Garamond',serif}
.home-title h1{margin:0;font-size:clamp(82px,7.5vw,118px);font-weight:400;line-height:.84;letter-spacing:.005em}
.home-title h1 em{color:#b04a50;font-weight:400}
.home-title>img{width:35px;right:1.8%;top:47.5%}
.home-divider{width:170px;margin:29px auto 17px;display:flex;align-items:center;justify-content:center;gap:8px;color:#b34f55}
.home-divider span{display:block;height:1px;flex:1;background:#b34f55}.home-divider b{font:12px Didot,serif}
.home-title p{margin:0;font:italic clamp(18px,1.55vw,25px)/1.28 'Cormorant Garamond',serif}
.home .mountains{top:28.6vw;left:0;width:100%;height:auto}
.home-info{position:absolute;top:62.6vw;left:8.5%;right:8.5%;height:32.5vw}
.home-info>div:not(.east){position:absolute}
.home-info .premise{left:0;top:0;display:grid;grid-template-columns:8.6vw 22.3vw;column-gap:0;align-items:start}
.home-info h3{font:500 clamp(18px,1.56vw,25px)/1.05 'Cormorant Garamond',serif;color:#b44e53;margin:.4vw 0 0}
.home-info p{margin:0;padding-top:1.25vw;border-top:1px solid #635e59;font:clamp(12px,1.1vw,17px)/1.28 Inter,sans-serif}
.home-info .role{left:3.4%;top:12.8vw;width:25.8vw;height:11.7vw;display:block}
.home-info .role h3{position:absolute;left:62%;top:0}
.home-info .role p{position:absolute;left:0;top:3.9vw;width:21.9vw;padding:0 0 1.1vw;border-top:0;border-bottom:1px solid #635e59}
.home-info .east{right:0;top:-1.2vw;width:31.5%;height:auto;aspect-ratio:692/840}
.home-info .east img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.home-info .east b{top:37%;left:4%;right:4%;font:400 clamp(34px,3.2vw,51px)/.98 Didot,serif}
.home-info .east span{font:20px Didot,serif;color:#765e51}
.home-info .east .c1{left:-2%;top:11%}.home-info .east .c2{right:-2%;top:11%}.home-info .east .c3{left:-2%;top:72%}.home-info .east .c4{right:-2%;top:72%}
.home .wood-cta{position:absolute;left:0;bottom:0;width:100%;height:14.4vw;min-height:0;background-size:cover}
.home .outline-light{width:275px;min-width:275px;height:53px;padding:0;border-width:1px;text-align:center;font:14px Didot,serif}

/* Choose Product is a self-contained desktop viewport, unlike the scrolling Homepage. */
.choose{position:relative;width:100%;height:100vh;min-height:0;max-height:100vh;overflow:hidden;background-size:cover;background-position:center}
.choose .project-meta{top:2.1%;left:1.8%;gap:1.55vw;font-size:clamp(8px,.68vw,11px);line-height:1.18}
.choose .project-meta img{width:3.1vw;height:auto;object-fit:contain}
.choose-head{position:absolute;inset:0;display:block}
.choose-head h1{position:absolute;left:8.1%;top:auto;bottom:73.8%;width:46%;margin:0;font:400 clamp(46px,4vw,78px)/.95 Didot,serif;letter-spacing:.005em}
.choose-head h1 em{display:block;white-space:nowrap;color:#b4484e;font-size:1em;line-height:.95}
.choose-head p{position:absolute;left:54.7%;top:auto;bottom:73.8%;width:34%;margin:0;font:italic clamp(10px,.8vw,16px)/1.28 'Cormorant Garamond',serif}
.choose-bamboo{right:0;top:0;width:19%;height:auto}
.product-grid{left:8.1%;right:8.1%;top:36.4%;height:44%;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-card{padding:0 1.55vw;border-right:1px solid var(--line)}
.product-card:last-child{border-right:0}
.product-card:first-child{border-left:0}
.product-card .radio{top:2.5%;right:1.45vw;width:14px;height:14px}
.product-card img{top:10%;left:12%;width:76%;height:51%;object-fit:contain}
.product-card:nth-child(1) img{left:10%;width:80%}
.product-card:nth-child(2) img{left:11%;width:78%}
.product-card:nth-child(3) img{left:9%;width:82%}
.product-card:nth-child(4) img{left:10%;width:80%}
.product-card small{top:51%;left:1.2vw;font-size:clamp(9px,.68vw,12px)}
.product-card div{top:73%;bottom:auto;left:1.45vw;right:.8vw}
.product-card label{font-size:clamp(8px,.65vw,12px)}
.product-card h2{margin:.32vw 0;font:clamp(20px,1.5vw,29px) Didot,serif;white-space:nowrap}
.product-card p{margin:0;font:italic clamp(9px,.68vw,13px)/1.2 'Cormorant Garamond',serif}
.choose>.primary{right:8.1%;bottom:5.4%;width:180px;min-width:180px;height:42px}
.choose>.primary{display:flex;align-items:center;padding:0 15px;text-align:left;white-space:nowrap}
.choose>.primary i{float:none;display:block;line-height:1;margin:0;position:absolute;right:18px;top:50%;transform:translateY(-54%)}
.choose-seal{left:1.8%;bottom:3.5%;width:38px;height:auto}

/* Keep the Reflection result CTA text and arrow in independent visual zones. */
.reflection-actions .primary{position:relative;width:217px;min-width:217px;padding-left:8px;padding-right:16px;white-space:nowrap}
.reflection-actions .primary i{float:none;position:absolute;right:16px;top:calc(50% - 3px);margin:0;line-height:1;transform:translateY(-50%)}

/* The Result composition is visually scaled to 80%; remove only the unused
   pre-transform layout height so the module list follows it naturally. */
.result-hero .composition.compact{margin-bottom:-10.3vw}

/* Shared visual tokens and non-layout interaction states. */
.product-card .radio,.apply .radio{box-sizing:border-box;border:1px solid var(--red);border-radius:50%;background:transparent}
.product-card.selected>.radio,.apply .selected>.radio,.apply .selected .radio{background:var(--red)}
.option.selected,.base.selected,.type.selected{background:var(--pink)}
.options,.motif-options,.summary,.stepnav,.product-grid{border-color:var(--line)}
.option,.base,.type,.tag-options .option,.summary div,.stepnav div,.product-card{border-color:var(--line)}
.scores{border-color:var(--color-result-line)}
.scores span,.accordion,.accordion:last-child{border-color:var(--color-result-line)}
button:not(:disabled),[data-action="about"],[data-action="close"],[data-accordion]{cursor:pointer}
button:disabled{cursor:not-allowed}
.stepnav,.stepnav *{cursor:default}
button:focus{outline:none}
button:focus-visible{outline:1px solid var(--red);outline-offset:2px}
.result button:focus-visible,.modal button:focus-visible{outline-color:var(--lime)}
.primary,.light,.outline-dark,.return{font-family:Inter,sans-serif}
.primary i,.light i,.outline-light i,.return i{color:var(--lime);font-style:normal}
img{border:0}

/* Round 3: restrained feedback for choices and primary actions. */
:root{--motion-fast:160ms;--motion-button:200ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
.product-card,.option,.base,.type,.scale button{transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)}
.product-card:not(.selected):not(:disabled):hover,.option:not(.selected):not(:disabled):hover,.base:not(.selected):not(:disabled):hover,.type:not(.selected):not(:disabled):hover{background-color:rgba(234,216,206,.34)}
.scale button:not(.selected):not(:disabled):hover{background-color:rgba(234,216,206,.42)}
.product-card .radio,.apply .radio{overflow:hidden;background:transparent!important;transition:border-color var(--motion-fast) var(--motion-ease)}
.product-card .radio::after,.apply .radio::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--red);opacity:0;transform:scale(.85);transition:opacity 150ms var(--motion-ease),transform 150ms var(--motion-ease)}
.product-card.selected .radio::after,.apply .selected .radio::after{opacity:1;transform:scale(1)}
.primary,.light,.outline-light,.return{transition:background-color var(--motion-button) var(--motion-ease),color var(--motion-button) var(--motion-ease),opacity var(--motion-button) var(--motion-ease)}
.primary:not(:disabled):hover{background-color:#343434}
.light:not(:disabled):hover{background-color:#efe6dc}
.outline-light:not(:disabled):hover{background-color:rgba(255,255,255,.08)}
.return:not(:disabled):hover{background-color:#1b1b1b}
.primary i,.light i,.outline-light i,.return i{transition:transform var(--motion-button) var(--motion-ease),color var(--motion-button) var(--motion-ease)}
.apply .step-actions .primary:not(:disabled):hover i,.reflection-actions .primary:not(:disabled):hover i{transform:translate(3px,-50%)}
.choose>.primary:not(:disabled):hover i{transform:translate(3px,-54%)}
.light:not(:disabled):hover i,.return:not(:disabled):hover i{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.product-card,.option,.base,.type,.scale button,.product-card .radio,.apply .radio,.product-card .radio::after,.apply .radio::after,.primary,.light,.outline-light,.return,.primary i,.light i,.outline-light i,.return i{transition:none!important}.apply .step-actions .primary:hover i,.reflection-actions .primary:hover i{transform:translateY(-50%)}.choose>.primary:hover i{transform:translateY(-54%)}.light:hover i,.return:hover i{transform:none}}

/* Round 3: composition swap, adaptive Result disclosure, and About modal. */
:root{--motion-content:260ms;--motion-modal:230ms}
.product-transition-in{animation:product-fade-in var(--motion-content) var(--motion-ease) both}
.product-transition-out{animation:product-fade-out var(--motion-content) var(--motion-ease) both}
@keyframes product-fade-in{from{opacity:0}to{opacity:1}}
@keyframes product-fade-out{from{opacity:1}to{opacity:0}}
.accordion .accordion-content{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--motion-content) var(--motion-ease),opacity 180ms var(--motion-ease)}
.accordion-content>span{min-height:0;overflow:hidden}
.accordion-content p{margin-bottom:0}
.accordion.open .accordion-content{grid-template-rows:1fr;opacity:1}
.modal{opacity:0;pointer-events:auto;transition:opacity var(--motion-modal) var(--motion-ease)}
.modal .dialog{opacity:0;transform:translateY(10px);transition:opacity var(--motion-modal) var(--motion-ease),transform var(--motion-modal) var(--motion-ease)}
.modal.is-visible{opacity:1}
.modal.is-visible .dialog{opacity:1;transform:translateY(0)}
.modal.is-closing{pointer-events:auto}
@media(prefers-reduced-motion:reduce){.product-transition-in,.product-transition-out{animation:none!important}.product-transition-out{display:none}.product-transition-in{opacity:1}.accordion-content,.modal,.modal .dialog{transition:none!important}.modal .dialog{transform:none}.modal.is-visible,.modal.is-visible .dialog{opacity:1}}

/* Final interaction pass: requested hover and persistent product-selection states. */
.primary:not(:disabled):hover,.return:not(:disabled):hover{background-color:var(--color-red)}
.product-card img{transform-origin:center bottom;transition:transform 230ms var(--motion-ease)}
.product-card:hover img,.product-card.selected img{transform:scale(1.1) rotate(-5deg)}
.result-actions .outline-dark{transition:background-color var(--motion-button) var(--motion-ease),color var(--motion-button) var(--motion-ease),border-color var(--motion-button) var(--motion-ease)}
.result-actions .outline-dark{border-color:#f5ede6;color:#f5ede6}
.result-actions .outline-dark:hover{background-color:#f5ede6;color:var(--color-result);border-color:#f5ede6}
.result-actions .light:hover{background-color:var(--color-red);color:#fff}
.return{font-size:10px;line-height:1;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.product-card img,.result-actions .outline-dark{transition:none!important}}

/* Final local alignment and disclosure corrections. */
.choose>.primary i{top:calc(50% - 2px);transform:translateY(-50%)}
.choose>.primary:not(:disabled):hover i{transform:translate(3px,-50%)}
.apply .atmosphere-options .option{display:block}
.summary .summary-detail{position:relative;cursor:pointer}
.summary .summary-detail:focus-visible{outline:1px solid var(--red);outline-offset:-2px}
.summary-popover{position:absolute;z-index:40;left:13px;right:13px;bottom:calc(100% + 5px);padding:9px 11px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:11px/1.35 Inter,sans-serif;white-space:normal;overflow-wrap:anywhere;box-shadow:0 3px 10px rgba(23,21,19,.1);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--motion-fast) var(--motion-ease),visibility 0s linear var(--motion-fast)}
.summary-detail:hover .summary-popover,.summary-detail:focus-visible .summary-popover,.summary-detail.is-open .summary-popover{opacity:1;visibility:visible;transition-delay:0s}
.reflection-actions .primary{padding-left:18px}
.result-actions .light{position:relative;display:flex;align-items:center;padding-top:0;padding-bottom:0}
.result-actions .light i{float:none;position:absolute;right:20px;top:50%;line-height:1;transform:translateY(-50%)}
.result-actions .light:not(:disabled):hover i{transform:translateY(-50%)}
.return{position:relative;display:flex;align-items:center;padding-top:0;padding-bottom:0;padding-right:68px}
.return i{float:none;position:absolute;right:28px;top:50%;font-size:24px;line-height:1;transform:translateY(-50%)}
.return:not(:disabled):hover i{transform:translateY(-50%)}
@media(prefers-reduced-motion:reduce){.summary-popover{transition:none!important}.choose>.primary:not(:disabled):hover i{transform:translateY(-50%)}}