*,*::before,*::after{box-sizing:border-box}

:root{

  --ink:#241d17;
  --muted:#706559;
  --hair:rgba(36,29,23,.14);
  --edge:#8a8781;
  --accent:#8c4a32;
  --cta:#8c4a32;
  --on-accent:#fbf7f3;
  --danger:#cf0216;

  --paper:#faf7f2;

  --wash:#f2efe9;
  --sheet:#fff;
  --fig-ground:#f4f0ea;
  --fig-line:#3b3631;
  --fig-mark:var(--edge);
  --fig-oval:#ecd5c6;
  --serif:"Libre Baskerville",ui-serif,Georgia,"Times New Roman",Times,serif;
  --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
     -webkit-font-smoothing:antialiased}

.app-button[hidden]{display:none}

.timeline[hidden]{display:none}
img:not([hidden]){max-width:100%;height:auto;display:block}
a{color:inherit}

#app{max-width:450px;margin:0 auto;background:var(--paper);min-height:100dvh;
     display:flex;flex-direction:column}

.slide_top_bar{min-height:60px;padding:12px 0 0;display:grid;
  grid-template-columns:44px 1fr 44px;align-items:center;position:relative}

.main_back_button{grid-column:1;width:44px;height:44px;border:0;background:none;
  padding:0 0 0 14px;color:var(--ink);cursor:pointer;display:flex;align-items:center}
.main_back_button svg{width:20px;height:20px}
.slide_top_bar__text{grid-column:2;text-align:center;font-size:16px;line-height:20px;
  letter-spacing:.02em}
.main_progress_bar{grid-column:1/-1;margin:8px 24px 0;height:4px;background:var(--hair)}
.main_progress_bar i{display:block;height:100%;background:var(--ink);transition:width .3s}

.main_container{flex:1;display:flex;flex-direction:column}
.main_container__body{flex:1;display:flex;flex-direction:column}

.main_container>.main_container__body_viewport{margin-block:auto}

.main_container:has(> .app_top)>.main_container__body_viewport{margin-top:0}
.main_container__content{display:flex;flex-direction:column;gap:16px;padding-bottom:28px}
.main_container__element{margin:12px 0 0;padding:0 24px}

.slide_step{text-align:center;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:8px 24px 0}

.slide_step{display:flex;flex-wrap:wrap;justify-content:center;column-gap:1.6em;row-gap:2px}
.slide_step>span{white-space:nowrap}
.main_container__element--flush{padding:0}

.maintitle{font-size:24px;line-height:36px;font-weight:400;margin:16px 0 0;color:var(--ink)}
.maintitle em,.maintitle i{font-style:italic}
.text_component{font-size:18px;line-height:27px;margin:0;color:var(--muted)}
.text-align--center{text-align:center}
.text-tone--accent{color:var(--accent)}
.subtitle_component{font-size:14px;line-height:21px;color:var(--muted);margin:0}

.image_component{width:100%;background:var(--sheet);
  border:1px solid var(--hair);display:block}

.options_container{display:grid;gap:8px;margin:0}
.options_has_columns{grid-template-columns:repeat(var(--options-columns,2),minmax(0,1fr))}
.options_container .container{display:block;cursor:pointer;border:1px solid var(--hair)}

.options_container .container:focus-visible{outline:2px solid var(--ink);
  outline-offset:2px}
.options_container .ncard{background:var(--paper);color:var(--ink);border:0;height:100%}
.options_container .n-card__content{height:100%}
.options_container .label{display:flex;align-items:center;height:100%}
.options_container .n-card__content_inner{width:100%}

.options_container .text{font-size:clamp(14px,4.3vw,16px);line-height:20px;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}

.options_list .container{border:1px solid var(--hair)}
.options_list .ncard{display:flex;align-items:center;min-height:70px;padding:0 16px}

.options_list .n-card__content{flex:1;min-width:0}
.options_list .label{gap:6px;flex:1;min-width:0}
.options_list .text{text-align:left}
.options_list .container[aria-pressed="true"]{border-color:var(--ink)}

.options_tiles .container{border:1px solid var(--hair);overflow:hidden}
.options_tiles .ncard:not(.ncardimage){justify-content:center;text-align:center;
  padding:12px 8px;min-height:44px}
.options_tiles .ncard:not(.ncardimage) .label{justify-content:center}
.options_tiles .ncardimage .label{flex-direction:column;align-items:stretch;gap:0}
.options_tiles .ncardimage img.image{width:100%;aspect-ratio:var(--options-tile-image-aspect-ratio,1);
  object-fit:var(--options-image-fit,cover);display:block}
.options_tiles .ncardimage .n-card__content_inner{padding:var(--options-tile-label-padding,10px 6px);
  text-align:center}
.options_tiles .container[aria-pressed="true"]{border-color:var(--ink)}

.options_tiles .container.wide{grid-column:1/-1}
.options_tiles .container.wide .ncardimage .label{flex-direction:row;align-items:center}
.options_tiles .container.wide img.image{width:30%;flex:none}
.options_tiles .container.wide .n-card__content_inner{flex:1;text-align:left}
.options_tiles .container[aria-pressed="true"] .ncard:not(.ncardimage){background:var(--paper)}

.options_tiles img.swatch{outline:1px solid var(--edge);outline-offset:-1px}

.hint{display:block;font-family:var(--sans);font-size:12.5px;
  line-height:1.35;color:var(--muted);margin-top:4px}

.options_horizontal{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.options_horizontal .container{border:1px solid var(--hair)}
.options_horizontal .ncard{justify-content:center;padding:16px 0;text-align:center}
.options_horizontal .container[aria-pressed="true"]{border-color:var(--ink);background:var(--ink)}
.options_horizontal .container[aria-pressed="true"] .text{color:var(--paper)}
.scale_ends{display:flex;justify-content:space-between;font-family:var(--sans);
  font-size:13px;color:var(--muted);margin-top:8px}

.options_container .chk{width:22px;height:22px;flex:0 0 22px;margin-left:auto;
  border:1.8px solid var(--hair);position:relative}
.container[aria-pressed="true"] .chk{border-color:var(--ink)}
.container[aria-pressed="true"] .chk::after{content:"";position:absolute;left:7px;top:3px;
  width:5px;height:11px;border:solid var(--ink);border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}

.app-button{display:block;width:100%;border:1px solid transparent;background:var(--ink);
  color:var(--paper);font-family:var(--serif);font-size:16px;line-height:20.8px;padding:12px;
  text-align:center;cursor:pointer;text-decoration:none}
.app-button--colored{background:var(--app-button-color,var(--cta));border-color:transparent;
  color:var(--on-accent)}
.app-button--ghost{background:none;color:var(--ink);border-color:var(--ink)}
.app-button--text{background:none;color:var(--muted);border:0;text-decoration:underline;
  font-size:15px;padding:12px;min-height:44px}
.app-button[disabled],.app-button--disabled{opacity:.5;pointer-events:none}
.main_bottom_dock{position:sticky;bottom:0;background:var(--paper);padding:12px 24px
  calc(16px + env(safe-area-inset-bottom));z-index:5;
  box-shadow:0 -8px 20px var(--paper)}

.inputnumber-container,.inputstring-container{display:flex;gap:12px}
.n_input_number,.n_input_string{position:relative;flex:1}
.n_input_number input,.n_input_string input{width:100%;height:56px;border:1px solid var(--ink);
  border-radius:0;background:var(--paper);color:var(--ink);padding:.625rem 44px .625rem .625rem;
  font-family:var(--serif);font-size:18px}
.n_input_number input:focus,.n_input_string input:focus{outline:0;border-color:var(--ink)}

input::placeholder{color:var(--muted);opacity:1}
.n-input-number-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);text-transform:uppercase;font-family:var(--sans);font-size:13px}
.field_error{color:var(--danger);font-family:var(--sans);font-size:13px;margin-top:6px;display:none}
.is-bad input{border-color:var(--danger)}
.is-bad .field_error{display:block}

.plan_card{border:1px solid var(--hair);padding:16px;display:flex;align-items:center;gap:14px;
  min-height:44px;box-sizing:border-box;
  cursor:pointer;background:var(--paper);width:100%;text-align:left;font-family:var(--serif)}
.plan_card[aria-pressed="true"]{border-color:var(--ink)}
.plan_card .plan_price{margin-left:auto;text-align:right;white-space:nowrap}
.plan_card .plan_price b{font-size:20px}
.checkout_ul{list-style:none;padding:0;margin:0}
.checkout_ul li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--hair);
  font-size:16px;line-height:23px}
.checkout_ul li:last-child{border-bottom:0}
.checkout_ul li::before{content:"";position:absolute;left:5px;top:17px;width:6px;height:11px;
  border:solid var(--ink);border-width:0 1.7px 1.7px 0;transform:rotate(43deg)}
.faq_item{border-bottom:1px solid var(--hair)}

.faq_item summary{padding:15px 0;cursor:pointer;font-size:17px;list-style:none;
  min-height:44px;box-sizing:border-box;
  display:flex;align-items:center;gap:10px}
.faq_item summary::-webkit-details-marker{display:none}
.faq_item summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--muted)}
.faq_item[open] summary::after{content:"–"}
.faq_item p{margin:0 0 15px;font-family:var(--sans);font-size:15px;line-height:23px;color:var(--muted)}
.timeline{display:flex;gap:6px;padding:0 24px;margin:14px 0 0}
.timeline span{flex:1;height:3px;background:var(--hair)}
.timeline span.on{background:var(--ink)}
.brandbar{padding:16px 24px 0;display:flex;align-items:center;justify-content:center;gap:8px}
.brandbar .wordmark{font-size:19px;letter-spacing:.26em;text-transform:uppercase}
.swatch_grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.swatch_grid i{aspect-ratio:1;display:block}
.swatch_row{display:flex;gap:6px;flex-wrap:wrap}
.swatch_row i{width:40px;height:40px;display:block}

.swatch_row i[data-copy-colour]{position:relative;cursor:pointer}

.report_row .swatch_row i[data-copy-colour]::before{content:"";position:absolute;
  top:-10px;bottom:-10px;left:-2px;right:-2px}
.swatch_row i[data-copy-colour]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.swatch_row i[data-copied]::after{content:attr(data-copied);position:absolute;left:50%;
  bottom:calc(100% + 6px);transform:translateX(-50%);padding:3px 8px;white-space:nowrap;
  background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:12px;
  font-style:normal;line-height:1.4;pointer-events:none;z-index:2}
.board{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.board figure{margin:0}
.board img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--wash)}
.board figcaption{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:5px}

.kv{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--hair);
  align-items:baseline;overflow-x:clip}
.kv .k{color:var(--muted);font-family:var(--sans);font-size:13px;flex:0 0 42%}

.kv .v{flex:1;min-width:0;overflow-wrap:break-word}

.kv .v a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 8px;margin:0 -8px;max-width:100%;overflow-wrap:break-word}

[data-report-out]{margin:0;color:var(--ink)}

.note_box{border-left:3px solid var(--ink);padding:12px 16px;background:var(--wash);
  font-family:var(--sans);font-size:14px;line-height:21px}

.main_container__element--empty{display:none}
[data-empty] .main_container__element--empty{display:block}

[data-paid]{display:none}
[data-locked]{display:block}
html:not([data-gate]) [data-paid]{display:block}
html:not([data-gate]) [data-locked]{display:none}

[data-paid-stylist]{display:none}
[data-locked-stylist]{display:block}
html:not([data-gate-stylist]) [data-paid-stylist]{display:block}
html:not([data-gate-stylist]) [data-locked-stylist]{display:none}
[data-empty] [data-locked-stylist]{display:none}

[data-paid-book]{display:none}
[data-locked-book]{display:block}
html:not([data-gate-book]) [data-paid-book]{display:block}
html:not([data-gate-book]) [data-locked-book]{display:none}
[data-empty] [data-locked-book]{display:none}

html:not([data-gate]) [data-when-locked]{display:none}
html[data-gate] [data-when-open]{display:none}

[data-app-free]{display:none}
html[data-gate] [data-app-free]{display:block}

html[data-empty] [data-app-free]{display:none}

.dirmark{color:var(--ink);box-sizing:border-box;padding:8%}
[data-ios-only]{display:none}
html[data-ios-app] [data-ios-only]{display:block}
html[data-nosale] [data-web-only],
html[data-nosale] [data-locked],
html[data-nosale] [data-locked-stylist],
html[data-nosale] [data-locked-book],
html[data-nosale] a[href="paywall.html"],
html[data-nosale] a[href="subscription.html"],
html[data-nosale] a[href="upsell-stylebook.html"],
html[data-nosale] a[href="upsell-stylist.html"],

html[data-nosale]:not([data-member-book]) a[href="style-book.html"],
html[data-nosale]:not([data-member]) a[href="book-colour.html"],
html[data-nosale]:not([data-member]) a[href="book-direction.html"],
html[data-nosale]:not([data-member]) a[href="book-plan.html"],
html[data-nosale]:not([data-member]) a[href="book-shape.html"],
html[data-nosale]:not([data-member-stylist]) a[href="stylist.html"],
html[data-nosale]:not([data-member]) a[href="looks.html"]{display:none!important}

.main_container__element:has(> [data-apps][hidden]){display:none}
.main_container__element:has(> [data-gift][hidden]){display:none}
.main_container__element:has(> .handoff_empty){display:none}
html[data-empty="none"] .main_container__element:has(> .handoff_empty){display:block}
.apps_card{display:flex;flex-direction:column;gap:12px}
.apps_card [data-apps-android],.apps_card [data-apps-iphone]{display:flex;flex-direction:column;gap:12px}
.apps_card[hidden],.apps_card [hidden]{display:none}
.apps_card .text_component,.apps_card .small{margin:0}
.handoff_code{margin:0;font:600 28px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;
  color:var(--ink);text-align:center;padding:14px;border-radius:12px;background:var(--wash)}
.handoff_take{margin-top:10px;text-align:center}
.handoff_input{font:600 22px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;
  height:56px;padding:0 14px;border:1px solid var(--ink);border-radius:12px;background:var(--sheet);color:var(--ink);
  width:100%;box-sizing:border-box}
.handoff_error{color:var(--danger);margin:0}

.yw_when{margin:0 0 8px;letter-spacing:.08em;text-transform:uppercase}
.yw_list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.yw_list li{margin:0;line-height:1.45}

[data-empty] [data-locked]{display:none}

.main_container__element--loadfail{display:none}
[data-loadfailed] .main_container__element--loadfail{display:block}
[data-loadfailed] .main_container__element--palette{display:none}
[data-empty] .main_container__element--palette{display:none}

[data-empty] .app--palette .main_bottom_dock{display:none}
.main_container__element--empty .note_box{display:none}
[data-empty="none"] .note_box[data-empty-why="none"],
[data-empty="no-colour"] .note_box[data-empty-why="no-colour"],
[data-empty="other"] .note_box[data-empty-why="other"]{display:block}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px}

.table_wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table_wrap table{min-width:100%}

.doc_foot a{display:inline-block;min-height:32px;line-height:32px;padding:6px 2px}

.link_line a{display:inline-block;line-height:20px;padding:12px 0}

input[type="url"]{min-height:44px;width:100%;padding:12px;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:16px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--hair);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tabbar{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--hair);display:flex;
  padding-bottom:env(safe-area-inset-bottom);z-index:6}
.tabbar a{flex:1;text-align:center;padding:9px 2px 11px;font-family:var(--sans);font-size:11px;
  color:var(--muted);text-decoration:none}
.tabbar a.on{color:var(--ink)}
.tabbar a i{display:block;font-style:normal;font-size:17px;line-height:1.4}
.tabbar a i svg{display:block;width:22px;height:22px;margin:2px auto 3px}
.week_strip{display:flex;gap:4px}
.week_strip div{flex:1;text-align:center;font-family:var(--sans);font-size:11px;color:var(--muted)}
.week_strip div b{display:block;margin:4px auto 0;width:30px;height:30px;line-height:30px;
  font-size:13px;font-weight:400;color:var(--ink)}
.week_strip div.on b{background:var(--ink);color:var(--paper)}
.spinner{width:34px;height:34px;border:3px solid var(--hair);border-top-color:var(--ink);
  border-radius:50%;animation:sp .9s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
.steps{list-style:none;padding:0;margin:0;font-family:var(--sans);font-size:15px}
.steps li{padding:7px 0 11px;color:var(--muted);position:relative;
  padding-right:30px}
.steps li.on{color:var(--ink)}
.steps li.done{color:var(--ink);opacity:.7}

.steps_bar{display:block;height:3px;margin-top:7px;border-radius:2px;
  background:var(--edge);overflow:hidden}
.steps_bar i{display:block;height:100%;width:0;border-radius:2px;
  background:var(--ink)}
.steps li.on .steps_bar i{width:40%;animation:steps_run 1.1s ease-in-out infinite}
.steps li.done .steps_bar i{width:100%;transition:width .25s ease-out}
@keyframes steps_run{0%{transform:translateX(-105%)}100%{transform:translateX(255%)}}
@media (prefers-reduced-motion:reduce){
  .steps li.on .steps_bar i{width:100%;opacity:.3;animation:none}}

.steps_tick{position:absolute;right:0;top:6px;width:19px;height:19px;
  border-radius:50%;background:var(--accent);opacity:0;transform:scale(.7);
  transition:opacity .18s ease-out,transform .18s ease-out}
.steps_tick::after{content:"";position:absolute;left:6px;top:4px;width:5px;
  height:9px;border:solid var(--paper);border-width:0 2px 2px 0;
  transform:rotate(45deg)}
.steps li.done .steps_tick{opacity:1;transform:scale(1)}
.small{font-family:var(--sans);font-size:13px;line-height:20px;color:var(--muted)}
.center{text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.save_btn{position:absolute;top:4px;right:4px;z-index:2;width:44px;height:44px;
  box-sizing:border-box;padding:2px;
  border:0;background:var(--paper);color:var(--ink);font-size:17px;line-height:40px;
  cursor:pointer}

.save_btn{background-clip:content-box}
.save_btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
[data-tabs] .container{cursor:pointer}

.chat_head{display:flex;gap:12px;align-items:center;padding:12px 24px;border-bottom:1px solid var(--hair)}
.chat_avatar{width:40px;height:40px;flex:0 0 40px;background:var(--ink)}
.chat_log{padding:16px 24px;display:flex;flex-direction:column;gap:14px;min-height:44vh}
.chat_row{max-width:88%}
.chat_row--me{align-self:flex-end;text-align:right}
.chat_bubble{border:1px solid var(--hair);padding:12px 14px;font-size:16px;line-height:24px}
.chat_row--me .chat_bubble{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chat_bubble p{margin:0 0 8px}.chat_bubble p:last-child{margin:0}
.chat_bubble ul{margin:8px 0;padding-left:18px}
.chat_bubble li{margin:0 0 6px}
.chat_time{font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:4px}
.chat_quick{display:flex;gap:8px;overflow-x:auto;padding:8px 24px}
.chat_chip{flex:0 0 auto;border:1px solid var(--hair);background:var(--paper);padding:9px 14px;
  font-family:var(--serif);font-size:14px;cursor:pointer;min-height:40px}

.chat_chip[hidden]{display:none}

.chat_typing{display:inline-flex;gap:4px;font-size:20px;line-height:24px;color:var(--muted)}
.chat_typing i{font-style:normal;animation:chat_dot 1s infinite ease-in-out}
.chat_typing i:nth-child(2){animation-delay:.15s}
.chat_typing i:nth-child(3){animation-delay:.3s}
@keyframes chat_dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat_input{display:flex;gap:8px;padding:10px 24px 18px;position:sticky;bottom:0;background:var(--paper)}
.chat_input input{flex:1;border:1px solid var(--ink);padding:13px;font-family:var(--serif);
  font-size:16px;min-height:48px}
.chat_input button{width:48px;min-height:48px;border:0;background:var(--cta);
  color:var(--on-accent);cursor:pointer}

.panel{border:1px solid var(--hair);padding:16px;margin:14px 0;background:var(--paper)}
.panel h3{margin-top:0}
.panel p:last-child{margin-bottom:0}
.day{font-family:var(--sans);font-size:13px;color:var(--muted);margin:0 0 4px}

body.landing{background:var(--wash);font-family:var(--sans)}
body.landing #app{background:var(--wash);max-width:560px}

.util_bar{display:none}
:root[data-subscribed] .util_bar{display:block}
.util_bar{background:var(--ink);color:var(--paper);text-align:center;
  padding:10px 16px;font-size:13px;line-height:1.5}
.util_bar a{color:var(--paper);text-decoration:underline}
.site_head{display:flex;align-items:center;gap:12px;padding:14px 20px;
  position:sticky;top:0;background:var(--wash);z-index:10;
  box-shadow:0 6px 12px -6px rgba(36,29,23,.10)}
.site_head .mark{font-family:var(--serif);font-size:19px;font-style:italic;font-weight:700}
.site_head .lang{margin-left:auto;border:1px solid var(--hair);background:var(--paper);
  padding:9px 14px;font-family:var(--sans);font-size:14px;min-height:40px}

.hero_arch{margin:8px 20px 0;border-radius:50% 50% 10px 10px / 32% 32% 10px 10px;
  overflow:hidden;aspect-ratio:3/4;max-height:min(40vh,330px);
  background:var(--sheet);border:1px solid var(--hair)}

.hero_arch img{width:100%;height:100%;object-fit:contain;display:block}
.display{font-family:var(--serif);font-size:38px;line-height:41.8px;font-weight:700;
  letter-spacing:-.76px;text-align:center;margin:26px 20px 12px}

.pal_wall{margin:4px 0 14px}
.early_pal{border:1px solid var(--hair);background:var(--paper);padding:14px 16px;margin:0 0 18px}
.early_pal:empty{display:none}
.early_pal_eyebrow{margin:0 0 4px;font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6b625a)}
.early_pal .maintitle{margin:0 0 10px}
.pal_wall_row--mine{outline:2px solid var(--ink);outline-offset:3px}
.pal_wall_says{margin:0 0 14px;font-family:var(--sans);font-size:14px;
  line-height:1.45;color:var(--ink)}
.pal_wall_family{margin:16px 0 6px;font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:500}
.pal_wall_row{margin-bottom:12px}
.pal_wall_chips{display:flex;gap:0}
.pal_wall_chips i{flex:1;height:26px;display:block}
.pal_wall_name{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
  margin-top:5px}
.pal_wall_name b{font-family:var(--sans);font-size:14px;font-weight:500;
  line-height:1.3}
.pal_wall_name span{font-family:var(--sans);font-size:12px;line-height:1.3;
  color:var(--muted)}

.guide_item{display:block;padding:14px 0;border-bottom:1px solid var(--hair);
  text-decoration:none;color:var(--ink)}
.guide_item:first-child{border-top:1px solid var(--hair)}
.guide_item_name{display:block;font-family:var(--serif);font-size:19px}
.guide_item_line{display:block;font-family:var(--sans);font-size:13px;
  line-height:19px;color:var(--muted);margin-top:4px}
.ot_card{border:1px solid var(--hair);margin:4px 0 0}
.ot_row{padding:12px 14px;border-bottom:1px solid var(--hair)}
.ot_row:last-child{border-bottom:0}
.ot_piece{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ot_piece b{font-family:var(--serif);font-size:16px;font-weight:400}
.ot_col{font-family:var(--sans);font-size:13px;color:var(--muted);
  text-align:right;flex:0 0 auto}
.ot_why{font-family:var(--sans);font-size:13px;line-height:19px;color:var(--muted);
  margin:5px 0 0}
.proof_row{list-style:none;margin:14px 20px 0;padding:0;border-top:1px solid var(--hair)}
.proof_row li{font-family:var(--sans);font-size:14px;line-height:21px;
  color:var(--muted);padding:11px 0;border-bottom:1px solid var(--hair)}
.proof_row b{color:var(--ink);font-weight:500}
.lede{font-family:var(--sans);font-size:16px;line-height:26px;color:var(--muted);
  text-align:center;margin:0 20px 22px}
.cta_stack{padding:0 20px;display:grid;gap:10px}
.cta_stack a{display:block;text-align:center;padding:16px;font-family:var(--sans);
  font-size:16px;font-weight:500;text-decoration:none;min-height:52px}

.cta_primary{background:var(--cta);color:var(--on-accent);font-size:17px;
  min-height:56px;letter-spacing:.01em;display:flex;align-items:center;
  justify-content:center;padding:14px 16px;box-sizing:border-box;
  text-align:center;text-decoration:none;font-family:var(--sans);
  font-weight:500;line-height:1.25;cursor:pointer}

.cta_primary[hidden]{display:none}
.cta_secondary{background:var(--wash);color:var(--ink)}
.steps_list{padding:34px 20px 0}
.step_row{display:flex;gap:18px;margin-bottom:30px}
.step_row .num{font-family:var(--serif);font-size:52px;line-height:.9;font-weight:700;
  flex:0 0 46px}
.step_row h2,.step_row h3{font-family:var(--sans);font-size:19px;line-height:26px;font-weight:700;
  margin:0 0 8px}
.step_row p{font-family:var(--sans);font-size:15px;line-height:25px;color:var(--muted);margin:0}
.band{background:var(--paper);margin-top:34px;padding:30px 20px}

.band--wash{background:var(--wash)}
.band h2{font-family:var(--serif);font-size:27px;line-height:1.22;font-weight:700;
  letter-spacing:-.4px;margin:0 0 14px;text-align:center}
.band p,.band li{font-family:var(--sans);font-size:15px;line-height:25px;color:var(--muted)}
.site_foot{padding:30px 20px 40px;font-family:var(--sans);font-size:13px;
  line-height:22px;color:var(--muted)}

.site_foot a{color:var(--ink);text-decoration:none;display:inline-block;
  min-height:34px;line-height:34px;padding:5px 0;margin-right:16px}
@media(min-width:560px){.display{font-size:44px;line-height:48px}}

.react_mark{color:var(--ink);margin:4px 0 -4px}
.art_mark{color:var(--ink);margin:6px 0}
.report_card{border:1px solid var(--hair);background:var(--paper)}
.report_row{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--hair);font-family:var(--sans);font-size:14px;
  color:var(--muted)}
.report_row:last-child{border-bottom:0}

a.report_row--go{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a.report_row--go::after{content:"\203A";margin-left:6px;color:var(--muted);font-size:18px;line-height:1}
a.report_row--go:active{background:var(--wash)}

.next_row > span{display:grid;gap:2px;min-width:0}
.next_row{min-height:44px}
a.next_row::after{margin-left:auto}
.next_t{font-family:var(--serif);font-size:16px;color:var(--ink)}
.next_s{font-family:var(--sans);font-size:13px;color:var(--muted)}
.next_steps .report_card > div[data-locked] > .report_row{border-bottom:1px solid var(--hair)}

.guide_sections{display:flex;gap:18px;overflow-x:auto;padding:4px 0 10px;margin:0 0 6px;
  border-bottom:1px solid var(--hair);font-size:14px;white-space:nowrap;scrollbar-width:none}
.guide_sections::-webkit-scrollbar{display:none}
.guide_sections a{color:var(--muted);text-decoration:none;padding:4px 0}
.guide_sections a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--ink)}
.guide_me{font-size:13px;color:var(--ink);margin-left:auto;margin-right:12px;white-space:nowrap}
.me_mine{display:inline-block;margin:6px 0 0;padding:4px 10px;border:1px solid var(--ink);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.me_mine[hidden]{display:none}
#palette,#outline,#direction,#shop,#beauty,#friend,#save,#worn{scroll-margin-top:72px}
.report_row b{margin-left:auto;font-family:var(--serif);font-size:16px;color:var(--ink);
  font-weight:400}
.report_row .swatch_row{margin-left:auto;gap:4px}

.report_row .swatch_row i{width:24px;height:24px}
.guide_row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0}
.guide_cover{margin:0}
.guide_cover img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  background:var(--wash)}
.guide_cover figcaption{font-family:var(--sans);font-size:10px;line-height:1.3;
  color:var(--muted);margin-top:5px;text-align:center}
.logomark{display:block;flex:0 0 24px}

.unsure_out{display:block;border:1px solid var(--hair);padding:14px 16px;
  min-height:44px;box-sizing:border-box;
  margin-top:16px;font-family:var(--sans);font-size:14.5px;color:var(--ink);
  text-decoration:none}
.unsure_out span{display:block;font-size:13px;color:var(--muted);margin-top:4px;
  line-height:1.45}
.image_failed{background:var(--wash);object-fit:contain;color:var(--muted);font-size:12px}
a.small{display:inline-block;min-height:24px}

.hero_shot{position:relative}
.hero_shot picture,.welcome_photo picture{display:block}

.hero_shot img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}

.hero_shot--wide img{aspect-ratio:auto;height:min(56vh,430px);
  object-fit:contain;object-position:50% 50%;background:var(--paper)}

@media (max-width:560px){.hero_shot--wide img{height:min(36vh,290px)}}
.kicker{margin:0 0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.kicker--top{text-align:center}

.kicker--under{text-transform:none;letter-spacing:0;font-size:17px;
  line-height:1.35;text-align:center;font-family:var(--serif);
  font-style:italic;color:var(--accent);margin:-4px 0 14px}

.landing_pad--top{padding:16px 20px 18px}
.landing_pad--top .display{margin:0 0 14px;text-align:center;font-size:clamp(26px,7vw,32px)}
.lede--after{margin:16px 0 0;text-align:center;font-size:14px}

.landing_pad{padding:22px 20px}

.options_ages img.image{object-position:50% 8%}
@media(min-width:560px){
  .options_tiles.options_ages{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.landing .lede{margin:0 0 18px}

.stepbar{margin:0 0 14px}
.stepbar p{display:flex;justify-content:space-between;gap:10px;margin:0 0 6px;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.stepbar_b{height:3px;background:var(--hair)}
.stepbar_b i{display:block;height:3px;background:var(--cta)}

.read_row{margin:0 0 12px;color:var(--muted)}
.read_row b{color:var(--ink)}

.unlock_row{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--hair)}
.unlock_row b{display:block}
.unlock_row span{font-size:13px;color:var(--muted)}
.unlock_row em{font-style:normal;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);flex:none}

.stickbar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;
  gap:12px;justify-content:space-between;background:var(--paper);
  border-top:1px solid var(--hair);padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 18px rgba(36,29,23,.07)}
.stickbar[data-wait]{visibility:hidden}
.stickbar b{display:block;font-size:13px}
.stickbar span{font-size:11.5px;color:var(--muted)}
.stickbar a{background:var(--cta);color:var(--on-accent);padding:12px 18px;
  font-size:14px;text-decoration:none;flex:none;min-height:44px;
  display:inline-flex;align-items:center}

.cc_pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.cc_one i{display:block;height:58px;border:1px solid var(--edge)}
.cc_one span{display:block;margin:7px 0 1px;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.cc_one b{font-size:14.5px;font-weight:500}

.scan_or{font-family:var(--serif);font-weight:400;font-size:17px;
  margin:22px 0 8px;padding-top:18px;border-top:1px solid var(--hair)}

.crop{margin:14px 0 0}
.crop_stage{position:relative;line-height:0;border:1px solid var(--edge)}
.crop_stage canvas{width:100%;height:auto;display:block}
.crop_mask{position:absolute;left:0;right:0;top:0;background:var(--ink);
  opacity:.93;pointer-events:none;
  border-bottom:2px solid var(--cta)}
.crop_lab{display:block;margin:12px 0 6px;font-size:13px;color:var(--muted)}
input[type="range"]{width:100%;min-height:44px;accent-color:var(--cta)}
.consent_row{display:flex;gap:10px;align-items:flex-start;margin:6px 0;
  font-size:14px;line-height:1.5;min-height:44px}

.consent_row input{min-width:24px;min-height:24px;width:24px;height:24px;
  margin-top:2px;flex:none;accent-color:var(--cta)}

.oc{border:1px solid var(--edge);background:var(--paper);padding:14px 16px 4px;
  position:relative;margin:22px 0 10px}
.oc_tag{position:absolute;top:-9px;left:14px;background:var(--cta);
  color:var(--on-accent);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px}

.oc_row{display:flex;gap:12px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--hair)}
.oc_row:last-child{border-bottom:0}
.oc_body{flex:1;min-width:0}
.oc_mark{flex:0 0 34px;line-height:0;margin-top:2px}

.oc_p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;
  align-items:baseline}
.oc_p b{font-weight:500}
.oc_p span{font-size:13px;color:var(--accent)}
.oc_w{margin:3px 0 0;font-size:12.5px;color:var(--muted)}

.oc--sample{border-style:dashed}
.oc_says{margin:14px 0 0;text-align:center;font-family:var(--sans);
  font-size:14px;line-height:1.45;color:var(--ink)}

.cta_primary--first{padding:17px;font-size:16.5px}

.age_hint{margin:14px 0 8px;text-align:center;font-family:var(--sans);font-size:13px;color:var(--muted)}
.age_chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 20px}
.age_chip{min-height:44px;border:1px solid var(--edge);border-radius:999px;background:transparent;
  color:var(--ink);font-family:var(--sans);font-size:15px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.age_chip:active,.age_chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.flow{margin:0 0 14px}
.flow_in{display:flex;gap:8px;justify-content:center}
.flow_in figure{margin:0}
.flow_in img{width:58px;height:58px;object-fit:cover;display:block;
  border:1px solid var(--hair)}
.flow_in figcaption{font-size:10.5px;color:var(--muted);text-align:center;
  margin-top:4px}
.flow_arrow{color:var(--accent);font-size:22px;line-height:1;text-align:center;
  margin:8px 0 6px;transform:rotate(90deg)}
.flow_out{text-align:center}
.flow_out b{font-family:var(--serif);font-size:20px}
.flow_strip{display:flex;gap:3px;margin:8px 0 7px}
.flow_strip i{flex:1;height:34px;display:block}
.flow_out p{margin:0;font-size:12.5px;color:var(--muted)}
.flow_out span{font-size:10px;letter-spacing:.09em;text-transform:uppercase}

.image.drawn{display:block;width:100%;aspect-ratio:var(--options-tile-image-aspect-ratio,1/1);
  overflow:hidden;line-height:0;background:var(--wash)}
.image.drawn svg{display:block;width:100%;height:100%}

.langrow{display:flex;flex-wrap:wrap;align-items:center;width:100%;
  order:2;margin:2px 0 0;gap:0 clamp(8px,2.6vw,18px)}

.langrow_a,.langrow_on{font-size:clamp(11.5px,3.7vw,13px);line-height:20px;padding:12px 0;
  letter-spacing:.01em;white-space:nowrap}
.langrow_a{color:var(--ink);opacity:.66;text-decoration:none}
.langrow_a:hover,.langrow_a:focus-visible{opacity:1;text-decoration:underline;
  text-underline-offset:3px}
.langrow_on{color:var(--accent);font-weight:600;opacity:1}
.site_head{flex-wrap:wrap;gap:0 10px}
@media(min-width:560px){
  .langrow{width:auto;order:0;margin:0 0 0 auto}
}

.lang_note{margin:0 0 14px;padding:9px 11px;border-left:2px solid var(--accent);
  background:var(--sand);color:var(--muted)}

.ph_bar{grid-column:1/-1;margin:8px 24px 0;display:flex;gap:5px;
  align-items:center;min-width:0}
.ph_seg{flex:1;height:4px;border-radius:2px;background:var(--hair);
  overflow:hidden}
.ph_seg i{display:block;height:100%;background:var(--ink);border-radius:2px;
  transition:width .3s ease-out}
.ph_seg--done i{background:var(--accent)}
.ph_name{margin:0;font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:center}

.ph_done{display:flex;flex-direction:column;align-items:center;gap:2px;
  margin:0 auto 6px}
.ph_done b{display:grid;place-items:center;width:58px;height:58px;
  border-radius:50%;background:var(--accent);color:var(--paper);
  font-family:var(--sans);font-size:17px;font-weight:600}
.ph_done span{font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.ph_done em{font-family:var(--sans);font-size:12px;font-style:normal;
  color:var(--muted);opacity:.8}

.mark_hero{position:relative;margin:0;display:block}
.mark_hero .image_component{display:block;width:100%;height:auto;
  max-height:64vh;object-fit:cover;object-position:center 22%}
.mark_hero figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:72px 22px 22px;color:#fff;
  background:linear-gradient(to top,rgba(20,15,11,.92) 0%,
    rgba(20,15,11,.72) 42%,rgba(20,15,11,0) 100%)}
.mark_hero .maintitle{color:#fff;margin:0 0 8px;text-align:center}
.mark_hero .text_component{color:rgba(255,255,255,.88);margin:0;
  text-align:center;font-size:14px;line-height:1.5}
@media (min-width:560px){
  .mark_hero .image_component{max-height:56vh}
}

.scale_ask{margin:0;font-family:var(--sans);font-size:13px;color:var(--muted);
  text-align:center}
.scale_says{margin:14px 0 0;padding:0;font-family:var(--serif);font-size:23px;
  line-height:1.35;text-align:center;text-wrap:balance}
.scale_says::before{content:"\201C"}
.scale_says::after{content:"\201D"}

.scale_ends{display:flex;justify-content:space-between;margin:30px 2px 8px;
  font-family:var(--sans);font-size:12px;color:var(--muted)}
.scale_row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale_row .container{margin:0}
.scale_row .ncard{min-height:60px;display:grid;place-items:center}
.scale_row .text{font-family:var(--sans);font-size:18px;
  font-variant-numeric:tabular-nums}

.slider_wrap{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.slider_out{align-self:center;font-family:var(--sans);font-size:26px;
  font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}

.slider_in{-webkit-appearance:none;appearance:none;width:100%;height:28px;
  background:transparent;outline:none;margin:0}
.slider_in::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:var(--hair)}
.slider_in::-moz-range-track{height:4px;border-radius:2px;
  background:var(--hair)}
.slider_in::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;
  margin-top:-13px;border-radius:50%;background:var(--accent);
  border:3px solid var(--paper);box-shadow:0 1px 4px rgba(36,29,23,.3);
  cursor:pointer}
.slider_in::-moz-range-thumb{width:30px;height:30px;border-radius:50%;
  background:var(--accent);border:3px solid var(--paper);cursor:pointer}
.slider_in:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.slider_ticks{display:flex;justify-content:space-between;
  font-family:var(--sans);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}

.wearfig{margin:0 0 20px;display:block}

.wearfig .image_component{display:block;height:52vh;width:auto;max-width:100%;
  margin:0 auto;object-fit:contain}
.wear_row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wear_row .container{margin:0}
.wear_row .ncard{min-height:62px;display:grid;place-items:center;
  text-align:center}
.wear_row .text{font-family:var(--sans);font-size:14px;line-height:1.3}

[data-suggested]{box-shadow:inset 0 0 0 1px var(--accent)}
[data-suggested]::after{content:"";position:absolute;right:14px;top:50%;
  width:7px;height:7px;margin-top:-3px;border-radius:50%;
  background:var(--accent)}
.options_list [data-suggested]{position:relative}

.pw_hero{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;
  border-radius:0 0 28px 28px}
.pw_title{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.12;
  margin:22px 0 12px;text-wrap:balance}
.pw_say{font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--ink);
  margin:0 0 10px}
.pw_cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 20px}
.pw_card{display:flex;flex-direction:column;align-items:center;gap:6px;
  min-height:96px;padding:16px 10px;box-sizing:border-box;cursor:pointer;
  background:var(--paper);border:1px solid var(--hair);font-family:var(--serif);
  color:var(--ink)}
.pw_card[aria-pressed="true"]{border:2px solid var(--ink);padding:15px 9px}
.pw_days{font-family:var(--sans);font-size:14px;color:var(--muted)}
.pw_price{font-size:30px;font-weight:400;line-height:1.1}
.pw_for{margin:18px 0 -10px;font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--accent)}
.pw_cancel{margin:2px 0 0;text-align:center;color:var(--muted)}
.pw_actions{display:grid;gap:10px}
.pw_actions .app-button--ghost{border-width:1px}
.pw_fine{margin:10px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;
  text-align:center;color:var(--muted)}

.pw_fine a{color:inherit;display:inline-block;padding:12px 2px;line-height:20px}

.why{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink);
  margin:6px 0 18px;padding-left:12px;border-left:2px solid var(--hair)}
.why b{font-weight:600}
.close_call{display:grid;gap:12px;margin:16px 0}
.close_call details summary{cursor:pointer;min-height:24px;font-size:15px}
.mirror_row{display:grid;gap:8px;margin:12px 0}

.drape[hidden]{display:none}
.drape:not([hidden]){position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column}
.drape_face{flex:1;min-height:320px;border:0;background:transparent;cursor:pointer;font:600 64px/1 var(--serif);
  color:rgba(255,255,255,.8);text-shadow:0 0 8px rgba(0,0,0,.35)}
.drape_bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--paper)}

.edit_answers{margin:16px 0}
.edit_answers .edit_q{margin:0 0 8px}
.edit_answers .panel{margin:0;padding:0 16px}
.edit_answers .panel>:last-child{border-bottom:0}
.edit_answers .kv{align-items:center;padding:6px 0}

.edit_answers .kv .k{flex-basis:30%}
.edit_answers .kv .v{display:flex;align-items:center;justify-content:space-between;gap:12px}
.edit_answers .edit_v{min-width:0;overflow-wrap:break-word;hyphens:auto}
.edit_answers .link_btn{flex:0 0 auto;min-height:44px;font-family:var(--sans);font-size:14px;color:var(--muted)}
.edit_opts{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 14px;border-bottom:1px solid var(--hair)}
.edit_opts .chat_chip[aria-pressed=true]{border-color:var(--ink);font-weight:600}
.edit_answers .edit_said{margin:10px 0 0;color:var(--ink)}
.match_block{display:grid;gap:10px;margin:16px 0}
.match_block .match_q{margin:0}
.match_answers{display:flex;gap:8px}
.match_answers .app-button{flex:1 1 0;min-width:0}
.match_reasons{display:flex;flex-wrap:wrap;gap:8px}
.match_reasons .chat_chip{text-align:left;white-space:normal}
.harder_list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.harder_list li{display:flex;align-items:center;gap:10px}
.harder_list li i{flex:0 0 22px;height:22px;border-radius:50%;border:1px solid var(--hair)}
.harder_list li span{flex:1 1 auto}
.harder_list li button{flex:0 0 auto;white-space:nowrap}
.harder_list li button[aria-pressed=true]{font-weight:600}
.pw_mine{display:grid;gap:10px;margin:18px 0;padding:14px 16px;border:1px solid var(--hair);background:var(--wash)}
.pw_mine:empty{display:none}
.pw_mine p{margin:0;font-size:15px;line-height:1.5}
.pw_mine .pw_name{font-size:16px}
.share_block{display:grid;gap:10px;margin:18px 0}
.share_block[hidden]{display:none}
.wear_line{display:flex;align-items:center;gap:8px;margin:4px 0 6px;flex-wrap:wrap}
.wear_line span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wear_line i,.wear_mates i{width:22px;height:22px;flex:0 0 22px;display:inline-block;border:1px solid var(--hair)}
.wear_mates{display:flex;flex-wrap:wrap;gap:8px 14px;list-style:none;padding:0;margin:4px 0 22px}
.wear_mates li{display:flex;align-items:center;gap:6px;font-size:14px}
.link_btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;min-height:24px}
.link_btn[hidden]{display:none}

.link_btn[data-wd-add]{min-height:44px;padding:0 6px}

.proof_line{margin:24px 0 8px;padding:18px 18px 17px;text-align:center;
  background:rgba(140,74,50,.07);border:1px solid var(--accent);border-radius:14px;
  font-family:var(--serif);font-size:19px;line-height:1.4;color:var(--ink);
  text-wrap:balance}
.proof_n{font-size:1.7em;line-height:1;font-weight:700;color:var(--accent);
  white-space:nowrap;letter-spacing:-.01em}

.reviews{display:grid;gap:12px;margin:14px 0 6px}
.review{margin:0;padding:16px 18px 15px;background:var(--wash);
  border:1px solid var(--hair);border-radius:14px}
.review_stars{color:var(--accent);font-size:17px;letter-spacing:2px;line-height:1}
.review_text{margin:10px 0 12px;font-family:var(--sans);font-size:16px;
  line-height:1.55;color:var(--ink)}
.review_who{display:flex;align-items:center;gap:10px}
.review_avatar{flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:var(--on-accent);
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em}
.review_name{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}

.sr_only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.opt_note{display:block;font-family:var(--sans);font-size:12px;
  line-height:1.3;color:var(--accent);margin-top:3px}

.book_cover{border:1px solid var(--hair);border-radius:12px;padding:20px;margin:8px 0 16px}
.book_swatch{display:block;height:64px;border-radius:8px;margin-bottom:12px}
.book_print{margin:0 0 8px}
.book_part{margin-top:36px}
.book_h{font-family:var(--serif);font-weight:400;font-size:19px;margin:28px 0 8px}
.book_outline{height:200px;width:auto;margin:0 auto}
.book_mark{display:none}
.book_date{color:var(--muted)}
.print_only{display:none}
@media print{

  @page{size:A4;margin:22mm 18mm 20mm;background:#f5f1eb;
    @top-center{content:var(--book-title,"MondeStyle");font:italic 9pt Georgia,serif;color:#8a7f73}
    @bottom-center{content:"·  M O N D E S T Y L E  ·";font:8pt Georgia,serif;color:#241d17}}
  @page :first{@top-center{content:none}@bottom-center{content:none}}
  html,body,#app{background:transparent!important}
  #app{max-width:none;min-height:0}
  .tabbar,.brandbar,.book_print,.book_screen,.book_mark,.book_cover,.book_date,
  .main_bottom_dock,[data-langnote],.back_btn{display:none!important}
  .print_only{display:block}

  .main_container__element{padding:0;margin:0}
  .main_container__content{gap:0;padding:0}
  .book_coverpage{position:relative;height:240mm;width:100%;margin:0;overflow:hidden;
    break-after:page;background:#2e2822;border-radius:2mm}
  .book_coverpage img{width:100%;height:100%;object-fit:cover;max-width:none;opacity:.92}
  .book_coverpage_text{position:absolute;left:0;right:0;top:26mm;text-align:center;color:#fff;
    padding:0 18mm}
  .book_brand{font-family:var(--serif);letter-spacing:.35em;font-size:12pt;margin:0 0 14mm}
  .book_cover_title{font-family:var(--serif);font-weight:400;font-size:40pt;line-height:1.1;margin:0}
  .book_cover_sub{font-family:var(--sans);font-size:12pt;margin:8mm 0 0;opacity:.95}
  .book_contents{break-after:page;padding-top:10mm}
  .book_kicker{font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;font-size:9pt;
    color:var(--muted);margin:0 0 8mm}
  .book_toc p{margin:0;padding:7mm 0;border-bottom:1px solid #cfc6bb;font-size:13pt}
  .book_toc i{font-family:var(--serif);color:var(--accent)}
  .book_toc b{font-family:var(--serif);font-size:20pt;font-weight:400}
  .book_toc span{display:block;font-family:var(--sans);font-size:11pt;color:var(--ink);margin-top:2mm}
  .book_divider{break-before:page;break-after:page;padding-top:95mm}
  .book_part_no{font-family:var(--serif);font-style:italic;font-size:28pt;color:var(--accent);margin:0}
  .book_part_title{font-family:var(--serif);font-size:48pt;line-height:1.05;margin:6mm 0 8mm}
  .book_part_sub{font-family:var(--sans);font-size:13pt;color:var(--muted);max-width:130mm}
  .book_part{margin-top:0}
  .book_part img.book_outline{height:95mm;width:auto;margin:4mm auto 6mm}

  .book_prefs:has(.prefs_skipped){display:none}
  .book_part > .maintitle{display:none}
  .text_component{font-size:11.5pt;line-height:1.55}
  .small{font-size:9.5pt}
  .maintitle,.book_h{break-after:avoid}
  .kv,.note_box,li,.panel{break-inside:avoid}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.welcome_top{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
  padding:14px 24px 0}
.welcome_top .wordmark{letter-spacing:.28em;font-size:13px;text-transform:uppercase}
.welcome_photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:4px}
.welcome_list{list-style:none;margin:16px 0 4px;padding:0}
.welcome_list li{display:grid;gap:2px;padding:11px 0;border-top:1px solid var(--hair)}
.welcome_list li:last-child{border-bottom:1px solid var(--hair)}
.welcome_list b{font-family:var(--serif);font-weight:400;font-size:17px;line-height:24px}
.welcome_list span{font-family:var(--sans);font-size:14px;line-height:20px;color:var(--muted)}
.welcome_meta{margin:12px 0 0}
.welcome_meta::first-letter{text-transform:uppercase}
.welcome_meta--next{margin-top:0}
.welcome_note{margin:10px 0 0}

@view-transition{navigation:auto}
.slide_top_bar{view-transition-name:topbar}
.tabbar{view-transition-name:tabbar}
::view-transition-old(root){animation:.18s ease-in both vt-out}
::view-transition-new(root){animation:.26s cubic-bezier(.2,.8,.2,1) both vt-in}
@keyframes vt-in{from{transform:translateX(32px);opacity:0}}
@keyframes vt-out{to{transform:translateX(-16px);opacity:0}}
html:active-view-transition-type(back)::view-transition-new(root){animation-name:vt-in-back}
html:active-view-transition-type(back)::view-transition-old(root){animation-name:vt-out-back}
@keyframes vt-in-back{from{transform:translateX(-32px);opacity:0}}
@keyframes vt-out-back{to{transform:translateX(16px);opacity:0}}
html:active-view-transition-type(tab)::view-transition-new(root){animation:.2s ease both vt-fade-in}
html:active-view-transition-type(tab)::view-transition-old(root){animation:.12s ease both vt-fade-out}
@keyframes vt-fade-in{from{opacity:0}}
@keyframes vt-fade-out{to{opacity:0}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

.tabbar{background:color-mix(in srgb,var(--paper) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px)}
.tabbar a.on svg{stroke-width:2}

html[data-twa]{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
html[data-twa] body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html[data-twa] input,html[data-twa] textarea,html[data-twa] .chat_log{
  -webkit-user-select:text;user-select:text}
html[data-twa] a,html[data-twa] button,html[data-twa] label,
html[data-twa] [role=button]{touch-action:manipulation}
html[data-twa] img{-webkit-user-drag:none}
html[data-twa] .app-button,html[data-twa] .container,html[data-twa] .cta_primary{
  transition:transform .12s ease}
html[data-twa] .app-button:active,html[data-twa] .container:active,
html[data-twa] .cta_primary:active{transform:scale(.98)}
html[data-twa] .tabbar a:active{opacity:.6}

html[data-ios-app] .tabbar{display:none!important}

html[data-ios-app] #welcome{visibility:hidden}

.teaser{display:grid;gap:14px}
.board--preview{pointer-events:none;user-select:none}
.board--preview img{filter:blur(7px) saturate(.9);transform:scale(1.04)}
.board--preview figure{overflow:hidden}
.board--preview figcaption{visibility:hidden}

.teaser--locked .small{margin:0;color:var(--muted)}
.locked_mine{margin:0}
.locked_mine > span:first-child{display:block}
.locked_mine .shop_pair i{margin-left:0}
.locked_mine .shop_pair{display:inline-block;margin-right:4px}

html[data-gate] .main_container__element:has(> [data-paid]:only-child){display:none}
.guide_item--shut .guide_item_name svg{vertical-align:-1px;color:var(--muted)}

html[data-loaded] #loader .spinner{visibility:hidden}
[data-loader-done][hidden]{display:none}

[data-loader-done]:not([hidden]){animation:loader-done .35s ease .5s both}
@keyframes loader-done{from{opacity:0;transform:translateY(6px)}}

body.guide_page{background:var(--paper)}
body.guide_page #app{max-width:760px;min-height:0}
.guide{padding:0 20px 8px;font-family:var(--sans);color:var(--ink)}
.guide_top{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;padding-top:6px}
.guide_top .brandbar{padding:12px 0;color:var(--ink);text-decoration:none}
.guide_top .langrow{width:auto;margin-left:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;line-height:20px;
  color:var(--muted);margin:6px 0 22px}
.crumbs a{color:var(--muted);text-decoration:none;min-height:24px;display:inline-block}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--ink);text-decoration:underline}
.guide .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 8px}
.guide .eyebrow a{color:inherit;text-decoration:none;display:inline-block;min-height:24px;
  line-height:24px}
.guide h1{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.2;
  margin:0 0 10px;text-wrap:balance}
.guide h2{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.3;
  margin:40px 0 12px;text-wrap:balance}
.guide h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:22px 0 10px;font-weight:600}
.guide p{font-size:16px;line-height:27px;margin:0 0 14px;max-width:66ch}
.guide .guide_lede{font-family:var(--serif);font-size:18px;line-height:30px}
.guide_called{color:var(--muted)}
.guide_called b{color:var(--ink);font-weight:600}
.guide .cta_stack{padding:6px 0 4px;max-width:360px}
.guide_more a{color:var(--accent);display:inline-block;min-height:24px}
.guide_chips{display:flex;gap:0;margin:6px 0 20px;height:44px;max-width:420px}
.guide_chips i{flex:1}
.swatches{list-style:none;padding:0;margin:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.swatches li{display:flex;flex-direction:column;border:1px solid var(--hair);background:#fff}
.swatches i{display:block;height:64px;box-shadow:inset 0 -1px 0 var(--hair)}
.swatches div{padding:10px 12px 12px}
.swatches b{display:block;font-weight:600;font-size:15px;line-height:21px}
.swatches small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px}
.swatches span{display:block;font-size:13.5px;line-height:20px;color:var(--muted);margin-top:3px}
.swatches small.hex{margin:2px 0 0;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.swatches--pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
.swatches--pair i{height:88px}
.swatches--avoid i{position:relative}
.swatches--avoid i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(255,255,255,.9) 50%,transparent calc(50% + 1px))}
.guide_tags{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.guide_tags li{border:1px solid var(--hair);padding:6px 12px;font-size:14px;line-height:20px;background:#fff}
.guide_tags a{color:var(--ink);text-decoration:none;display:inline-block;min-height:24px}
.guide_list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.guide_list li{padding:12px 0;border-bottom:1px solid var(--hair)}
.guide_list b{display:block;font-weight:600;font-size:15.5px}
.guide_list span{display:block;color:var(--muted);font-size:14.5px;line-height:22px;margin-top:2px}
.season_family{margin-top:26px}
.season_grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.season_card{display:block;border:1px solid var(--hair);background:#fff;padding:12px;
  color:var(--ink);text-decoration:none}
.season_card .guide_chips{display:flex;height:26px;margin:0 0 10px}
.season_card b{display:block;font-family:var(--serif);font-weight:400;font-size:17px}
.season_card span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.season_card:hover,.season_card:focus-visible{border-color:var(--ink)}
.season_card[aria-current="page"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.shape_grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin:20px 0}
.shape_card{display:block;border:1px solid var(--hair);background:#fff;color:var(--ink);text-decoration:none}
.shape_card img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.shape_card b{display:block;font-family:var(--serif);font-weight:400;font-size:17px;padding:10px 12px 0}
.shape_card span{display:block;font-size:13px;line-height:19px;color:var(--muted);padding:4px 12px 12px}
.shape_card:hover,.shape_card:focus-visible{border-color:var(--ink)}
.guide_figure{margin:8px 0 18px;max-width:280px}
.guide_figure img{display:block;width:100%;height:auto}
@media (min-width:700px){.guide h1{font-size:42px}.guide{padding:0 32px 8px}}
.guide_tags--landing{justify-content:center;margin:4px 0 14px}
.guide h3.side_name{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:0;text-transform:none;color:var(--ink);margin:30px 0 4px}
.guide h3.side_name a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px;display:inline-block;min-height:24px}
.guide .guide_blurb_line{color:var(--muted);font-style:italic;margin-top:-4px}
.guide_card{margin:6px 0 10px}
.guide_card img{display:block;width:100%;height:auto;border:1px solid var(--hair)}
.share_page{display:flex;gap:10px;align-items:baseline;justify-content:center;margin:24px 0 0}
.wd_card{display:grid;gap:10px;margin:8px 0}
.wd_slot{margin:14px 0}
.wd_slot h3{font-size:15px;margin:0 0 6px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6b625a)}
.wd_piece{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--hair)}
.wd_name{flex:1 1 120px}
.wd_have,.wd_chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair);background:var(--paper);padding:6px 10px;font:inherit;font-size:14px;cursor:pointer;min-height:36px}
.wd_have i,.wd_chip i,.wd_col i{width:14px;height:14px;border-radius:50%;border:1px solid var(--hair);display:inline-block}
.wd_pick{padding:8px 0 12px}
.wd_chip[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wd_with{margin:0 0 10px}
.wd_quick{padding:4px 0 12px;border-bottom:1px solid var(--hair)}
.st_card [data-st-card]{margin-top:16px}
.wd_q_col{color:var(--muted,#6b625a)}
.wd_chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.wd_col{display:inline-flex;align-items:center;gap:6px;color:var(--muted,#6b625a);margin-left:6px}
.wd_outfits{display:grid;gap:12px}
.wd_outfit{border:1px solid var(--hair);padding:12px 14px;background:var(--paper)}
.wd_gain{margin:6px 0 4px;font-weight:600}
.wd_outfit ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px}

.main_container__element:has(> [data-match-later]:empty),
.main_container__element:has(> [data-langnote]:empty){display:none}

.n-card picture{display:contents}

.lang_hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;
  background:var(--paper);border-bottom:1px solid var(--hair);font-size:14px}
.lang_hint a{color:var(--accent);font-weight:600;text-decoration:none}
.lang_hint .link_btn{margin-left:auto;font-size:20px;line-height:1;min-width:44px;min-height:44px;text-decoration:none}
.lang_hint[hidden]{display:none}

.slide_half{margin:2px 0 0;text-align:center;font-size:12px;letter-spacing:.06em;color:var(--accent)}

.narrow{display:grid;gap:8px;justify-items:center;margin:4px 0 12px}
.narrow_dots{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.narrow_dots i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
  transition:opacity .5s ease,transform .5s ease}
.narrow_dots i.out{opacity:.14;transform:scale(.5)}
.narrow p{margin:0;font-size:13px;line-height:1.4;color:var(--muted);text-align:center}
@media (prefers-reduced-motion:reduce){.narrow_dots i{transition:none}}

.sofar{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;margin:14px 0 4px;
  padding:12px;border:1px solid var(--hair);border-radius:4px;background:var(--wash)}
.sofar[hidden]{display:none}
.sofar img{width:72px;height:96px;object-fit:cover;border-radius:2px}
.sofar_txt{display:grid;gap:4px;min-width:0}
.sofar_txt p{margin:0}
.sofar_k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sofar_v{font-size:14px}
.sofar_v span{color:var(--muted)}
.sofar_band{height:12px!important;border-radius:6px;margin-top:4px}
.sofar_next{font-size:12px;color:var(--muted);margin-top:2px!important}

.sheet_name{display:grid;gap:6px;margin:0 0 10px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.sheet_name input{height:44px;padding:0 12px;border:1px solid var(--hair);border-radius:4px;
  background:var(--paper);color:var(--ink);font:16px var(--serif)}

.shop_entry{margin:12px 0}
.shop[hidden]{display:none}
.shop:not([hidden]){position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column}
.shop_face{flex:1;min-height:280px;border:0;cursor:pointer;touch-action:pan-y}
.shop_bar{display:grid;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--paper);color:var(--ink)}
.shop_bar p{margin:0}
.shop_name{font-size:17px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.shop_name span{font-family:var(--sans);font-size:13px;color:var(--muted)}
.shop_n{margin-left:auto}
.shop_pairs{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.9}
.shop_pairs i{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;
  margin:0 5px 0 8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.shop_btns{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px}
.shop_pair{white-space:nowrap}
.shop_hint{color:var(--muted)}

.cotd{border:1px solid var(--hair);background:var(--sheet);border-radius:14px;padding:14px 16px;margin:0 0 16px}
.cotd p{margin:0}
.cotd_k{font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cotd_row{display:flex;gap:14px;align-items:center;margin:10px 0 8px}
.cotd_sw{flex:none;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cotd_name{font-size:19px;line-height:1.25}
.cotd_next{color:var(--muted)}
.cotd .shop_pairs{line-height:1.7}
.cotd .shop_pair{display:block}
.cotd .shop_pairs i{margin-left:0}

.board_again{margin-top:10px;min-height:24px}

.beauty_box{margin:12px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.beauty_box summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:17px}
.beauty_box .guide_list{margin:0 0 14px}
.beauty_lede{display:block!important;color:var(--muted)}

.wd_next_h{font-size:15px;margin:18px 0 6px}
.wd_next{margin:0;padding:0 0 0 20px;display:grid;gap:8px}
.wd_next li{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.wd_next b{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}

.trip_ctl{display:grid;gap:10px;margin:0 0 12px}
.trip_days{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:14px;color:var(--muted)}
.trip_days select{height:40px;min-width:72px;padding:0 10px;border:1px solid var(--hair);border-radius:4px;
  background:var(--paper);color:var(--ink);font:16px var(--serif)}
.trip_kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.trip_kind{min-height:40px;border:1px solid var(--hair);border-radius:4px;background:var(--paper);color:var(--ink);
  font:15px var(--serif);cursor:pointer}
.trip_kind[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.trip_h{font-size:15px;margin:14px 0 4px}
.trip_list{list-style:none;margin:0;padding:0;display:grid;gap:4px}

@keyframes ms-shimmer{from{background-position:-240px 0}to{background-position:240px 0}}
html[data-loading] [data-v]{color:transparent!important;border-radius:4px;min-width:7em;
  background:linear-gradient(90deg,var(--wash) 0,var(--hair) 50%,var(--wash) 100%) 0 0/480px 100% repeat-x;
  animation:ms-shimmer 1.3s linear infinite}
html[data-loading] .board:empty,html[data-loading] [data-challenge]{min-height:120px;border-radius:4px;
  background:linear-gradient(90deg,var(--wash) 0,var(--hair) 50%,var(--wash) 100%) 0 0/480px 100% repeat-x;
  animation:ms-shimmer 1.3s linear infinite}
html[data-loading] [data-challenge] *{visibility:hidden}
html[data-loading] span[data-v],html[data-loading] b[data-v]{display:inline-block}
@media (prefers-reduced-motion:reduce){html[data-loading] [data-v],html[data-loading] .board:empty,
  html[data-loading] [data-challenge]{animation:none}}

.friend{margin:20px 0}
.friend_mine{margin:0 0 4px}
.friend_code{font-family:var(--sans);letter-spacing:.18em;font-size:20px;margin-left:6px}
.friend_row{display:grid;grid-template-columns:1fr auto;gap:8px;margin:10px 0}
.friend_row input{height:44px;padding:0 12px;border:1px solid var(--hair);border-radius:4px;background:var(--paper);
  color:var(--ink);font:18px var(--sans);letter-spacing:.18em;text-transform:uppercase}
.friend_pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}
.friend_pair p{margin:0}
.friend_both{margin:12px 0 6px;font-weight:600}
.friend_shared{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.friend_shared i{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:-3px;margin-right:8px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}

.brandbar--back{display:grid;grid-template-columns:1fr auto 1fr;justify-content:stretch}
.back_link{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--ink);
  text-decoration:none;font-size:15px;justify-self:start}
.back_link i{display:inline-flex;width:20px;height:20px}
.back_link i svg{width:20px;height:20px}

.tab_why{margin:4px 0 0;color:var(--muted)}
.today_line{margin:4px 0 0;color:var(--muted)}
.row_between{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.start_card[hidden]{display:none}
.start_list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.start_list a{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--hair)}
.start_list li:first-child a{border-top:0}
.start_tick{flex:none;width:22px;height:22px;border:1px solid var(--edge);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.start_list li.done .start_tick{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.start_list li.done span:last-child{color:var(--muted)}

.seg{display:flex;border:1px solid var(--ink);border-radius:999px;padding:3px;gap:3px}
.seg button{flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;color:var(--ink);
  font:inherit;font-size:14px;cursor:pointer}
.seg button.on{background:var(--ink);color:var(--paper)}
[data-seg-part][hidden]{display:none}

.style_rows{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.style_row{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"name pic go" "value pic go" "sw pic go";
  min-height:48px;
  gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none;
  align-items:center}
.style_row_name{grid-area:name;font-size:13px;color:var(--muted)}
.style_row_value{grid-area:value;font-size:18px}
.style_row_sw{grid-area:sw;display:flex;gap:4px;margin-top:6px}
.style_row_sw i{width:22px;height:22px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--hair)}
.style_row_go{grid-area:go;font-size:22px;color:var(--muted)}
.style_row_pic{grid-area:pic;width:52px;height:52px;object-fit:contain;display:block}

.app_top{position:sticky;top:0;z-index:20;padding-bottom:12px;
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);
  transition:box-shadow .2s ease}
html[data-scrolled] .app_top{box-shadow:0 1px 0 var(--hair)}
.app_top .wordmark{transition:opacity .2s ease}
.top_title{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:60%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;color:var(--ink);
  opacity:0;transition:opacity .2s ease;pointer-events:none}
html[data-scrolled] .app_top .wordmark{opacity:0}
html[data-scrolled] .top_title{opacity:1}

.sheet{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:flex-end}
.sheet[hidden]{display:none}
.sheet_back{position:absolute;inset:0;background:rgba(36,29,23,.35)}
.sheet_panel{position:relative;background:var(--paper);border-radius:16px 16px 0 0;text-align:left;
  padding:12px 24px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;
  max-height:85vh;overflow:auto;animation:sheet_up .22s ease-out}
@keyframes sheet_up{from{transform:translateY(100%)}}
.sheet_head{display:flex;align-items:center;justify-content:space-between;font-size:18px}
.sheet_x{width:44px;height:44px;border:0;background:none;font-size:28px;line-height:1;color:var(--ink);cursor:pointer}
html[data-sheet-open]{overflow:hidden}

@media (min-width:600px){
  .sheet{justify-content:center;align-items:center;padding:24px}
  .sheet_panel{width:100%;max-width:480px;border-radius:16px;padding-bottom:24px;animation:sheet_in .18s ease-out}
}
@keyframes sheet_in{from{opacity:0;transform:translateY(12px)}}

html[data-new-week] .tabbar a[data-tab="today"]{position:relative}
html[data-new-week] .tabbar a[data-tab="today"]::after{content:"";position:absolute;top:6px;left:calc(50% + 9px);
  width:8px;height:8px;border-radius:50%;background:var(--accent)}

.ot_look{display:flex;align-items:flex-end;gap:10px;padding:16px 16px 6px}
.ot_tile{display:block;flex:none;width:56px;height:76px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair)}
.ot_tile--accent{width:28px;height:28px;border-radius:50%}

.ot_in_left{animation:ot_left .22s ease-out}
.ot_in_right{animation:ot_right .22s ease-out}
@keyframes ot_left{from{transform:translateX(40px);opacity:0}}
@keyframes ot_right{from{transform:translateX(-40px);opacity:0}}

.plan_done_btn{margin-top:12px}
.plan_done{margin:12px 0 0;font-size:16px;line-height:24px;color:var(--ink);animation:plan_done .3s ease-out}
.plan_done span{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--ink);
  color:var(--paper);align-items:center;justify-content:center;font-size:13px;margin-right:6px}
@keyframes plan_done{from{transform:scale(.96);opacity:0}}

@media (prefers-color-scheme:dark){
  html[data-twa]:not([data-ios-app]){color-scheme:dark;
    --ink:#efe8df;--muted:#b0a597;--hair:rgba(239,232,223,.16);--edge:#8f877d;
    --accent:#d39472;--cta:#d39472;--on-accent:#1b1613;--danger:#ff7b72;
    --paper:#1a1613;--wash:#25201b;--sheet:#25201b;
    --fig-ground:#2a2420;--fig-line:#ece4d9;--fig-oval:#3b2e27}
  html[data-twa]:not([data-ios-app]) .image_component{background:#fff}
  html[data-twa]:not([data-ios-app]) :is(.swatches li,.guide_tags li,.season_card,.shape_card){background:var(--wash)}
  html[data-twa]:not([data-ios-app]) .sheet_back{background:rgba(0,0,0,.55)}
}

html[data-ios-app] [data-handoff-take]{display:none!important}