/* ===== style block 00 ===== */
/* Session her-atelier-design-20260908. Joyful v6, editorial mobile studio. */
:root{--j-ink:#232324;--j-muted:#787873;--j-paper:#faf9f6;--j-line:#dfdfd9;--j-mood:#ee784c;--j-serif:'Bodoni Moda',Georgia,serif;--j-sans:Manrope,Arial,sans-serif;color:var(--j-ink);font-family:var(--j-sans);background:var(--j-paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0;background:none}a{color:inherit;text-decoration:none}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #7b5eb4;outline-offset:3px}button,select,input:not([type=range]){min-height:44px}iconify-icon{display:inline-block;flex:none;width:19px;height:19px;font-size:19px;vertical-align:middle}h1,h2,h3,p{margin:0}img{display:block;max-width:100%}.j-header{height:56px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--j-line);background:var(--j-paper);position:relative;z-index:5}.j-wordmark{font-family:var(--j-serif);font-size:25px;letter-spacing:-1.3px;white-space:nowrap;display:flex;align-items:center}.j-wordmark span{font-style:italic}.j-wordmark i{width:7px;height:7px;display:block;margin:10px 0 0 5px;background:conic-gradient(#e97c4d,#c261a9,#696abd,#62a898,#e97c4d);border-radius:50%}.j-desktop-nav{display:flex;align-items:center;gap:35px;margin-left:55px}.j-desktop-nav a{font-size:10px;min-height:44px;display:flex;align-items:center}.j-desktop-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:7px}.j-header-tools{display:flex;gap:3px}.j-icon{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px}.j-header-tools>a{display:none}.j-hero{height:calc(100svh - 56px);min-height:510px;max-height:1120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,39%);isolation:isolate;overflow:hidden}.j-scene{min-height:0;position:relative;background:#dfdfd7;overflow:hidden}.j-scene:before{content:'';position:absolute;inset:0;background:#e6e3dc;filter:blur(25px);opacity:.14;transform:scale(1.1)}.j-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
/* The framing holds the photograph — the engine's canvas lives inside it — and carried no
z-index at all, so it was painted in the same step as the blurred fill that sits under the
scene and lost to it on tree order. The DOM portrait never showed the fault because it sets
a z-index of its own, just above; the WebGL frame, which is what the engine draws, was
under the blur every time. This belongs at the top level: the first attempt landed inside a
desktop media block and did nothing on a phone, which is where the owner was looking. */
.j-scene .j-framing{z-index:1}
/* The room beside the photograph, filled with the photograph's own blur.
*
* The stage shows a frame whole now rather than cropping it to the box, so on most screens
* there is room left over — and it was flat grey on a phone, because this rule lived inside
* the desktop block. The phone is the main site (owner, 2026-09-11), so it belongs at the top
* level. It sits behind the framing, which is the whole of why it is safe. */
.j-scene::after{content:'';position:absolute;inset:0;z-index:0;background-image:var(--j-scene-source,none);background-position:50% 40%;background-size:cover;background-repeat:no-repeat;filter:blur(64px) saturate(.6);opacity:.28;pointer-events:none}.j-scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;background:#deddd7}.j-scene video[hidden],.j-scene [hidden]{display:none}.j-scene-top{position:absolute;top:18px;left:20px;right:20px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;z-index:3}.j-location{display:flex;align-items:center;gap:9px;font-size:10px;min-height:38px;padding:7px 12px;background:#faf9f6ed;border-radius:2px;backdrop-filter:blur(12px)}.j-location iconify-icon{width:14px;height:14px;font-size:14px}.j-media-toggle{display:flex;padding:3px;background:#faf9f6ed;backdrop-filter:blur(12px);border-radius:2px}.j-media-toggle button{font-size:10px;padding:6px 12px;min-height:32px}.j-media-toggle button[aria-pressed=true]{background:#282727;color:#fff}.j-scene-label{position:absolute;bottom:22px;left:22px;z-index:3;max-width:260px;background:#faf9f6ec;padding:13px 16px;border-left:2px solid var(--j-mood);backdrop-filter:blur(12px)}.j-eyebrow{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:block;color:var(--j-muted)}.j-scene-label strong{display:block;font:400 27px/1.17 var(--j-serif);margin:5px 0}.j-scene-label p{font-size:9px;line-height:1.6;color:#656460}.j-photo-note{position:absolute;right:17px;bottom:20px;z-index:3;writing-mode:vertical-rl;font-size:8px;letter-spacing:.07em;color:#292927;background:#faf9f6d9;padding:6px 4px}.j-controls{--j-ring-max-height:min(280px,calc(100svh - 565px));background:var(--j-paper);display:flex;flex-direction:column;justify-content:center;position:relative;min-width:0;padding:32px 24px 20px}.j-intro{text-align:center;padding:0 5px 24px}.j-intro .j-eyebrow{font-size:9px;margin-bottom:12px}.j-title{font:500 clamp(54px,5vw,84px)/1 var(--j-serif);letter-spacing:-.055em;background:linear-gradient(105deg,#bd5247 4%,#d1718c 35%,#986fbd 62%,#538aa0 98%);color:transparent;background-clip:text;-webkit-background-clip:text;padding:0 0 7px}.j-intro p{font-size:11px;color:#77756d;line-height:1.7;margin-top:10px}.j-axis-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--j-line);margin:0 6px 9px}.j-axis-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;position:relative;min-width:0;padding:7px 2px;color:#86817b}.j-axis-tabs iconify-icon{font-size:13px;width:13px;height:13px}.j-axis-tabs button[aria-pressed=true]{color:var(--j-ink);font-weight:600}.j-axis-tabs button[aria-pressed=true]:after{content:'';position:absolute;bottom:-1px;height:2px;left:10%;right:10%;background:var(--j-mood)}.j-disc{width:min(100%,calc(var(--j-ring-max-height) * 2));height:auto;aspect-ratio:2/1;align-self:center;position:relative;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline-offset:-3px!important;flex:none;overflow:hidden}.j-disc.j-dragging{cursor:grabbing}.j-disc svg{width:100%;height:100%;display:block;overflow:visible}[data-band=outer] .j-ring-track{stroke:var(--j-band-paint,#edeae3);fill:none;stroke-width:50}[data-band=middle] .j-ring-sectors{fill:none;stroke-width:52}[data-band=inner] .j-ring-track{fill:none;stroke:var(--j-band-paint,#e8cbd4);stroke-width:48}:is([data-band=outer] .j-ring-labels,.j-lens-layer[data-band=outer]) text{font-family:var(--j-sans);font-size:16px;fill:#504d46}.j-date-weekday{font-size:7px;letter-spacing:.08em;fill:#969086}.j-today-tick{fill:#a64b4b;font-weight:700}:is([data-band=middle] .j-ring-labels,.j-lens-layer[data-band=middle]) text{fill:white;paint-order:stroke;stroke:#00000008;stroke-width:1px;font-size:14px;letter-spacing:.01em;font-weight:600}:is([data-band=inner] .j-ring-labels,.j-lens-layer[data-band=inner]) text{fill:#66505c;font-size:9.5px;font-weight:500}.j-read-line{stroke:#faf9f6;stroke-width:2;stroke-dasharray:2 5;opacity:.8}.j-needle{fill:#3a3834;stroke:#faf9f6;stroke-width:2}.j-hub{fill:var(--j-paper)}.j-hub-star{fill:var(--j-mood);font-size:41px;font-family:Georgia,serif}.j-hub-label{fill:#999080;font-size:8px;letter-spacing:.16em;text-transform:uppercase}.j-disc[data-active-band=outer] [data-band=outer] .j-ring-track{stroke:var(--j-band-paint,#e4dfd4)}.j-disc[data-active-band=inner] [data-band=inner] .j-ring-track{stroke-width:52}.j-dial-hint{text-align:center;line-height:1.3;font-size:8px;color:#89867e;padding:6px 0 8px}.j-selection{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;border-top:1px solid var(--j-line);border-bottom:1px solid var(--j-line);margin:0 6px}.j-selection-value{padding:2px 4px;min-height:52px;text-align:center;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}.j-selection-value strong{font:400 22px/1.13 var(--j-serif);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.j-selection-value span{font-size:8px;line-height:1.8;color:var(--j-muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.j-look-action{display:flex;align-items:center;justify-content:space-between;background:#262626;color:white;padding:12px 16px;gap:12px;min-height:48px;font-size:11px;margin:18px 6px 0}.j-look-action span{display:flex;align-items:center;gap:12px}.j-look-action small{font-size:9px;opacity:.67}.j-context-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 11px;margin:17px 5px 0;font-size:8px;color:#8d877b}.j-context-strip button{font-size:8px;min-height:30px;padding:2px 0;display:flex;align-items:center;gap:4px}.j-context-strip iconify-icon{font-size:10px;width:10px;height:10px}.j-details-root{background:#fff}.j-page-footer{padding:30px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px;color:#89877f;border-top:1px solid var(--j-line)}.j-page-footer button{font-size:9px;min-height:44px}.j-page{max-width:1200px;margin:auto;padding:55px 42px;min-height:calc(100svh - 56px)}.j-page h1{font:400 clamp(43px,6vw,76px)/1.08 var(--j-serif);letter-spacing:-.04em;margin:12px 0 23px}.j-page>p{font-size:12px;line-height:1.8;max-width:520px;color:var(--j-muted)}.j-saved-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}.j-saved-card{border:1px solid var(--j-line);background:white}.j-saved-card img{height:260px;width:100%;object-fit:contain;background:#e8e7e1}.j-saved-card>div{padding:20px}.j-saved-card h3{font:400 28px/1.15 var(--j-serif);margin-bottom:10px}.j-saved-card p{font-size:10px;line-height:1.7;color:var(--j-muted)}.j-saved-card button{margin-top:12px}.j-empty{border-top:1px solid var(--j-line);margin-top:32px;padding-top:25px}.j-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;min-height:46px;border:1px solid #ccc9c1;font-size:11px;background:transparent}.j-primary{background:#272727;color:white;border-color:#272727}.j-full{width:100%}.j-button-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.j-button-row .j-button{flex:1}.j-note{font-size:10px!important;line-height:1.75!important;color:#827d74!important}.j-dialog{position:fixed;inset:0;margin:auto;border:0;max-width:min(560px,calc(100vw - 40px));width:560px;max-height:88svh;padding:0;background:var(--j-paper);color:var(--j-ink);box-shadow:0 20px 100px #0004;border-radius:3px;overscroll-behavior:contain}.j-dialog::backdrop{background:#18181766;backdrop-filter:blur(5px)}.j-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:26px 26px 16px}.j-dialog-head h2{font:400 36px/1.1 var(--j-serif);letter-spacing:-.025em;margin-top:7px}.j-dialog-body{padding:0 26px 27px}.j-dialog-body>p{font-size:12px;line-height:1.8;color:#716d65;margin-bottom:18px}.j-form-row{display:flex;gap:12px;margin:17px 0}.j-form-row>*{flex:1;min-width:0}.j-field{display:flex;flex-direction:column;gap:7px;font-size:10px;margin:16px 0}.j-field input,.j-field select,.j-field textarea{width:100%;border:1px solid #d5d2c9;background:#fff;border-radius:0;padding:10px 12px;font-size:12px}.j-field textarea{resize:vertical;min-height:100px;line-height:1.7}.j-field input[type=range]{padding:0;min-height:44px;accent-color:var(--j-mood)}.j-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:13px 0}.j-row h3{font:400 25px/1.2 var(--j-serif)}.j-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.j-month-grid>span{padding:8px 0;font-size:9px;text-align:center;color:#999287}.j-day{font-size:11px;border-radius:50%;padding:1px;position:relative}.j-day[aria-pressed=true]{background:var(--j-mood);color:white}.j-day.j-is-today{box-shadow:inset 0 0 0 1px #7c7970}.j-day i{position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;bottom:7px;left:calc(50% - 1px)}.j-weather-box{padding:17px 18px;margin:20px 0;background:#eeeae2;border-left:2px solid #a2a69f}.j-weather-box strong{display:block;font:400 30px/1.2 var(--j-serif);margin-bottom:7px}.j-weather-box p{font-size:11px;line-height:1.7;margin-bottom:7px}.j-weather-box small{font-size:8px;line-height:1.65;display:block;color:#847c70}.j-weather-box a{text-decoration:underline;text-underline-offset:3px}.j-option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.j-option{border:1px solid #dcd8cf;display:flex;align-items:center;gap:10px;text-align:left;min-height:60px;padding:10px 12px;font-size:11px;background:#fff}.j-option[aria-pressed=true]{border-color:var(--j-mood);background:color-mix(in srgb,var(--j-mood) 7%,white)}.j-option i{height:18px;width:18px;border-radius:50%;flex:none;background:var(--swatch)}.j-option small{font-size:9px;line-height:1.4;display:block;color:#898277;margin-top:5px}.j-mood-mix{padding:22px 0 12px;text-align:center}.j-mood-mix strong{font:400 35px/1.2 var(--j-serif);color:var(--j-mood);display:block}.j-mood-mix p{font-size:10px;line-height:1.5;margin:9px}.j-mood-range{width:100%;appearance:none;height:44px;background:none;cursor:ew-resize}.j-mood-range::-webkit-slider-runnable-track{height:10px;border-radius:7px;background:linear-gradient(90deg,#508ca9,#68a795,#b6ac59,#ee784c,#d45791,#9a62b7,#7067c6,#bd5271,#cb453b,#5a75a8,#8793b3,#c394a5,#508ca9)}.j-mood-range::-webkit-slider-thumb{appearance:none;height:24px;width:24px;background:white;border:5px solid var(--j-mood);border-radius:50%;margin-top:-7px;box-shadow:0 0 0 2px white}.j-mood-range::-moz-range-track{height:10px;background:linear-gradient(90deg,#508ca9,#ee784c,#d45791,#cb453b,#508ca9)}.j-mood-range::-moz-range-thumb{background:#fff;border:4px solid var(--j-mood);border-radius:50%;height:18px;width:18px}.j-motion-card{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:center;border-block:1px solid var(--j-line);padding:18px 0;margin:20px 0}.j-motion-card img{width:110px;height:180px;object-fit:contain;background:#e4e1d8}.j-motion-card h3{font:400 26px/1.1 var(--j-serif);margin-bottom:10px}.j-motion-card p{font-size:10px;line-height:1.75;color:#817c71}.j-steps{font-size:10px;color:#777165;line-height:1.85;padding-left:18px;margin:18px 0}.j-upload{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border:1px dashed #a29a8c;font-size:11px;cursor:pointer;position:relative}.j-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.j-check{display:flex;align-items:flex-start;gap:10px;font-size:10px;line-height:1.7;margin:14px 0}.j-check input{width:16px;min-height:16px;margin:3px 0;flex:none;accent-color:#817061}.j-local-video{display:block;width:100%;height:220px;object-fit:contain;background:#e1ded5;margin:16px 0}.j-list{list-style:none;padding:0;margin:17px 0}.j-list li{display:flex;justify-content:space-between;gap:18px;font-size:11px;padding:12px 0;border-bottom:1px solid var(--j-line);line-height:1.6}.j-list strong{white-space:nowrap}.j-catalog-cover{height:260px;display:grid;grid-template-columns:1fr 1fr;background:#eae7df;margin:0 0 23px}.j-catalog-cover img{height:260px;width:100%;object-fit:contain}.j-catalog-cover>div{display:flex;justify-content:center;flex-direction:column;padding:20px}.j-catalog-cover h3{font:400 42px/1 var(--j-serif);letter-spacing:-.04em;margin:10px 0}.j-catalog-cover p{font-size:9px;line-height:1.7}.j-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:50;max-width:calc(100vw - 32px);width:max-content;font-size:11px;padding:13px 20px;background:#242424;color:#fff;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 3px 20px #0002}.j-toast.j-visible{opacity:1;transform:translate(-50%,0)}.j-event-card{display:block;text-align:left;border:1px solid var(--j-line);background:white;width:100%;padding:13px 16px;margin:9px 0;font-size:11px}.j-event-card small{font-size:9px;color:#827c71;display:block;margin-top:6px}.j-event-card[aria-pressed=true]{border-color:var(--j-mood)}.j-study-status{font-size:9px;line-height:1.7;margin-top:16px;color:#8b8070}.j-media-fit-note{font-size:8px;color:#968978;margin:8px 0}.j-partners{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.j-partners button{border:1px solid var(--j-line);padding:12px 4px;font-size:10px}.j-partners small{display:block;font-size:8px;line-height:1.4;color:#aaa193;margin-top:5px}
@media(min-width:1500px){.j-controls{padding-inline:45px}}
@media(max-width:1000px) and (min-width:701px){.j-controls{padding-inline:12px}.j-desktop-nav{gap:20px;margin-left:0}.j-scene-label{max-width:180px;left:12px}.j-scene-label strong{font-size:24px}.j-intro{padding-bottom:20px}.j-intro .j-title{font-size:64px}.j-scene-top{left:12px;right:12px}.j-location{font-size:9px;padding:6px}.j-media-toggle button{padding:4px 8px}}
@media(max-width:700px){.j-header{height:48px;padding:0 12px;gap:12px}.j-wordmark{font-size:23px}.j-desktop-nav{display:none}.j-header-tools{gap:0}.j-header-tools>a{display:inline-flex}.j-header-tools .j-icon{padding:10px;min-width:40px}.j-header-tools .j-icon iconify-icon{width:17px;height:17px;font-size:17px}.j-hero{--j-ring-height:min(220px,calc((100vw - 26px) / 2),calc((100svh - 284px) / 2));height:calc(100svh - 48px);min-height:475px;max-height:1200px;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(170px,1fr) calc(174px + var(--j-ring-height))}.j-controls{--j-ring-max-height:var(--j-ring-height);padding:0 13px 10px;justify-content:flex-start;border-top:1px solid #e4dfd5}.j-intro{position:absolute;top:-103px;left:13px;text-align:left;padding:10px 12px;background:#faf9f6e6;backdrop-filter:blur(10px);max-width:155px;border-left:2px solid var(--j-mood);pointer-events:none;z-index:4}.j-intro .j-eyebrow{font-size:7px;margin-bottom:4px;letter-spacing:.13em}.j-title{font-size:44px;line-height:1;padding-bottom:3px}.j-intro p{font-size:8px;line-height:1.4;margin:3px 0 0}.j-scene-label{display:none}.j-scene-top{top:12px;left:12px;right:12px;gap:10px}.j-location{font-size:9px;min-height:34px;padding:7px 9px}.j-media-toggle button{min-height:28px;padding:5px 9px;font-size:9px}.j-photo-note{font-size:7px;bottom:13px;right:9px}.j-axis-tabs{margin:0 0 5px;height:44px;flex:none}.j-axis-tabs button{font-size:10px;min-height:44px}.j-dial-hint{font-size:7px;padding:2px 0 4px;height:15px}.j-selection{margin:0;min-height:46px;height:46px}.j-selection-value{min-height:44px}.j-selection-value strong{font-size:21px}.j-selection-value span{font-size:7px;line-height:1.6}.j-look-action{min-height:44px;height:44px;margin:9px 0 0;padding:9px 13px;font-size:10px}.j-look-action small{font-size:8px}.j-context-strip{display:none}.j-page{padding:34px 20px}.j-page-footer{padding:22px 18px;font-size:8px}.j-page-footer>span{max-width:200px;line-height:1.6}.j-dialog{inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:91svh;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}.j-dialog:before{content:'';display:block;width:32px;height:3px;margin:8px auto -8px;border-radius:4px;background:#c5beb2}.j-dialog-head{padding:24px 20px 17px}.j-dialog-head h2{font-size:34px}.j-dialog-body{padding:0 20px 24px}.j-option{min-height:58px;padding:8px 10px;font-size:10px}.j-saved-grid{grid-template-columns:1fr 1fr;gap:10px}.j-saved-card img{height:200px}.j-saved-card>div{padding:12px}.j-saved-card h3{font-size:23px}.j-saved-card p{font-size:9px}.j-catalog-cover h3{font-size:33px}.j-catalog-cover>div{padding:13px}}
@media(max-width:700px) and (max-height:720px){.j-intro{top:-89px;max-width:133px;padding:8px 10px}.j-title{font-size:37px}.j-intro p{font-size:7px}.j-intro .j-eyebrow{font-size:6px}.j-scene-top{top:8px}.j-photo-note{font-size:6px}}
@media(max-width:350px){.j-controls{padding-inline:10px}.j-header-tools .j-icon{min-width:38px}.j-wordmark{font-size:21px}.j-location{font-size:8px;padding:6px}.j-axis-tabs button{font-size:9px}.j-axis-tabs iconify-icon{display:none}.j-selection-value strong{font-size:19px}.j-dialog-body,.j-dialog-head{padding-left:16px;padding-right:16px}.j-option{font-size:9px;gap:7px}.j-month-grid{gap:0}.j-day{min-height:42px}.j-scene-top{gap:5px}.j-media-toggle button{padding-inline:7px}.j-saved-grid{grid-template-columns:1fr}}
@media(max-height:550px) and (min-width:701px){.j-hero{min-height:334px;grid-template-columns:minmax(0,1fr) minmax(330px,48%)}.j-controls{--j-ring-max-height:calc(100svh - 232px);padding:0 15px 8px}.j-intro{display:none}.j-context-strip{display:none}.j-axis-tabs{margin-bottom:3px}.j-selection-value{min-height:44px}.j-look-action{margin-top:8px;min-height:44px}.j-scene-label{bottom:13px;padding:8px 12px}.j-scene-label strong{font-size:21px}.j-photo-note{bottom:13px}.j-header{height:48px}.j-hero{height:calc(100svh - 48px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{.j-header,.j-hero,.j-refine-panel,.j-page-footer,.j-toast,dialog{display:none!important}.jd-details{padding:20px}.jd-item-grid{grid-template-columns:repeat(3,1fr)}}
/* Session her-atelier-design-20260908: a 2:1 half-circle uses equal SVG x/y scale.
Mobile reserves 174px for its controls plus the actual ring height. */
.j-share-study{width:100%;height:260px;background:#e6e1d8 none var(--share-x) var(--share-y)/300% 200% no-repeat}
@media(min-width:701px) and (min-height:551px) and (max-height:720px){.j-hero{grid-template-rows:minmax(0,1fr)}.j-controls{--j-ring-max-height:calc(100svh - 375px);padding:10px 16px}.j-intro{padding-bottom:12px}.j-intro .j-eyebrow{margin-bottom:6px;font-size:8px}.j-intro .j-title{font-size:52px}.j-intro p{font-size:9px;margin-top:4px}.j-selection-value{min-height:44px}.j-look-action{margin-top:10px;min-height:44px}.j-context-strip{display:none}}
.j-dialog-head [data-action=close]{flex:none;position:relative}.j-dialog-head [data-action=close] iconify-icon{display:none}.j-dialog-head [data-action=close]:before,.j-dialog-head [data-action=close]:after{content:"";position:absolute;width:17px;height:1px;background:#272727;left:13px;top:22px;transform:rotate(45deg)}.j-dialog-head [data-action=close]:after{transform:rotate(-45deg)}
.j-mini-weather{display:none}@media(max-width:700px){.j-location>iconify-icon,.j-location #j-weather-small{display:none}.j-location .j-mini-weather{display:inline}.j-location{padding:7px 9px;font-size:8px;gap:0}}
/* ===== style block 01 ===== */
/* Session her-atelier-design-20260908. Quiet editorial detail layer for the Joyful studio. */
.jd-details{--jd-ink:#202021;--jd-muted:#777774;--jd-line:#e1e0dc;--jd-paper:#f5f4f1;--jd-accent:#993646;max-width:1240px;margin:auto;padding:68px 52px 28px;color:var(--jd-ink);font-family:Manrope,Arial,sans-serif;font-size:13px;line-height:1.5;box-sizing:border-box;background:#fff}
.jd-details *,.jd-details *:before,.jd-details *:after{box-sizing:border-box}
.jd-details button,.jd-details input,.jd-details select{font:inherit;color:inherit}
.jd-details button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.jd-details button:disabled{opacity:.4;cursor:default}
.jd-details button:focus-visible,.jd-details input:focus-visible,.jd-details select:focus-visible,.jd-details summary:focus-visible{outline:2px solid #9d4565;outline-offset:4px}
.jd-details button{letter-spacing:0;text-transform:none}
.jd-details p,.jd-details h2,.jd-details h3{margin:0}
.jd-details iconify-icon{display:inline-block;width:18px;height:18px;font-size:18px;flex:none;vertical-align:middle}
.jd-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:30px}
.jd-eyebrow,.jd-control-label{display:block;font-size:10px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;line-height:1.5}
.jd-eyebrow{margin-bottom:12px;color:var(--jd-muted)}
.jd-section-heading h2{font-family:'Bodoni Moda','Times New Roman',serif;font-size:58px;line-height:1.07;font-weight:400;letter-spacing:-.045em}
.jd-section-heading h2 em{font-weight:400}
.jd-section-heading>p{font-size:12px;line-height:1.85;text-align:right}
.jd-section-heading>p span{color:var(--jd-muted)}
.jd-refine-panel{padding:0;border-top:1px solid var(--jd-line);border-bottom:1px solid var(--jd-line)}
.jd-refine-panel>summary{display:flex;align-items:center;gap:12px;min-height:66px;padding:10px 0;list-style:none;cursor:pointer;font-size:11px}
.jd-refine-panel>summary::-webkit-details-marker{display:none}
.jd-refine-panel>summary>span:first-child{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.jd-refine-panel>summary>span:first-child iconify-icon{width:15px;height:15px;font-size:15px}
.jd-refine-panel>summary>iconify-icon{width:14px;height:14px;font-size:14px;margin-left:5px;transition:transform .2s}
.jd-refine-panel[open]>summary>iconify-icon{transform:rotate(180deg)}
.jd-refine-brief{margin-left:auto;color:var(--jd-muted);font-size:10px}
.jd-refine-body{padding:0 0 25px}
.jd-refine-first{display:flex;align-items:center;justify-content:space-between;gap:20px}
.jd-control-label{margin-bottom:9px}
.jd-segmented{display:inline-grid;grid-template-columns:repeat(3,1fr);padding:3px;background:var(--jd-paper);border:1px solid #e9e8e4;border-radius:3px;min-width:330px}
.jd-segmented button{min-height:44px;padding:9px 14px;background:transparent;border:0;border-radius:1px;font-size:12px;white-space:nowrap}
.jd-segmented button.jd-selected{background:#fff;box-shadow:0 1px 4px #0000000b;font-weight:650}
.jd-text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:6px 0;border:0;background:transparent;font-size:11px!important;font-weight:600;white-space:normal;text-align:left;line-height:1.35}
.jd-text-button iconify-icon{font-size:15px;width:15px;height:15px}
.jd-wardrobe-link{margin-top:22px}
.jd-refine-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:26px}
.jd-label-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;min-height:24px;font-size:12px}
.jd-label-row label,.jd-label-row>span:first-child{font-weight:600}
.jd-label-row output{font-size:15px;font-weight:600}
.jd-palette-label{font-size:10px;color:var(--jd-muted)}
.jd-budget-control input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:32px;margin:0;background:transparent;accent-color:var(--jd-ink);cursor:ew-resize}
.jd-budget-control input[type=range]::-webkit-slider-runnable-track{height:2px;background:#c8c5c0}
.jd-budget-control input[type=range]::-moz-range-track{height:2px;background:#c8c5c0}
.jd-budget-control input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border:4px solid #fff;border-radius:50%;background:#242424;box-shadow:0 0 0 1px #444;transition:box-shadow .15s}
.jd-budget-control input[type=range]::-moz-range-thumb{width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#242424;box-shadow:0 0 0 1px #444}
.jd-budget-control input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 1px #444,0 0 0 7px #1919190d}
.jd-budget-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-4px}
.jd-budget-bottom p{font-size:10px;color:var(--jd-muted)}
.jd-budget-bottom .jd-budget-over{color:#9b453f}
.jd-palette-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.jd-palette-option{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:58px;padding:5px 2px;border:1px solid transparent;background:none;border-radius:2px}
.jd-palette-option.jd-selected{border-color:#7a7670}
.jd-palette-option>span:last-child{font-size:9px;white-space:nowrap;color:var(--jd-muted)}
.jd-colour-stack{display:flex;align-items:center;padding:4px 2px}
.jd-colour-stack i{height:19px;width:19px;border-radius:50%;display:block;border:1.5px solid white}
.jd-colour-stack i+i{margin-left:-6px}
.jd-look-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:26px 0 17px;font-size:10px;color:var(--jd-muted)}
.jd-item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 23px}
.jd-item-card{min-width:0}
.jd-item-image{position:relative;isolation:isolate}
.jd-product-art{position:relative;overflow:hidden;background:#f2f1ed;width:100%;aspect-ratio:1/1.03;container-type:size}
.jd-local-art img{height:100%;width:100%;display:block;object-fit:contain;padding:10px}
.jd-source-tag{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;background:#ffffffd9;font-size:8px;line-height:1.2;letter-spacing:.025em}
.jd-source-tag.jd-is-owned:before{content:'';height:4px;width:4px;border-radius:50%;background:#68776b;margin-right:5px}
.jd-icon-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px;background:none;border:0}
.jd-pin{position:absolute;top:3px;right:3px;border-radius:50%;color:#3d3c39!important}
.jd-pin.jd-active{background:#ffffffd9}
.jd-icon-button.jd-active{color:#9b425c}
.jd-item-copy{padding-top:14px}
.jd-category{display:block;margin-bottom:5px;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--jd-muted)}
.jd-item-copy h3{font-family:Manrope,Arial,sans-serif!important;font-size:12px!important;font-weight:550!important;line-height:1.55!important;letter-spacing:0!important;min-height:36px}
.jd-price-line{display:flex;align-items:center;gap:9px;margin-top:7px}
.jd-price-line strong{font-size:12px;font-weight:650}
.jd-price-line>span{font-size:9px;color:var(--jd-muted)}
.jd-item-actions{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:44px;margin-top:0;border-bottom:1px solid var(--jd-line)}
.jd-item-actions .jd-wish{margin-right:-10px;min-width:40px}
.jd-local-note{font-size:10px;color:var(--jd-muted)}
.jd-finishing-card{display:flex;flex-direction:column;min-width:0;padding:23px 27px 22px;border:1px solid var(--jd-line);background:#fff}
.jd-finishing-card .jd-eyebrow{font-size:8px}
.jd-hair-mark{width:100%;max-width:160px;margin:auto auto 8px;opacity:.82}
.jd-hair-mark svg{display:block;width:100%;height:auto}
.jd-finishing-card h3{font:400 28px/1.12 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.025em;margin-bottom:12px}
.jd-finishing-card p{font-size:11px;line-height:1.75;color:#696863}
.jd-hair-footer{display:block;padding-top:23px;margin-top:auto;font-size:8px;color:#8d8a83}
.jd-alternatives{margin:28px 0 0;padding:25px;background:var(--jd-paper);scroll-margin:20px;border:1px solid var(--jd-line)}
.jd-inline-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:19px}
.jd-inline-heading .jd-eyebrow{margin-bottom:7px;font-size:8px}
.jd-inline-heading h3{font:400 27px/1.2 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.02em}
.jd-alternative-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jd-alternative{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding:12px 16px;border:1px solid #d8d5d0;background:#fff;text-align:left;font-size:11px!important}
.jd-alternative.jd-selected{border-color:#323232}
.jd-alternative>strong{white-space:nowrap;font-weight:600}
.jd-alternative iconify-icon{height:13px;width:13px;font-size:13px;margin-left:7px}
.jd-small{font-size:10px!important;line-height:1.65!important;color:var(--jd-muted);margin-top:13px!important}
.jd-styling-note{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;padding:34px 0;margin-top:30px;border-top:1px solid var(--jd-line);border-bottom:1px solid var(--jd-line)}
.jd-styling-note>div:first-child>p{font:400 25px/1.45 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.015em}
.jd-palette-note{max-width:360px}
.jd-large-swatches{display:flex;gap:7px;margin:5px 0 15px}
.jd-large-swatches i{width:29px;height:29px;border-radius:50%;border:1px solid #00000008}
.jd-palette-note>p{font-size:11px;line-height:1.8;color:#6d6a64}
.jd-total-row{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:30px 0}
.jd-total-row .jd-control-label{font-size:9px;margin-bottom:3px;color:var(--jd-muted)}
.jd-total-row strong{display:block;font:400 45px/1.15 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.03em}
.jd-total-row p{margin-top:5px;font-size:10px;color:var(--jd-muted)}
.jd-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 18px;background:#fff;border:1px solid #cdcbc7;border-radius:1px;font-size:11px!important;line-height:1.3;font-weight:550;white-space:normal}
.jd-primary{background:#242424;color:white!important;border-color:#242424}
.jd-button>span{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:50%;background:#ffffff20;margin-left:6px;font-size:10px}
.jd-button iconify-icon{font-size:16px;width:16px;height:16px}
.jd-presentation{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px 0;border-top:1px solid var(--jd-line);border-bottom:1px solid var(--jd-line)}
.jd-presentation h3{font:400 27px/1.16 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.02em}
.jd-presentation .jd-eyebrow{font-size:8px;margin-bottom:7px}
.jd-presentation-actions{display:flex;flex-wrap:wrap;gap:8px}
.jd-status{min-height:25px;margin-top:16px!important;font-size:10px;line-height:1.6;color:var(--jd-muted)}
.jd-wardrobe{padding-top:32px}
.jd-back{margin-bottom:28px}
.jd-wardrobe .jd-section-heading{align-items:center;margin-bottom:22px}
.jd-wardrobe-intro{display:flex;align-items:center;justify-content:space-between;gap:20px}
.jd-wardrobe-intro>p{font-size:13px;line-height:1.8}
.jd-wardrobe-intro>span{font-size:11px;color:var(--jd-muted)}
.jd-local-disclosure{padding-bottom:23px;border-bottom:1px solid var(--jd-line)}
.jd-wardrobe-filters{display:flex;flex-wrap:wrap;gap:7px;padding:23px 0}
.jd-wardrobe-filters button{min-height:44px;padding:9px 15px;border:1px solid var(--jd-line);background:#fff;font-size:11px;border-radius:1px}
.jd-wardrobe-filters button.jd-selected{border-color:#292929;background:#292929;color:#fff}
.jd-local-name{width:100%;max-width:100%;min-height:44px;border:0;border-bottom:1px solid var(--jd-line);background:#fff;border-radius:0;font-weight:600!important;font-size:11px!important;padding:7px 0}
.jd-local-card select{min-width:0;max-width:100%;width:100%;min-height:44px;padding:7px 20px 7px 0;border:0;border-bottom:1px solid var(--jd-line);border-radius:0;background:#fff;font-size:11px}
.jd-local-card .jd-text-button{margin-top:4px}
.jd-empty{grid-column:1/-1;padding:45px 15px;text-align:center;background:var(--jd-paper)}
.jd-empty p{font:400 26px/1.3 'Bodoni Moda','Times New Roman',serif;margin-bottom:20px}
.jd-sample-additions{margin-top:30px;border-top:1px solid var(--jd-line);border-bottom:1px solid var(--jd-line)}
.jd-sample-additions summary{display:flex;align-items:center;justify-content:space-between;min-height:62px;font-size:11px;cursor:pointer;list-style:none}
.jd-sample-additions summary::-webkit-details-marker{display:none}
.jd-sample-addition-list{padding-bottom:15px}
.jd-sample-addition-list button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:48px;padding:8px 0;border:0;border-top:1px solid var(--jd-line);background:#fff;text-align:left;font-size:11px}
.jd-rewear-note{max-width:650px;padding:50px 0 20px}
.jd-rewear-note h3{font:400 39px/1.1 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.03em;margin-bottom:18px}
.jd-rewear-note p{font-size:12px;line-height:1.85;color:var(--jd-muted);max-width:420px;margin-bottom:23px}
.jd-rewear-note strong{font-weight:650;color:#41413d}
.jd-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover){.jd-button:not(:disabled):hover{background:#f1f0ed}.jd-primary:not(:disabled):hover{background:#444}.jd-text-button:not(:disabled):hover{text-decoration:underline;text-underline-offset:4px}.jd-alternative:hover{border-color:#484642}.jd-palette-option:hover{background:#f6f5f2}.jd-pin:hover{background:#ffffffcf}}
@media(max-width:1000px){.jd-details{padding:48px 34px 22px}.jd-section-heading h2{font-size:49px}.jd-refine-grid{gap:30px}.jd-item-grid{gap:25px 18px}.jd-finishing-card{padding:20px}.jd-finishing-card h3{font-size:25px}.jd-presentation{align-items:flex-start;flex-direction:column}.jd-presentation-actions{width:100%}.jd-presentation-actions .jd-button{flex:1}.jd-styling-note{gap:40px}.jd-item-copy h3{font-size:11px!important}}
@media(max-width:680px){.jd-details{padding:34px 22px 20px}.jd-section-heading{display:block;margin-bottom:25px}.jd-section-heading h2{font-size:42px;letter-spacing:-.035em}.jd-section-heading>p{text-align:left;margin-top:13px;font-size:11px;line-height:1.7}.jd-eyebrow{font-size:8px;letter-spacing:.12em}.jd-refine-panel{padding:20px 0}.jd-refine-first{display:block}.jd-segmented{min-width:0;width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}.jd-segmented button{font-size:11px;padding:9px 5px}.jd-wardrobe-link{margin-top:5px;justify-content:flex-end;width:100%;font-size:10px!important}.jd-control-label{font-size:9px}.jd-refine-grid{grid-template-columns:1fr;gap:16px;margin-top:12px}.jd-label-row{font-size:11px}.jd-palette-options{gap:7px}.jd-palette-option{min-height:65px;gap:8px}.jd-colour-stack i{height:21px;width:21px}.jd-palette-option>span:last-child{font-size:9px}.jd-budget-bottom{margin-top:0}.jd-look-meta{align-items:flex-start;gap:20px;margin-top:22px;font-size:9px}.jd-look-meta>span:last-child{text-align:right;max-width:110px}.jd-item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 13px}.jd-product-art{aspect-ratio:1/1.23}.jd-source-tag{left:6px;bottom:7px;font-size:7px;padding:3px 5px;min-height:19px}.jd-pin{top:0;right:0;min-width:40px;min-height:44px}.jd-pin iconify-icon{font-size:15px;width:15px;height:15px}.jd-item-copy{padding-top:11px}.jd-category{font-size:8px;margin-bottom:4px}.jd-item-copy h3{font-size:11px!important;min-height:35px;line-height:1.5!important}.jd-price-line{gap:6px;flex-wrap:wrap;min-height:27px;margin-top:4px}.jd-price-line strong{font-size:11px}.jd-price-line>span{font-size:8px}.jd-item-actions .jd-text-button{font-size:9px!important;gap:4px}.jd-item-actions .jd-text-button iconify-icon{height:13px;width:13px;font-size:13px}.jd-wish{min-width:34px!important;margin-right:-5px!important;padding:6px!important}.jd-wish iconify-icon{font-size:16px;width:16px;height:16px}.jd-finishing-card{padding:18px 14px 14px}.jd-finishing-card .jd-eyebrow{font-size:7px;letter-spacing:.08em}.jd-hair-mark{max-width:115px;min-height:75px;margin:0 auto auto}.jd-finishing-card h3{font-size:26px;line-height:1.1;margin:10px 0}.jd-finishing-card p{font-size:9px;line-height:1.75}.jd-hair-footer{font-size:7px;line-height:1.6;padding-top:14px}.jd-alternatives{padding:18px 15px}.jd-inline-heading{gap:10px;margin-bottom:15px}.jd-inline-heading .jd-eyebrow{font-size:7px}.jd-inline-heading h3{font-size:25px}.jd-alternative-grid{grid-template-columns:1fr;gap:7px}.jd-alternative{min-height:56px;font-size:10px!important;padding:12px}.jd-styling-note{grid-template-columns:1fr;gap:23px;padding:27px 0;margin-top:25px}.jd-styling-note>div:first-child>p{font-size:24px;line-height:1.45}.jd-large-swatches{margin:0 0 12px}.jd-large-swatches i{width:24px;height:24px}.jd-palette-note>p{font-size:10px}.jd-total-row{align-items:center;gap:16px;padding:26px 0}.jd-total-row .jd-control-label{font-size:8px;letter-spacing:.04em}.jd-total-row strong{font-size:40px}.jd-total-row p{font-size:9px}.jd-total-row .jd-button{padding:12px 13px;gap:6px;font-size:10px!important;min-height:48px}.jd-total-row .jd-button>span{min-width:17px;height:17px;font-size:9px;margin-left:2px}.jd-presentation{gap:19px;padding:24px 0}.jd-presentation h3{font-size:26px}.jd-presentation-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.jd-presentation-actions .jd-button{font-size:10px!important;padding:12px 8px;gap:6px}.jd-presentation-actions .jd-button:last-child{grid-column:1/-1}.jd-status{font-size:9px}.jd-wardrobe{padding-top:15px}.jd-back{margin-bottom:25px}.jd-wardrobe .jd-section-heading>.jd-button{margin-top:21px}.jd-wardrobe-intro{display:block}.jd-wardrobe-intro>p{font-size:12px}.jd-wardrobe-intro>span{display:block;margin-top:12px;font-size:10px}.jd-wardrobe-filters{gap:6px;padding:20px 0}.jd-wardrobe-filters button{font-size:10px;padding:8px 12px}.jd-local-disclosure{font-size:9px!important}.jd-rewear-note{padding-top:33px}.jd-rewear-note h3{font-size:35px}.jd-rewear-note p{font-size:11px}}
@media(max-width:359px){.jd-details{padding-left:17px;padding-right:17px}.jd-section-heading h2{font-size:38px}.jd-item-grid{gap:21px 11px}.jd-segmented button{font-size:10px}.jd-total-row{gap:10px}.jd-total-row .jd-button{font-size:9px!important;padding:11px 9px}.jd-total-row .jd-button iconify-icon{width:13px;height:13px;font-size:13px}.jd-total-row .jd-button>span{display:none}.jd-palette-option>span:last-child{font-size:8px}.jd-finishing-card{padding:15px 11px}.jd-finishing-card h3{font-size:23px}.jd-item-actions .jd-text-button{font-size:8px!important}.jd-item-actions .jd-text-button iconify-icon{display:none}.jd-source-tag{font-size:6.5px}}
@media(prefers-reduced-motion:reduce){.jd-details *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:680px){.jd-refine-panel{padding:0}.jd-refine-panel>summary{min-height:60px;gap:6px;font-size:10px}.jd-refine-panel>summary>span:first-child{gap:6px}.jd-refine-brief{font-size:8px}.jd-refine-panel>summary>iconify-icon{width:12px;height:12px;font-size:12px;margin-left:0}.jd-refine-body{padding:10px 0 20px}}
@media(max-width:359px){.jd-refine-panel>summary>span:first-child{font-size:9px}.jd-refine-brief{font-size:7px}.jd-refine-panel>summary>span:first-child iconify-icon{width:13px;height:13px;font-size:13px}}
/* ===== style block 02 ===== */
/* Session her-atelier-design-20260908. Personal space / Joyful07. */
.jp-page{max-width:1240px;margin:0 auto;padding:48px 40px 58px;font-family:var(--j-sans);color:var(--j-ink)}.jp-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}.jp-page h1{font:400 clamp(45px,5.5vw,72px)/1.08 var(--j-serif);letter-spacing:-.045em;margin:12px 0 15px;overflow-wrap:anywhere}.jp-page h1 em{font-weight:400}.jp-page-head p{font-size:11px;line-height:1.8;color:var(--j-muted)}.jp-local-badge{display:inline-flex;align-items:center;gap:7px;font-size:9px;white-space:nowrap;min-height:30px;padding:7px 10px;border:1px solid #e1ddd5;color:#81796a}.jp-local-badge iconify-icon{width:12px;height:12px;font-size:12px}.jp-local-nav{display:flex;gap:32px;border-bottom:1px solid var(--j-line);margin-bottom:32px;overflow:auto}.jp-local-nav a{display:flex;align-items:center;min-height:48px;font-size:11px;white-space:nowrap;position:relative}.jp-local-nav a.jp-current:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--j-mood)}.jp-account-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:24px}.jp-identity-card{display:flex;min-width:0;background:#eeece6;min-height:350px;align-items:stretch}.jp-profile-art{width:44%;flex:none;position:relative;background:linear-gradient(150deg,#e2dcd3,#f4ede5 60%,#dbd8db);min-height:330px;display:flex;align-items:center;justify-content:center;overflow:hidden}.jp-profile-art>img{height:100%;width:100%;object-fit:cover;position:absolute;inset:0}.jp-person-mark{text-align:center;padding:24px;max-width:210px;width:100%;color:#999186}.jp-person-mark svg{stroke:currentColor;width:100%;stroke-width:.9}.jp-person-mark span{display:block;font:italic 14px var(--j-serif);margin-top:12px;white-space:nowrap}.jp-camera{position:absolute;right:12px;bottom:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#faf9f6e8;border:1px solid #fff9;border-radius:50%;z-index:2}.jp-camera iconify-icon{width:17px;height:17px;font-size:17px}.jp-identity-copy{padding:32px 25px;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;min-width:0}.jp-identity-copy h2{font:400 42px/1.09 var(--j-serif);letter-spacing:-.035em;margin:13px 0;overflow-wrap:anywhere}.jp-identity-copy p{font-size:11px;line-height:1.8;color:#807a6f;max-width:210px}.jp-identity-copy .j-button{margin-top:24px;font-size:10px;padding:11px 14px}.jp-avatar-card{padding:24px 25px;border:1px solid #e0d9d0;background:linear-gradient(130deg,#fcfaf6,#f0e9e8 70%,#e9e7ee);display:flex;flex-direction:column;min-width:0}.jp-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.jp-card-top>iconify-icon{color:#a5798d;width:23px;height:23px;font-size:23px}.jp-avatar-card h2{font:400 42px/1.08 var(--j-serif);letter-spacing:-.025em;margin:16px 0}.jp-avatar-card h2 em{color:#a2677c;font-weight:400}.jp-avatar-card p{font-size:10px;color:#8d8176;line-height:1.75;max-width:250px}.jp-completion{display:flex;gap:18px;font-size:9px;padding:18px 0 14px;color:#776e64;margin-top:auto}.jp-avatar-card .j-button{font-size:10px}.jp-avatar-card small{display:block;font-size:8px;color:#9a8d81;text-align:center;margin-top:10px}.jp-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:27px}.jp-summary-card{position:relative;border:1px solid var(--j-line);background:#fff;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:25px 22px;min-height:214px;color:inherit;transition:border-color .2s,transform .2s}.jp-summary-card:hover{border-color:#bcaaac;transform:translateY(-2px)}.jp-summary-icon{position:absolute;right:18px;top:18px;color:#ac9b94}.jp-summary-icon iconify-icon{width:17px;height:17px;font-size:17px}.jp-summary-card>.j-eyebrow{font-size:8px;max-width:82%}.jp-summary-card strong{font:400 29px/1.15 var(--j-serif);margin:16px 0 10px;letter-spacing:-.02em}.jp-summary-card p{font-size:10px;line-height:1.75;color:#857e73;max-width:240px}.jp-card-link{font-size:9px;margin-top:auto;padding-top:20px;display:flex;gap:8px;align-items:center}.jp-card-link iconify-icon{width:12px;height:12px;font-size:12px}.jp-account-note{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--j-line);padding-top:25px;margin-top:32px}.jp-account-note>div{display:flex;align-items:flex-start;gap:14px}.jp-account-note>div>iconify-icon{color:#9c9386;margin-top:5px}.jp-account-note p{font-size:10px;line-height:1.8;color:#888074;max-width:640px}.jp-account-note p strong{font-weight:500;color:#5f5b53}.jp-account-note .j-button{white-space:nowrap}.jp-auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 56px);background:var(--j-paper)}.jp-auth-editorial{position:relative;background:#e4e0d8;overflow:hidden;min-height:660px}.jp-auth-editorial>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 27%}.jp-auth-editorial:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#211d199a)}.jp-auth-story{position:absolute;left:40px;right:30px;bottom:48px;z-index:2;color:white}.jp-auth-story .j-eyebrow{color:#ffffffba;font-size:8px}.jp-auth-story h1{font:400 clamp(40px,4vw,69px)/1.08 var(--j-serif);letter-spacing:-.04em;margin:16px 0}.jp-auth-story h1 em{font-weight:400}.jp-auth-story p{font-size:10px;color:#ffffffb5}.jp-image-note{position:absolute;top:20px;left:20px;z-index:2;font-size:8px;background:#faf9f6cc;padding:6px 8px;color:#665d51}.jp-auth-panel{padding:22px 40px 20px;display:flex;flex-direction:column;min-width:0}.jp-auth-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px}.jp-auth-top>a{display:flex;align-items:center;gap:7px;min-height:44px}.jp-auth-top iconify-icon{width:14px;height:14px;font-size:14px}.jp-preview-pill{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:#a09583}.jp-auth-body{max-width:360px;width:100%;margin:auto;padding:36px 0}.jp-auth-body h2{font:400 64px/1.03 var(--j-serif);letter-spacing:-.045em;margin:13px 0 19px}.jp-auth-body h2 em{font-weight:400;color:#a06b7f}.jp-auth-body>p{font-size:11px;line-height:1.8;color:#8d8578;max-width:330px}.jp-auth-switch{display:grid;grid-template-columns:1fr 1fr;margin:28px 0 22px;border-bottom:1px solid var(--j-line)}.jp-auth-switch>a{font-size:10px;min-height:44px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid transparent;margin-bottom:-1px;color:#a59988}.jp-auth-switch>a[aria-current=page]{border-bottom-color:#b9788c;color:#34302a}.jp-field{display:flex;flex-direction:column;gap:8px;font-size:10px;margin:16px 0;position:relative}.jp-field>span{color:#9c9080;font-size:8px}.jp-field>input:not([type=range]),.jp-field>select,.jp-field>textarea{width:100%;min-height:48px;border:1px solid #dad3c7;background:#fff;border-radius:0;padding:11px 12px;font-size:12px;max-width:100%}.jp-field>input[readonly]{background:#f2efe8;color:#908674}.jp-field>input:focus,.jp-field>textarea:focus{border-color:#a8798c}.jp-field>textarea{min-height:110px;resize:vertical;line-height:1.8}.jp-field>input[type=range]{min-height:38px;accent-color:#a7758c;width:100%}.jp-field output{position:absolute;right:0;top:0;font-size:10px}.jp-auth-body .j-button{font-size:10px;min-height:48px}.jp-auth-status{font-size:10px;line-height:1.8;color:#86675c;margin-top:13px}.jp-auth-status:empty{margin:0}.jp-auth-status strong{font-weight:600}.jp-auth-separator{display:flex;align-items:center;gap:10px;margin:18px 0;font-size:9px;color:#a39885}.jp-auth-separator:before,.jp-auth-separator:after{content:'';height:1px;flex:1;background:#e2dcd1}.jp-social-auth{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:46px;width:100%;border:1px solid #ded6c8;margin:8px 0;padding:10px 14px;font-size:10px;text-align:left}.jp-social-auth>span:last-child{font-size:7px;color:#a49680;margin-left:auto}.jp-social-auth>iconify-icon{width:15px;height:15px;font-size:15px}.jp-google-letter{font:600 17px Arial,sans-serif;width:15px;text-align:center;color:#777}.jp-auth-body .jp-auth-disclosure{font-size:9px;line-height:1.8;margin:18px 0 9px;color:#a39785}.jp-preview-entry{display:flex;align-items:center;justify-content:center;gap:9px;font-size:10px;min-height:44px;width:100%;text-decoration:underline;text-underline-offset:5px}.jp-preview-entry iconify-icon{width:13px;height:13px;font-size:13px}.jp-auth-bottom{text-align:center;font-size:8px;color:#aa9e8a;padding:10px 0}.jp-footnote{font-size:9px;line-height:1.8;color:#948775;margin-top:14px!important}.jp-inline-status{font-size:10px;color:#a1504f;line-height:1.7;margin-top:15px}.jp-split-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.jp-split-fields>.jp-field{min-width:0}.jp-control-label{display:block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin:18px 0 12px}.jp-preference-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.jp-preference-options label{position:relative;cursor:pointer;display:flex}.jp-preference-options input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.jp-preference-options span{display:flex;align-items:center;justify-content:center;padding:10px 15px;min-height:44px;border:1px solid #dfd6c9;font-size:10px;background:#fff}.jp-preference-options input:checked+span{border-color:#a67689;background:#f4ebed;color:#865c6d}.jp-preference-options input:focus-visible+span{outline:2px solid #9f7a8b;outline-offset:2px}.jp-settings-list{border-top:1px solid var(--j-line);margin:18px 0}.jp-settings-list>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0;border-bottom:1px solid var(--j-line);font-size:10px}.jp-settings-list span{display:flex;align-items:center;gap:9px}.jp-settings-list iconify-icon{width:14px;height:14px;font-size:14px;color:#958a79}.jp-settings-list strong{font-weight:500;font-size:9px;color:#8f8170;text-align:right}.jp-danger-button{min-height:48px;display:flex;align-items:center;justify-content:space-between;width:100%;border-top:1px solid var(--j-line);border-bottom:1px solid var(--j-line);padding:10px 0;color:#9d4b4f;font-size:10px;margin-top:25px}.jp-danger-button iconify-icon{width:14px;height:14px;font-size:14px}.j-account-entry{min-height:44px;min-width:58px;padding:7px 9px;font-size:10px;display:flex;align-items:center;justify-content:center;gap:7px}.j-account-entry img{height:27px;width:27px;object-fit:cover;border-radius:50%}.j-account-entry iconify-icon{width:17px;height:17px;font-size:17px}.j-account-entry .j-profile-label{display:none}.j-avatar-ref-link{background:#faf9f6e8;display:flex;align-items:center;gap:6px;position:absolute;z-index:4;right:16px;bottom:20px;font-size:9px;padding:8px 10px;min-height:36px}.j-avatar-ref-link iconify-icon{width:13px;height:13px;font-size:13px}.j-scene[data-personal-reference=true]:before{background:none}.j-scene[data-personal-reference=true] .j-photo-note{bottom:62px}
@media(min-width:701px){.j-account-entry .j-profile-label{display:inline}.j-account-entry{min-width:74px}.j-header-tools .j-account-entry+.j-icon{min-width:40px}}
@media(max-width:1100px){.jp-page{padding:36px 28px}.jp-account-grid{grid-template-columns:1.3fr 1fr;gap:18px}.jp-identity-copy{padding:24px 20px}.jp-identity-copy h2{font-size:33px}.jp-summary-grid{gap:18px}.jp-summary-card{padding:22px 18px}.jp-summary-card strong{font-size:25px}.jp-avatar-card{padding:23px 20px}.jp-auth-panel{padding-inline:28px}.jp-auth-story{left:28px}.jp-auth-body{max-width:330px}.jp-auth-body h2{font-size:58px}}
@media(max-width:800px){.jp-account-grid{grid-template-columns:1fr}.jp-identity-card{min-height:265px}.jp-profile-art{min-height:265px;width:40%}.jp-avatar-card{display:grid;grid-template-columns:1.2fr 1fr;column-gap:26px}.jp-card-top{grid-column:1/-1}.jp-avatar-card h2{grid-column:1;grid-row:2/5}.jp-avatar-card p{grid-column:2;grid-row:2;align-self:end;margin-top:18px}.jp-completion{grid-column:2;grid-row:3;margin-top:0}.jp-avatar-card>a{grid-column:2;grid-row:4;align-self:end}.jp-avatar-card small{grid-column:2}.jp-summary-grid{gap:12px}.jp-summary-card{padding:20px 15px}.jp-summary-card strong{font-size:25px}.jp-summary-icon{display:none}.jp-summary-card>.j-eyebrow{max-width:100%}.jp-page-head{align-items:flex-start}.jp-local-badge{margin-top:9px;font-size:8px}.jp-auth{grid-template-columns:.75fr 1fr}.jp-auth-panel{padding-inline:24px}.jp-auth-story{left:24px;right:24px}.jp-auth-story h1{font-size:39px}}
@media(max-width:600px){.jp-page{padding:28px 18px 35px}.jp-page-head{display:block;margin-bottom:18px}.jp-page h1{font-size:49px;margin-top:9px;margin-bottom:11px}.jp-page-head p{font-size:10px;max-width:280px}.jp-local-badge{margin-top:14px;font-size:8px;min-height:27px;padding:5px 8px}.jp-local-nav{gap:24px;margin-bottom:20px}.jp-local-nav a{font-size:10px;min-height:44px}.jp-identity-card{min-height:255px}.jp-profile-art{width:41%;min-height:255px}.jp-person-mark{padding:20px}.jp-person-mark span{font-size:10px;white-space:normal}.jp-identity-copy{padding:22px 18px}.jp-identity-copy .j-eyebrow{font-size:7px}.jp-identity-copy h2{font-size:32px;margin:12px 0}.jp-identity-copy p{font-size:9px}.jp-identity-copy .j-button{font-size:9px;margin-top:18px;padding:9px 11px;min-height:44px}.jp-account-grid{gap:18px}.jp-avatar-card{padding:20px;column-gap:16px;grid-template-columns:1fr 1fr}.jp-avatar-card h2{font-size:35px;margin-bottom:0}.jp-avatar-card p{font-size:9px;line-height:1.7;margin-top:16px}.jp-completion{display:block;font-size:8px;line-height:1.9;padding:9px 0}.jp-completion span{display:block}.jp-avatar-card .j-button{font-size:9px;padding:10px 8px}.jp-avatar-card small{font-size:7px;line-height:1.6}.jp-summary-grid{grid-template-columns:1fr;gap:0;margin-top:23px;border-top:1px solid var(--j-line)}.jp-summary-card{border:0;border-bottom:1px solid var(--j-line);padding:20px 4px 20px 43px;min-height:126px;background:transparent}.jp-summary-card>.j-eyebrow{font-size:7px}.jp-summary-card strong{font-size:26px;margin:9px 0 7px}.jp-summary-card p{font-size:9px;max-width:260px}.jp-summary-icon{display:block;top:22px;left:3px;right:auto}.jp-card-link{font-size:8px;padding-top:12px}.jp-account-note{display:block;margin-top:24px;padding-top:18px}.jp-account-note p{font-size:9px}.jp-account-note .j-button{margin:16px 0 0 33px;font-size:9px;min-height:44px}.jp-auth{display:flex;flex-direction:column;min-height:calc(100svh - 48px)}.jp-auth-editorial{display:none}.jp-auth-panel{padding:12px 24px 18px;flex:1}.jp-auth-top{font-size:9px}.jp-auth-body{max-width:380px;padding:27px 0 24px}.jp-auth-body>.j-eyebrow{font-size:8px}.jp-auth-body h2{font-size:60px;margin:13px 0 18px}.jp-auth-body>p{font-size:11px;max-width:310px}.jp-auth-switch{margin:24px 0 18px}.jp-auth-switch a{font-size:11px}.jp-field{font-size:10px}.jp-auth-bottom{font-size:8px}.j-account-entry{min-width:59px;padding-inline:5px;font-size:9px}.j-header-tools .j-account-entry img{width:26px;height:26px}.j-account-entry.j-has-profile{min-width:40px}.j-avatar-ref-link{right:10px;bottom:12px;font-size:8px;min-height:32px}.j-scene[data-personal-reference=true] .j-photo-note{bottom:51px}}
@media(max-width:350px){.jp-page{padding-inline:14px}.jp-page h1{font-size:43px}.jp-local-nav{gap:19px}.jp-local-nav a{font-size:9px}.jp-identity-copy{padding:18px 13px}.jp-identity-copy h2{font-size:29px}.jp-identity-copy .j-button{padding:8px 9px;font-size:8px}.jp-avatar-card{padding:18px 15px;column-gap:12px}.jp-avatar-card h2{font-size:31px}.jp-avatar-card p{font-size:8px}.jp-auth-panel{padding-inline:20px}.jp-auth-body h2{font-size:55px}.jp-split-fields{gap:10px}.j-account-entry{min-width:55px;font-size:9px}}
/* Personal motion with parameters before a reference photo is added. */
.j-motion-reference-pending{width:42%;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#ece8e2;color:#6d655f;text-align:center;font-size:11px;line-height:1.6}.j-motion-reference-pending iconify-icon{font-size:32px}
/* ===== style block 03 ===== */
/* Session her-atelier-design-20260908. ExactlyHer private reference editor. */
.ja-editor{--ja-ink:#292825;--ja-muted:#7f796f;--ja-line:#ddd8cf;--ja-paper:#f8f6f1;--ja-accent:#866479;color:var(--ja-ink);font-family:Manrope,Arial,sans-serif;font-size:12px;line-height:1.6;max-width:1190px;margin:auto;padding:28px 48px 40px;background:#faf9f6;box-sizing:border-box}
.ja-editor *,.ja-editor *:before,.ja-editor *:after{box-sizing:border-box}
.ja-editor button,.ja-editor input{font:inherit;color:inherit}
.ja-editor button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ja-editor button:disabled{cursor:default;opacity:.45}
.ja-editor button:focus-visible,.ja-editor input:focus-visible,.ja-editor [tabindex]:focus-visible{outline:2px solid #8b6983;outline-offset:4px}
.ja-editor button{letter-spacing:0;text-transform:none}
.ja-editor p,.ja-editor h1,.ja-editor h2,.ja-editor h3{margin:0}
.ja-editor iconify-icon{display:inline-block;flex:none;width:18px;height:18px;font-size:18px;vertical-align:middle}
.ja-text-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;border:0;padding:8px 0;background:none;font-size:10px!important;font-weight:550;line-height:1.4}
.ja-text-button iconify-icon{font-size:14px;width:14px;height:14px}
.ja-back{margin-bottom:31px;color:var(--ja-muted)!important}
.ja-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:27px}
.ja-eyebrow{display:block;margin-bottom:12px;font-size:8px;font-weight:650;letter-spacing:.15em;text-transform:uppercase;color:var(--ja-muted);line-height:1.6}
.ja-heading h1{font:400 70px/1.01 'Bodoni Moda',Georgia,serif;letter-spacing:-.047em}
.ja-heading h1 em{font-weight:400}
.ja-heading>p{font-size:12px;line-height:1.9;max-width:400px;color:var(--ja-muted);padding-bottom:6px}
.ja-local-note{display:flex;align-items:center;gap:9px;font-size:10px;color:#7a7367;padding:15px 0 22px;border-bottom:1px solid var(--ja-line)}
.ja-local-note iconify-icon{width:13px;height:13px;font-size:13px}
.ja-section{padding:35px 0;border-bottom:1px solid var(--ja-line)}
.ja-section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}
.ja-section-head>div{display:flex;align-items:center;gap:16px}
.ja-section-number{font-size:9px;color:#999182;border:1px solid #ddd5c8;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:50%}
.ja-section h2{font:400 32px/1.2 'Bodoni Moda',Georgia,serif;letter-spacing:-.02em}
.ja-completion{font-size:9px;white-space:nowrap;color:var(--ja-muted)}
.ja-photo-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:23px;align-items:start}
.ja-photo-slot{min-width:0}
.ja-slot-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:9px;font-weight:550}
.ja-slot-top>small{font-size:8px;color:#9b9488;font-weight:400}
.ja-photo-window{position:relative;width:100%;height:290px;background:#f0ece4;border:1px solid #e5ded1;overflow:hidden}
.ja-photo-pick{position:absolute;inset:0;border:0;background:none;width:100%;height:100%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ja-silhouette{display:block;width:105px;height:175px;color:#ae9f8c}
.ja-silhouette svg{width:100%;height:100%;display:block}
.ja-photo-portrait .ja-silhouette{width:135px;height:165px}
.ja-photo-prompt{display:flex;align-items:center;justify-content:center;gap:8px;font-size:9px;color:#8a7e6d}
.ja-photo-prompt iconify-icon{width:13px;height:13px;font-size:13px}
.ja-photo-pick>img{height:100%;width:100%;object-fit:contain;display:block;padding:9px}
.ja-has-photo{background:#edeae3}
.ja-photo-remove{position:absolute;right:5px;top:5px;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:9px;border:0;background:#faf9f6e8;border-radius:50%}
.ja-photo-remove iconify-icon{width:16px;height:16px;font-size:16px}
.ja-photo-reference{position:absolute;bottom:9px;left:9px;font-size:8px;background:#faf9f6e6;padding:4px 8px;color:#6f6659;pointer-events:none}
.ja-photo-loading{position:absolute;inset:auto 0 0;background:#faf9f6ed;font-size:10px;padding:14px;text-align:center}
.ja-photo-caption{padding-top:12px}
.ja-photo-caption>p{font-size:10px;line-height:1.8;color:var(--ja-muted);min-height:36px}
.ja-photo-caption .ja-text-button{margin-top:4px;text-decoration:underline;text-underline-offset:4px}
.ja-small{font-size:9px!important;line-height:1.75!important;color:#8a8174}
.ja-photo-spec{margin-top:15px!important}
.ja-measure-intro{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:25px}
.ja-measure-intro>p,.ja-section-copy{font-size:11px;line-height:1.85;color:var(--ja-muted)}
.ja-units{display:flex;gap:3px;padding:3px;border:1px solid var(--ja-line);flex:none;border-radius:2px}
.ja-units button{min-width:49px;min-height:44px;padding:9px 11px;border:0;background:none;font-size:11px;border-radius:1px}
.ja-units button[aria-pressed=true]{background:#282724;color:#fff}
.ja-measure-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 27px}
.ja-measure-field{display:block;min-width:0}
.ja-measure-field>span{display:flex;justify-content:space-between;gap:10px;font-size:10px;margin-bottom:9px;font-weight:550}
.ja-measure-field>span>small{font-size:9px;font-weight:400;color:#a39886}
.ja-measure-field input{width:100%;max-width:100%;min-height:50px;border:1px solid #d7d0c3;border-radius:1px;padding:11px 13px;background:#fff;font-size:14px;color:#39332b}
.ja-measure-field input::placeholder{color:#b4aa9a;font-size:11px}
.ja-measure-field input[aria-invalid=true]{border-color:#a25050}
.ja-field-hint{display:block;font-size:8px;line-height:1.65;color:#948979;margin-top:8px}
.ja-error{display:block;margin:8px 0 0!important;font-size:9px;line-height:1.65;color:#9b4642}
.ja-section-copy{margin-bottom:26px!important}
.ja-appearance-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px 45px}
.ja-appearance-grid fieldset{border:0;padding:0;margin:0;min-width:0}
.ja-appearance-grid legend{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;font-size:10px;font-weight:550;margin-bottom:14px;padding:0}
.ja-appearance-grid legend>span{color:#a39480;font-weight:400;font-size:9px}
.ja-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.ja-swatch{display:flex;align-items:center;flex-direction:column;gap:6px;min-height:64px;min-width:0;padding:6px 3px;border:1px solid transparent;background:none;border-radius:2px}
.ja-swatch>i{height:25px;width:25px;display:block;flex:none;border-radius:50%;border:1px solid #0000000b}
.ja-swatch>span{display:block;font-size:8px;font-weight:400;text-align:center;line-height:1.45;color:#82776a}
.ja-swatch.ja-selected{border-color:#8d7a68;background:#fff}
.ja-length-options{display:flex;flex-wrap:wrap;gap:8px}
.ja-length-options button{min-height:44px;font-size:10px;background:none;border:1px solid #d8d0c4;padding:10px 13px;border-radius:1px}
.ja-length-options button[aria-pressed=true]{border-color:#39332d;background:#fff}
.ja-clear{display:inline-flex;min-height:44px;align-items:center;padding:8px 0;border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:8px!important;color:#918474!important}
.ja-consent{padding:28px 0}
.ja-consent label{display:flex;align-items:flex-start;gap:13px;max-width:780px;cursor:pointer}
.ja-consent input{height:18px;width:18px;min-height:18px!important;flex:none;accent-color:#887085;margin:3px 0 0}
.ja-consent label strong{display:block;font-size:11px;line-height:1.6;font-weight:550}
.ja-consent label small{display:block;font-size:9px;line-height:1.85;color:#8e8271;margin-top:5px;max-width:600px}
.ja-actions{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px 0;border-top:1px solid var(--ja-line);border-bottom:1px solid var(--ja-line)}
.ja-actions .ja-eyebrow{margin-bottom:7px}
.ja-actions p{font-size:10px;color:var(--ja-muted)}
.ja-actions>div:last-child{display:flex;gap:10px}
.ja-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 19px;min-height:48px;line-height:1.35;font-size:11px!important;border:1px solid #bfb5a5;background:#fff;border-radius:1px;font-weight:550;text-align:center}
.ja-button iconify-icon{width:15px;height:15px;font-size:15px}
.ja-primary{background:#2b2926;color:#fff!important;border-color:#2b2926}
.ja-status{min-height:24px;font-size:10px;line-height:1.75;color:#807362;margin-top:16px!important}
.ja-footer-note{margin-top:8px!important}
.ja-brief{padding:26px;margin-top:28px;border:1px solid #d5c9b7;background:#fff;scroll-margin-top:20px}
.ja-brief-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}
.ja-brief h3{font:400 34px/1.12 'Bodoni Moda',Georgia,serif;letter-spacing:-.025em}
.ja-brief .ja-eyebrow{font-size:8px;margin-bottom:9px}
.ja-icon-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:10px;border:0;background:none}
.ja-brief-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px}
.ja-brief-photos{display:flex;gap:9px;align-items:stretch}
.ja-brief-photos figure{margin:0;min-width:0;flex:1}
.ja-brief-photos figure>div{height:200px;background:#efebe3;overflow:hidden}
.ja-brief-photos img{width:100%;height:100%;display:block;object-fit:contain;padding:5px}
.ja-brief-photos figcaption{font-size:8px;color:#988977;line-height:1.5;margin-top:7px}
.ja-brief-details dl{margin:0}
.ja-brief-details dl>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px solid #e9e2d8;font-size:10px}
.ja-brief-details dt{color:#8a7b69}
.ja-brief-details dd{margin:0;font-weight:550}
.ja-brief-details>p{font-size:10px;line-height:1.8;color:#8a7b69;margin-top:13px}
.ja-brief-note{margin:22px 0 17px!important;font-size:9px;line-height:1.8;color:#94816b}
.ja-brief-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;width:100%;height:200px;background:#f2eee7;color:#ac9c87;text-align:center}
.ja-brief-empty p{font-size:10px;line-height:1.8}
@media(hover:hover){.ja-photo-pick:not(:disabled):hover{background:#d7cebf22}.ja-button:not(:disabled):hover{background:#f0ebe2}.ja-primary:not(:disabled):hover{background:#47413b}.ja-text-button:not(:disabled):hover{text-decoration:underline;text-underline-offset:4px}.ja-swatch:hover{background:#ffffff90}.ja-length-options button:hover{border-color:#8c7f6d}}
@media(max-width:1000px){.ja-editor{padding:24px 32px 30px}.ja-heading h1{font-size:60px}.ja-heading>p{font-size:11px;max-width:310px}.ja-photo-grid{gap:18px}.ja-photo-window{height:255px}.ja-section h2{font-size:29px}.ja-appearance-grid{gap:25px}.ja-actions{align-items:flex-start;flex-direction:column}.ja-brief-grid{gap:25px}.ja-brief-photos figure>div{height:175px}}
@media(max-width:680px){.ja-editor{padding:18px 22px 25px}.ja-back{margin-bottom:24px}.ja-heading{display:block;margin-bottom:16px}.ja-heading h1{font-size:51px;line-height:1.04;letter-spacing:-.037em}.ja-eyebrow{font-size:7px;letter-spacing:.12em}.ja-heading>p{margin-top:17px;font-size:11px;line-height:1.8}.ja-local-note{font-size:9px;gap:7px;align-items:flex-start;line-height:1.7;padding:12px 0 22px}.ja-local-note iconify-icon{margin-top:3px;width:12px;height:12px;font-size:12px}.ja-section{padding:27px 0}.ja-section-head{gap:12px;align-items:flex-start;margin-bottom:21px}.ja-section-head>div{gap:10px;align-items:flex-start}.ja-section-number{width:24px;height:24px;font-size:8px;margin-top:3px}.ja-section h2{font-size:27px;max-width:220px;line-height:1.2}.ja-completion{font-size:8px;margin-top:7px;white-space:nowrap}.ja-photo-grid{grid-template-columns:1fr 1fr;gap:22px 13px}.ja-photo-portrait{grid-column:1/-1}.ja-photo-window{height:205px}.ja-photo-portrait .ja-photo-window{height:260px}.ja-photo-portrait .ja-photo-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.ja-photo-portrait .ja-photo-caption>p{max-width:195px;min-height:0}.ja-photo-portrait .ja-photo-caption .ja-text-button{white-space:nowrap;margin-top:-5px;min-height:44px}.ja-slot-top{font-size:9px}.ja-slot-top>small{font-size:7px}.ja-photo-caption>p{font-size:9px;min-height:49px;line-height:1.8}.ja-photo-caption .ja-text-button{font-size:9px!important}.ja-photo-prompt{font-size:8px;gap:5px}.ja-silhouette{height:137px;width:86px}.ja-photo-portrait .ja-silhouette{height:150px;width:125px}.ja-photo-spec{font-size:8px!important;margin-top:14px!important}.ja-measure-intro{align-items:flex-start;gap:15px;margin-bottom:21px}.ja-measure-intro>p{font-size:10px;line-height:1.8}.ja-units{gap:2px;padding:2px}.ja-units button{min-width:37px;min-height:44px;padding:7px 9px;font-size:10px}.ja-measure-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 17px}.ja-measure-field>span{font-size:10px}.ja-measure-field input{min-height:49px;padding:10px 12px;font-size:14px}.ja-field-hint{font-size:8px;line-height:1.7}.ja-section-copy{font-size:10px;line-height:1.8;margin-bottom:22px!important}.ja-appearance-grid{grid-template-columns:1fr;gap:24px}.ja-appearance-grid legend{font-size:10px;margin-bottom:12px}.ja-swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ja-swatch{min-height:70px;padding:8px 3px;gap:7px}.ja-swatch>i{height:29px;width:29px}.ja-swatch>span{font-size:8px}.ja-length-options{gap:7px}.ja-length-options button{font-size:10px;padding:10px 14px;min-height:44px}.ja-consent{padding:23px 0}.ja-consent label{gap:11px}.ja-consent label strong{font-size:10px}.ja-consent label small{font-size:8px;line-height:1.9}.ja-actions{gap:20px;padding:23px 0}.ja-actions>div:last-child{width:100%;display:grid;grid-template-columns:.85fr 1.15fr;gap:8px}.ja-button{padding:12px 11px;font-size:10px!important;gap:6px}.ja-actions .ja-button iconify-icon{height:13px;width:13px;font-size:13px}.ja-status{font-size:9px}.ja-footer-note{font-size:8px!important}.ja-brief{padding:20px 16px;margin-top:24px}.ja-brief h3{font-size:31px}.ja-brief-heading{gap:9px;margin-bottom:22px}.ja-brief .ja-eyebrow{font-size:7px}.ja-brief-grid{grid-template-columns:1fr;gap:21px}.ja-brief-photos figure>div{height:185px}.ja-brief-photos{gap:7px}.ja-brief-details dl>div{font-size:10px;padding:8px 0}.ja-brief-note{font-size:8px;line-height:1.9;margin-top:18px!important}.ja-brief>.ja-button{width:100%}.ja-brief-photos figcaption{font-size:7px}}
@media(max-width:359px){.ja-editor{padding-left:17px;padding-right:17px}.ja-heading h1{font-size:48px}.ja-section-head>div{gap:8px}.ja-section h2{font-size:25px;max-width:185px}.ja-completion{font-size:7px}.ja-section-number{height:21px;width:21px;font-size:7px}.ja-photo-grid{gap:19px 11px}.ja-photo-window{height:187px}.ja-photo-prompt>span{font-size:7px}.ja-photo-portrait .ja-photo-caption>p{max-width:160px;font-size:8px}.ja-photo-portrait .ja-photo-caption .ja-text-button{font-size:8px!important}.ja-photo-caption>p{font-size:8px}.ja-measure-intro>p{font-size:9px}.ja-measure-grid{gap:22px 13px}.ja-swatch>span{font-size:7px}.ja-length-options button{font-size:9px;padding:9px 12px}.ja-actions .ja-button{font-size:9px!important;padding:12px 8px}.ja-brief h3{font-size:27px}}
@media(prefers-reduced-motion:reduce){.ja-editor *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* ===== style block 04 ===== */
/* Session her-atelier-design-20260908. Look first, oversized circular caps above it. */
#joyful-app[data-studio=true] .j-header{position:absolute;inset:0 0 auto;height:56px;background:linear-gradient(#faf9f6ee,#faf9f6a8);border:0;backdrop-filter:blur(8px);z-index:6}
.j-hero{position:relative;display:block;height:100svh;min-height:0;max-height:none;isolation:isolate;overflow:hidden}
.j-scene{position:absolute;inset:0;width:100%;height:100%;background:#dcd9d0}
.j-scene:before{opacity:.33;filter:blur(24px);transform:scale(1.07)}
.j-portrait,.j-scene video{inset:0;width:100%;height:100%;object-fit:contain;object-position:37% center;padding:56px 0 12px}
.j-scene-top{top:72px;left:24px;right:24px}
.j-scene-label{display:none}
.j-photo-note{bottom:20px;left:22px;right:auto;background:#faf9f6b8;writing-mode:horizontal-tb;font-size:8px;padding:5px 8px;max-width:280px}
.j-controls{position:absolute;right:24px;bottom:0;width:min(520px,100%);height:192px;min-height:0;padding:0;border:0;background:none;display:block;z-index:4;pointer-events:none}
.j-controls:before{content:'';position:absolute;inset:-20px -24px 0;pointer-events:none;background:linear-gradient(transparent,#faf9f615 20%,#faf9f680 100%);z-index:-1}
.j-controls>*{pointer-events:auto}
.j-intro{position:absolute;inset:0 auto auto 13px;text-align:left;padding:0;background:none;backdrop-filter:none;border:0;max-width:none;height:44px;display:flex;align-items:center;pointer-events:none}
.j-intro .j-eyebrow,.j-intro p{display:none}
.j-intro .j-title{font-size:33px;line-height:1;letter-spacing:-.055em;padding:0;filter:drop-shadow(0 1px 5px #faf9f6)}
.j-axis-tabs{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;margin:0}
.j-axis-tabs:focus-within{clip-path:none;width:calc(100% - 24px);height:44px;left:12px;top:-48px;overflow:visible;background:#faf9f6f2;border-radius:22px}
.j-disc{position:absolute;left:0;bottom:-32px;width:100%;height:180px;aspect-ratio:auto;align-self:auto;overflow:hidden;touch-action:pan-y;filter:drop-shadow(0 -1px 1px #faf9f66b)}
.j-disc svg{display:block;width:100%;height:100%;overflow:hidden}
[data-band=outer] .j-ring-track{stroke:var(--j-band-paint,#f8f5eee8);stroke-width:44;fill:none}
[data-band=middle] .j-ring-sectors{stroke-width:44;fill:none;opacity:.96}
[data-band=inner] .j-ring-track{stroke-width:44;fill:none;opacity:.93}
.j-disc[data-active-band=outer] [data-band=outer] .j-ring-track{stroke:#fffaf2f5}
.j-disc[data-active-band=inner] [data-band=inner] .j-ring-track{stroke-width:44}
:is([data-band=outer] .j-ring-labels,.j-lens-layer[data-band=outer]) text{font-size:14px;fill:#423e39}.j-date-weekday{font-size:7px;fill:#827768}
:is([data-band=middle] .j-ring-labels,.j-lens-layer[data-band=middle]) text{font-size:13px;font-weight:600}:is([data-band=inner] .j-ring-labels,.j-lens-layer[data-band=inner]) text{font-size:11px}
.j-hub,.j-hub-star,.j-hub-label{display:none}
.j-photo-note{display:none}
.j-scene[data-personal-reference=true] .j-photo-note{display:block}
.j-dial-hint,.j-context-strip{display:none}
.j-selection{position:absolute;top:0;left:103px;right:79px;display:flex;margin:0;border:0;height:44px;align-items:center;justify-content:center;gap:0}
.j-selection>.j-icon{display:none}
.j-selection-value{background:#faf9f6d9;backdrop-filter:blur(12px);border:1px solid #fff6;max-width:100%;width:auto;min-width:100px;min-height:40px;height:40px;padding:3px 14px;border-radius:22px;box-shadow:0 3px 20px #2b241508}
.j-selection-value strong{font:500 13px/1.5 var(--j-sans);letter-spacing:-.02em}
.j-selection-value span{font-size:7px;line-height:1.4;max-width:160px}
.j-look-action{position:absolute;top:0;right:12px;margin:0;padding:0 12px;min-height:44px;height:44px;gap:4px;border-radius:23px;background:#242424ed;backdrop-filter:blur(12px);font-size:0;box-shadow:0 3px 18px #2b24151a}
.j-look-action>span{font-size:0;gap:0}.j-look-action small{display:none}.j-look-action>span:after{content:'Look';font-size:10px}.j-look-action iconify-icon{width:14px;height:14px;font-size:14px}
.j-view-look{position:absolute;right:26px;top:128px;background:#faf9f6b8;backdrop-filter:blur(12px);border:1px solid #fff8;border-radius:50%;z-index:5;min-width:44px;min-height:44px}
.j-controls{transition:opacity .24s,transform .35s cubic-bezier(.2,.75,.2,1)}
.j-viewing-look .j-controls{opacity:0;transform:translateY(100%);visibility:hidden;pointer-events:none}
.j-viewing-look .j-controls *{pointer-events:none}
.j-viewing-look .j-view-look{background:#262626e8;color:white}
.j-hero .j-avatar-ref-link{bottom:52px;left:22px;right:auto;min-height:44px;background:#faf9f6dd}
.j-scene[data-personal-reference=true] .j-photo-note{bottom:20px}
@media(max-width:700px){
#joyful-app[data-studio=true] .j-header{height:48px}
.j-hero{height:100svh;min-height:0;max-height:none;display:block}
.j-portrait,.j-scene video{object-position:center center;padding:48px 0 146px}
.j-scene-top{top:60px;left:12px;right:12px}
.j-location,.j-media-toggle{border-radius:20px;background:#faf9f6dc}
.j-location{min-height:40px;font-size:9px;padding:8px 12px}
.j-media-toggle button{min-height:34px;border-radius:18px;padding:7px 10px}
.j-view-look{top:112px;right:13px}
.j-controls{left:0;right:0;width:100%;height:192px;padding:0 0 env(safe-area-inset-bottom,0px);bottom:env(safe-area-inset-bottom,0px)}
.j-intro{top:0;left:12px;height:44px}.j-intro .j-title{font-size:32px}
.j-selection{left:95px;right:81px;top:0;height:44px;min-height:44px}
.j-selection-value strong{font-size:11px}.j-selection-value span{font-size:6.5px;max-width:156px}.j-selection-value{padding-inline:10px;min-height:40px}
.j-photo-note{bottom:202px;left:12px;right:auto;font-size:7px;max-width:210px;writing-mode:horizontal-tb}
.j-hero .j-avatar-ref-link{bottom:229px;left:12px;min-height:36px}
.j-scene[data-personal-reference=true] .j-photo-note{bottom:202px}
.j-viewing-look .j-photo-note{bottom:14px}.j-viewing-look .j-avatar-ref-link{bottom:42px}
.j-viewing-look .j-portrait,.j-viewing-look .j-scene video{padding:48px 0 0}
}
@media(max-width:350px){.j-intro .j-title{font-size:28px}.j-selection{left:82px;right:73px}.j-look-action{right:9px;padding-inline:10px}.j-selection-value{min-width:90px;padding-inline:7px}.j-selection-value span{max-width:140px;font-size:6px}}
@media(min-width:701px) and (max-height:550px){.j-controls{width:450px;height:192px;right:12px}.j-scene-top{top:60px}.j-view-look{top:113px;right:24px}.j-portrait,.j-scene video{object-position:20% center}.j-photo-note{left:16px}}
@media(prefers-reduced-motion:reduce){.j-controls{transition:none}}
/* ===== style block 05 ===== */
/* Session her-atelier-design-20260908. Full bleed media and independent framing. */
.j-scene:before{display:none}
.j-framing{position:absolute;inset:0;overflow:hidden;transform:scale(1);transform-origin:50% 22%;transition:transform .75s cubic-bezier(.2,.65,.25,1)}
.j-scene .j-portrait,.j-scene .j-live-video,.j-viewing-look .j-scene .j-portrait,.j-viewing-look .j-scene .j-live-video{padding:0;object-fit:cover;max-width:none;object-position:50% 35%;height:100%;width:100%}
.j-scene .j-live-video{object-position:50% 0%}
.j-photo-pause{position:absolute;right:26px;top:181px;min-height:44px;min-width:44px;border:1px solid #fff8;border-radius:50%;z-index:5;background:#faf9f6b8;backdrop-filter:blur(12px)}
.j-inline-media{position:absolute;z-index:4;left:24px;bottom:24px;display:flex;align-items:center;gap:7px;max-width:calc(100% - 48px);min-height:44px;padding:0 10px 0 2px;border:1px solid #fff6;border-radius:25px;background:#faf9f6df;backdrop-filter:blur(16px);box-shadow:0 4px 20px #30241910;font-size:10px}
.j-inline-media [hidden],.j-photo-pause[hidden],.j-inline-media[hidden]{display:none!important}
.j-inline-media .j-icon{min-width:40px;min-height:44px;padding:10px}.j-inline-media-status{max-width:245px;line-height:1.4}.j-inline-video-upload{position:relative;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 7px;border-left:1px solid #3f332c20;font-size:10px;flex:none}.j-inline-video-upload input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.j-inline-video-upload:focus-within{outline:2px solid #9870ab;outline-offset:3px}.j-inline-video-upload iconify-icon{width:15px;height:15px;font-size:15px}.j-follow-mood{font-size:10px;padding:0 9px;min-height:44px;border-left:1px solid #3f332c20}.j-follow-mood[aria-pressed=true]{color:#9a4771}
.j-mode-bar{position:absolute;left:50%;top:-49px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:1px;padding:3px;background:#faf9f6de;border:1px solid #fff8;backdrop-filter:blur(18px);border-radius:27px;box-shadow:0 5px 24px #33271612;touch-action:pan-y;user-select:none;white-space:nowrap}
.j-mode-bar button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:78px;border-radius:23px;font-size:11px;padding:8px 15px;color:#716860;transition:background .2s,color .2s}
.j-mode-bar button[aria-selected=true]{background:#292522;color:#fff}.j-mode-bar iconify-icon{width:15px;height:15px;font-size:15px}
.j-controls.j-mode-changing .j-disc{animation:j-mode-arrive .48s cubic-bezier(.2,.8,.2,1)}
@keyframes j-mode-arrive{from{opacity:.25;transform:translateX(var(--j-mode-from,35px))}to{opacity:1;transform:translateX(0)}}
.j-scene[data-work-mode=makeup] .j-framing,.j-scene[data-work-mode=hair] .j-framing{transform:translateY(18svh) scale(2.3)}
.j-scene[data-beauty-reference=true] .j-framing{transform:scale(1.035);transform-origin:50% 45%}
.j-beauty-photo{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#d7d1c6}
.j-beauty-photo-tile{flex:none;width:max(100vw,100svh);height:max(100vw,100svh);background-image:var(--j-beauty-atlas);background-size:300% 200%;background-repeat:no-repeat;transform:scale(.99)}
.j-beauty-caption{position:absolute;top:115px;left:24px;z-index:4;max-width:210px;padding:12px 15px;background:#faf9f6d9;backdrop-filter:blur(16px);border:1px solid #fff5;border-radius:2px;pointer-events:none}
.j-beauty-caption strong{font:400 26px/1.1 var(--j-serif);display:block;margin:4px 0 8px}.j-beauty-caption span{font-size:10px;color:#736759;line-height:1.5;display:block}.j-beauty-caption .j-eyebrow{font-size:8px}.j-beauty-caption[hidden]{display:none}
.j-beauty-options .j-option-grid{margin:16px 0}.j-beauty-options input[type=range]{width:100%;accent-color:#ba7388}.j-beauty-options legend{font:400 23px var(--j-serif);padding:0;margin-bottom:8px}.j-beauty-options fieldset{border:0;padding:0;margin:0 0 20px}
.j-beauty-root{background:#faf9f6}.j-beauty-nav{display:flex;justify-content:center;gap:10px;padding:16px 20px 0}.j-beauty-nav button{font-size:11px;min-height:44px;border-bottom:1px solid #b4a38f;padding:10px 20px}
@media(max-width:700px){
.j-photo-pause{right:13px;top:164px}
.j-inline-media{left:12px;bottom:252px;max-width:calc(100% - 24px);font-size:9px}.j-inline-media-status{max-width:170px}.j-inline-video-upload span{display:none}
.j-viewing-look .j-inline-media{bottom:18px}
.j-beauty-caption{top:112px;left:12px;max-width:180px;padding:9px 11px}.j-beauty-caption strong{font-size:22px;margin-bottom:5px}.j-beauty-caption span{font-size:8px}
.j-scene[data-work-mode=makeup] .j-framing,.j-scene[data-work-mode=hair] .j-framing{transform:translateY(18svh) scale(2.1)}
.j-scene[data-beauty-reference=true] .j-framing{transform:scale(1.02)}
.j-mode-bar{top:-48px}.j-mode-bar button{min-width:78px;padding-inline:14px}
}
@media(min-width:701px){.j-beauty-photo-tile{width:max(100vw,100svh);height:max(100vw,100svh)}.j-scene[data-beauty-reference=true] .j-framing{transform:scale(.999)}.j-beauty-caption{top:130px}.j-inline-media{max-width:calc(100% - 600px)}}
@media(prefers-reduced-motion:reduce){.j-framing,.j-mode-bar button{transition:none}.j-controls.j-mode-changing .j-disc{animation:none}}
.j-scene[data-personal-reference=true] .j-framing{transform:scale(1);transform-origin:center}
@media(min-width:701px){
.j-scene[data-motion-mode=video] .j-framing{background:none 35% 45%/cover no-repeat}
.j-scene[data-motion-mode=video] .j-live-video{top:56px;height:calc(100% - 56px);width:calc(55.556svh - 31.111px);left:calc(35% - 27.778svh + 15.556px);right:auto;object-position:center;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.j-scene[data-beauty-reference=true] .j-beauty-photo{justify-content:flex-start;background:none 35% 45%/cover no-repeat}
.j-scene[data-beauty-reference=true] .j-beauty-photo-tile{position:absolute;top:0;left:calc(35% - 50svh);width:100svh;height:100svh;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
.j-scene[data-work-mode=makeup][data-motion-mode=video] .j-framing,.j-scene[data-work-mode=hair][data-motion-mode=video] .j-framing{transform-origin:35% 12%;transform:translateY(13svh) scale(1.6)}
}
.j-beauty-photo:not([hidden]){animation:j-beauty-reveal .65s ease both}
@keyframes j-beauty-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.j-beauty-photo:not([hidden]){animation:none}}
.j-catalog-beauty{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 0;border-block:1px solid var(--j-line);margin:18px 0}.j-catalog-beauty h3{font:400 24px/1.2 var(--j-serif);margin:8px 0}.j-catalog-beauty p{font-size:10px;line-height:1.7;color:#746a5f}.j-catalog-beauty small{display:block;font-size:8px;color:#81766c;margin-top:10px}
/* ===== style block 06 ===== */
.jb-beauty-edit,.jb-lesson{--jb-ink:#292527;--jb-muted:#83777c;--jb-line:#e6dfe0;--jb-paper:#fbf9f8;--jb-accent:#b87d91;--jb-serif:var(--j-serif,'Bodoni Moda',Georgia,serif);--jb-sans:var(--j-sans,Manrope,Arial,sans-serif);font-family:var(--jb-sans);color:var(--jb-ink);font-size:12px;line-height:1.6;box-sizing:border-box}
.jb-beauty-edit *,.jb-lesson *{box-sizing:border-box}
.jb-beauty-edit{max-width:1160px;padding:36px 36px 30px;margin:auto;border-top:1px solid var(--jb-line);background:#fff}
.jb-eyebrow{display:block;font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--jb-muted);line-height:1.5}
.jb-detail-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.jb-detail-head h2{font:400 clamp(28px,3.6vw,43px)/1.14 var(--jb-serif);letter-spacing:-.035em;margin:8px 0 0}
.jb-button,.jb-back-link,.jb-read-step{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;min-width:44px;padding:10px 16px;border:1px solid var(--jb-line);background:#fff;color:var(--jb-ink);font:500 10px/1.5 var(--jb-sans);cursor:pointer;border-radius:2px;text-align:center;transition:background .18s,border-color .18s}
.jb-button:hover{background:#f8f1f2;border-color:#c7aab5}
.jb-primary{background:#33272e;border-color:#33272e;color:#fff}
.jb-primary:hover{background:#59404e;border-color:#59404e}
.jb-button:focus-visible,.jb-back-link:focus-visible,.jb-read-step:focus-visible,.jb-kit summary:focus-visible,.jb-step-tabs button:focus-visible{outline:2px solid var(--jb-accent);outline-offset:4px}
.jb-button:disabled{opacity:.4;cursor:default}
.jb-detail-description{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:30px;margin-top:16px}
.jb-detail-description>p{font-size:11px;line-height:1.85;color:#82757a;max-width:530px;margin:0}
.jb-brief-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:7px 12px;font-size:9px;color:#83777c}
.jb-brief-meta>span:not(.jb-swatches){white-space:nowrap}
.jb-swatches{display:inline-flex;flex:none;align-items:center;padding-left:4px}
.jb-swatches i{display:block;width:20px;height:20px;background:var(--jb-swatch);border:2px solid #fff;border-radius:50%;margin-left:-4px}
.jb-kit{margin-top:22px;border-top:1px solid var(--jb-line)}
.jb-kit summary{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none;min-height:52px;cursor:pointer;font-size:10px}
.jb-kit summary::-webkit-details-marker{display:none}
.jb-kit-summary{display:flex;align-items:center;gap:18px;color:var(--jb-muted);font-size:9px}
.jb-kit-summary b{font:300 22px/1 var(--jb-sans);color:var(--jb-accent);transition:transform .2s}
.jb-kit[open] .jb-kit-summary b{transform:rotate(45deg)}
.jb-kit-content{padding:8px 0 2px}
.jb-fixture-note{font-size:9px!important;color:var(--jb-muted);line-height:1.7;margin:0 0 17px}
.jb-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 22px}
.jb-product{display:flex;gap:12px;align-items:center;padding:10px 0 16px;border-bottom:1px solid #eee7e9;min-width:0}
.jb-product-mark{width:36px;height:44px;background:linear-gradient(140deg,#ffffff66,transparent),var(--jb-swatch);display:grid;place-items:center;color:#fff;border-radius:13px 13px 5px 5px;font:italic 16px/1 var(--jb-serif);flex:none}
.jb-product>div{flex:1;min-width:0}
.jb-product h3{font-size:10px;line-height:1.5;margin:0 0 4px;font-weight:500}
.jb-product p{font-size:8px;line-height:1.6;color:var(--jb-muted);margin:0}
.jb-product>strong{font-size:10px;font-weight:500;white-space:nowrap;align-self:flex-start;margin-top:2px}
.jb-technique{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:23px 0 18px}
.jb-technique>div:first-child{max-width:680px}
.jb-technique p{font-size:10px;line-height:1.8;color:#84777c;margin:7px 0 0}
.jb-total{flex:none;text-align:right}
.jb-total span{display:block;font-size:8px;color:var(--jb-muted)}
.jb-total strong{display:block;font:400 28px/1.2 var(--jb-serif);margin-top:4px}
.jb-kit-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--jb-line);padding-top:15px}
.jb-kit-footer p{font-size:9px;color:var(--jb-muted);line-height:1.8;margin:0;max-width:470px}
.jb-lesson{max-width:1250px;margin:auto;padding:34px 44px 70px;min-height:calc(100svh - 56px);background:var(--jb-paper)}
.jb-lesson-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 30px;margin-bottom:30px}
.jb-back-link{grid-column:1/-1;justify-self:start;justify-content:flex-start;padding:0;border:0;background:none;font-size:10px;color:var(--jb-muted)}
.jb-lesson-head h1{font:400 clamp(35px,4vw,57px)/1.06 var(--jb-serif);letter-spacing:-.035em;margin:9px 0 0;max-width:720px}
.jb-lesson-style{align-self:end;text-align:right;display:grid;justify-items:end;gap:7px;font-size:10px}
.jb-lesson-style .jb-swatches i{width:24px;height:24px}
.jb-lesson-style small{font-size:9px;color:var(--jb-muted)}
.jb-lesson-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:start;gap:48px}
.jb-mirror{min-width:0}
.jb-camera-stage{position:relative;aspect-ratio:4/5;max-height:580px;background:radial-gradient(ellipse at 70% 25%,#ecd3d580,transparent 65%),linear-gradient(150deg,#efe6df,#e7e1e4 60%,#d9d2dc);border:1px solid #e1d5dc;overflow:hidden;border-radius:110px 110px 3px 3px}
.jb-camera-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.jb-camera-video[hidden],.jb-mirror-empty[hidden],.jb-camera-tag[hidden]{display:none}
.jb-mirror-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px}
.jb-mirror-oval{display:block;position:relative;width:92px;height:126px;border:1px solid #b7a0aa;border-radius:48% 48% 46% 46%;margin-bottom:26px;opacity:.65}
.jb-mirror-oval:before{content:'';position:absolute;left:19%;right:19%;height:38px;bottom:-36px;border-left:1px solid #b7a0aa;border-right:1px solid #b7a0aa;border-radius:0 0 50% 50%}
.jb-mirror-oval:after{content:'';position:absolute;width:166px;height:73px;left:50%;top:146px;transform:translateX(-50%);border:1px solid #b7a0aa;border-bottom:0;border-radius:50% 50% 0 0}
.jb-mirror-oval i{position:absolute;left:29%;right:29%;top:69%;height:9px;border-bottom:1px solid #b7a0aa;border-radius:0 0 50% 50%}
.jb-mirror-empty .jb-eyebrow{margin-top:74px}
.jb-mirror-empty h2{font:italic 400 36px/1.1 var(--jb-serif);letter-spacing:-.035em;margin:11px 0}
.jb-mirror-empty p{font-size:10px;line-height:1.8;color:#8b7782;margin:0}
.jb-camera-tag{position:absolute;left:14px;bottom:13px;border-radius:2px;background:#fffdf8e8;padding:6px 9px;font-size:8px;color:#6f6068}
.jb-camera-controls{display:flex;align-items:center;gap:15px;margin:15px 0 7px}
.jb-camera-controls .jb-button{flex:none}
.jb-camera-status{font-size:9px;line-height:1.7;color:#8c7c85;margin:0}
.jb-camera-note{font-size:8px;line-height:1.7;color:#95858e;margin:0}
.jb-guidance{min-width:0}
.jb-step-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--jb-line);margin-bottom:29px}
.jb-step-tabs button{min-width:44px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;background:none;border:0;padding:8px 1px;color:#a6989f;cursor:pointer;font-family:var(--jb-sans)}
.jb-step-tabs button>span{font-size:11px}
.jb-step-tabs button>small{font-size:8px}
.jb-step-tabs button[aria-current=step]{color:#795166}
.jb-step-tabs button[aria-current=step]:after{content:'';position:absolute;height:2px;bottom:-1px;left:10%;right:10%;background:var(--jb-accent)}
.jb-step-kicker{display:flex;justify-content:space-between;align-items:center;gap:14px}
.jb-read-step{background:none;border:0;padding:0 0 0 7px;font-size:9px;white-space:nowrap;text-decoration:underline;text-underline-offset:4px;color:#8b6c7d}
.jb-step-copy:focus{outline:none}
.jb-step-copy h2{font:400 clamp(29px,3.5vw,44px)/1.1 var(--jb-serif);letter-spacing:-.035em;margin:17px 0 22px;max-width:450px}
.jb-apply{font-size:12px;line-height:1.95;color:#756971;margin:0}
.jb-mirror-check{border-left:2px solid var(--jb-accent);padding:3px 0 3px 17px;margin:26px 0 20px}
.jb-mirror-check p{font-size:11px;line-height:1.85;color:#756971;margin:9px 0 0}
.jb-step-tip{font-size:9px;line-height:1.8;color:#9c8a96;margin:0}
.jb-step-actions{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,.8fr) minmax(0,1.4fr);gap:8px;margin-top:31px}
.jb-step-actions .jb-button{padding-inline:9px;min-width:0;font-size:10px}
.jb-lesson-status{font-size:9px;line-height:1.75;color:#927684;margin:14px 0 0;min-height:31px}
@media(max-width:900px){.jb-beauty-edit{padding:30px 26px}.jb-products{grid-template-columns:repeat(2,minmax(0,1fr))}.jb-lesson{padding:24px 28px 55px}.jb-lesson-layout{gap:28px}.jb-camera-controls{align-items:flex-start;flex-direction:column;gap:8px}.jb-mirror-empty{padding:20px}.jb-mirror-oval{width:70px;height:97px;margin-bottom:14px}.jb-mirror-oval:after{width:135px;top:122px;height:58px}.jb-mirror-empty .jb-eyebrow{margin-top:62px}.jb-mirror-empty h2{font-size:30px}.jb-step-copy h2{font-size:32px}.jb-lesson-style{max-width:190px}}
@media(max-width:700px){.jb-beauty-edit{padding:27px 20px 20px}.jb-detail-head{align-items:flex-start;gap:16px}.jb-detail-head h2{font-size:30px}.jb-detail-head>.jb-button{max-width:132px;min-height:46px;padding:9px 12px;font-size:9px;gap:6px}.jb-detail-description{grid-template-columns:1fr;gap:13px}.jb-brief-meta{justify-content:flex-start}.jb-kit{margin-top:18px}.jb-kit summary{font-size:9px;gap:12px}.jb-kit-summary{font-size:8px;gap:11px}.jb-products{gap:10px 16px}.jb-product{gap:9px}.jb-product-mark{width:28px;height:37px;font-size:14px}.jb-product h3{font-size:9px}.jb-product p{font-size:8px}.jb-product>strong{font-size:9px}.jb-technique{gap:18px;align-items:flex-start}.jb-total span{max-width:90px;font-size:8px}.jb-total strong{font-size:25px}.jb-kit-footer{align-items:flex-start}.jb-kit-footer>.jb-button{flex:none;padding-inline:12px;font-size:9px}.jb-lesson{padding:17px 20px 40px}.jb-lesson-head{gap:15px 12px;margin-bottom:24px}.jb-lesson-head>div:nth-child(2){grid-column:1/-1}.jb-lesson-head h1{font-size:39px}.jb-lesson-style{max-width:none;grid-column:1/-1;justify-items:start;grid-template-columns:auto 1fr;text-align:left;column-gap:10px}.jb-lesson-style small{grid-column:2;align-self:start}.jb-lesson-style .jb-swatches{grid-row:1/3}.jb-lesson-layout{grid-template-columns:1fr;gap:27px}.jb-camera-stage{aspect-ratio:4/3;max-height:310px;border-radius:80px 80px 3px 3px}.jb-camera-video{object-position:center 35%}.jb-mirror-empty{padding:18px}.jb-mirror-oval{width:48px;height:64px;margin-bottom:4px}.jb-mirror-oval:before{height:21px;bottom:-20px}.jb-mirror-oval:after{width:84px;top:82px;height:33px}.jb-mirror-empty .jb-eyebrow{margin-top:43px;font-size:8px}.jb-mirror-empty h2{font-size:30px;margin:7px 0}.jb-mirror-empty p{font-size:9px}.jb-camera-controls{flex-direction:row;align-items:center;gap:13px;margin-top:12px}.jb-camera-controls .jb-button{font-size:9px;padding:9px 12px}.jb-camera-status{font-size:8px}.jb-step-tabs{margin-bottom:15px}.jb-step-tabs button{min-height:54px}.jb-step-copy h2{font-size:34px;margin:12px 0 18px}.jb-apply{font-size:12px;line-height:1.9}.jb-mirror-check{margin:22px 0 17px}.jb-step-actions{margin-top:24px}.jb-lesson-status{margin-top:12px}}
@media(max-width:350px){.jb-detail-head{display:block}.jb-detail-head>.jb-button{margin-top:14px;max-width:none;min-height:44px}.jb-detail-head h2{font-size:30px}.jb-products{grid-template-columns:1fr}.jb-product{gap:12px}.jb-product h3{font-size:10px}.jb-product p{font-size:9px}.jb-product-mark{width:31px;height:39px}.jb-product>strong{font-size:10px}.jb-kit summary{align-items:center}.jb-kit-summary{max-width:92px;line-height:1.5;text-align:right}.jb-kit-footer{display:block}.jb-kit-footer>.jb-button{margin-top:12px}.jb-lesson-head h1{font-size:34px}.jb-step-tabs button{min-width:44px}.jb-step-tabs button>small{font-size:7px}.jb-camera-stage{aspect-ratio:1.18}.jb-step-actions{gap:5px}.jb-step-actions .jb-button{font-size:9px;padding-inline:6px;gap:6px}.jb-step-copy h2{font-size:31px}.jb-step-kicker{gap:6px}.jb-step-kicker>.jb-eyebrow{font-size:8px}.jb-read-step{font-size:8px}}
@media(max-width:700px){.jb-camera-active{padding-bottom:105px}.jb-camera-active .jb-lesson-head>div:nth-child(2){display:none}.jb-camera-active .jb-lesson-head{gap:5px;margin-bottom:18px}.jb-camera-active .jb-mirror{position:sticky;top:0;z-index:3;background:var(--jb-paper);padding:8px 0 10px;box-shadow:0 10px 16px var(--jb-paper)}.jb-camera-active .jb-camera-stage{height:clamp(124px,22svh,200px);aspect-ratio:auto;border-radius:3px}.jb-camera-active .jb-camera-video{object-fit:contain;background:#e5dce0}.jb-camera-active .jb-camera-controls{margin-top:8px;gap:12px}.jb-camera-active .jb-camera-note{font-size:7px;line-height:1.5}.jb-camera-active .jb-step-copy{scroll-margin-top:calc(clamp(124px,22svh,200px) + 98px)}.jb-camera-active .jb-step-tabs{scroll-margin-top:calc(clamp(124px,22svh,200px) + 98px)}.jb-camera-active .jb-step-actions{position:fixed;left:20px;right:20px;bottom:max(12px,env(safe-area-inset-bottom));z-index:5;padding:10px 8px;background:#fbf9f8f5;border:1px solid #e0d2da;box-shadow:0 4px 22px #47323f1c;backdrop-filter:blur(12px);margin:0}.jb-camera-active .jb-step-actions .jb-button{min-height:44px}.jb-camera-active .jb-guidance{padding-bottom:50px}}
@media(prefers-reduced-motion:reduce){.jb-button,.jb-kit-summary b{transition:none}}
/* Session her-atelier-design-20260908. A working lesson begins with its next step. */
@media(max-width:700px){.jb-lesson{padding-bottom:110px}.jb-lesson-head h1{font-size:33px}.jb-lesson-head{gap:9px 12px;margin-bottom:16px}.jb-camera-stage{max-height:220px;aspect-ratio:1.6}.jb-mirror-empty .jb-eyebrow{display:none}.jb-mirror-oval{margin-bottom:25px}.jb-mirror-empty h2{font-size:26px}.jb-lesson-layout{gap:16px}.jb-step-actions{position:fixed;left:20px;right:20px;bottom:max(12px,env(safe-area-inset-bottom));z-index:5;padding:10px 8px;background:#fbf9f8f5;border:1px solid #e0d2da;box-shadow:0 4px 22px #47323f1c;backdrop-filter:blur(12px);margin:0}.jb-step-actions .jb-button{min-height:44px}}
/* Session her-atelier-design-20260908. A step-specific, price-free ingredient index. */
.jb-ingredients{margin:0 0 24px;min-width:0}
.jb-ingredients-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.jb-ingredients-heading>strong{font:600 12px/1.5 var(--jb-sans);margin:0;color:#51474d}
.jb-ingredient-drawer>summary{list-style:none;min-height:44px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;padding:4px 0}
.jb-ingredient-drawer>summary::-webkit-details-marker{display:none}
.jb-ingredient-drawer>summary .jb-ingredients-heading{margin:0}
.jb-ingredient-drawer>summary i{display:inline-block;font-style:normal;margin-left:5px;transition:transform 160ms ease}
.jb-ingredient-drawer[open]>summary i{transform:rotate(180deg)}
.jb-ingredient-glance{font:400 12px/1.6 var(--jb-sans);color:#75606d;margin-top:7px;display:grid;gap:3px}
.jb-ingredient-glance b{font-weight:600}
.jb-ingredient-drawer[open] .jb-ingredient-glance{display:none}
.jb-ingredient-drawer:not([open]){border-block:1px solid #dfd6dc;padding:5px 0}
.jb-ingredient-drawer>summary:focus-visible{outline:2px solid #886178;outline-offset:3px;border-radius:2px}
.jb-ingredients-heading>span{font:400 12px/1.5 var(--jb-sans);color:#796c74}
.jb-ingredient-list{border:1px solid #dfd6dc;background:linear-gradient(115deg,#fffdfb,#f6f0f2);border-radius:4px;overflow:hidden}
.jb-ingredient{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:14px 17px 3px;position:relative;transition:background-color 160ms ease}
.jb-ingredient+.jb-ingredient{border-top:1px solid #e5dce1}
.jb-ingredient.is-ready{background:#eeeee880}
.jb-ingredient-mark{width:42px;height:51px;display:flex;align-items:center;justify-content:center;font:italic 400 25px/1 var(--jb-serif);letter-spacing:-.04em;color:#8c6c7c;background:#eadde480;border:1px solid #d8c7d180;border-radius:21px 21px 2px 2px;flex:none}
.jb-ingredient-mark>svg{display:block;width:29px;height:37px}
.jb-ingredient-content{min-width:0}
.jb-ingredient-category{display:block;font:400 12px/1.5 var(--jb-sans);color:#7e6a77}
.jb-ingredient-link{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:4px 0;text-decoration:none;color:#493b44;overflow-wrap:anywhere}
.jb-ingredient-link strong{font:650 12px/1.4 var(--jb-sans);letter-spacing:.035em}
.jb-ingredient-link>span{font:400 13px/1.6 var(--jb-sans)}
.jb-ingredient-link i{font-style:normal;margin-left:3px;color:#947184}
.jb-ingredient-link:hover>span{text-decoration:underline;text-underline-offset:3px}
.jb-ingredient-content>p,.jb-hands-only p{font:400 12px/1.7 var(--jb-sans);margin:3px 0 0;color:#766772}
.jb-ingredient-ready{display:flex;align-items:center;gap:8px;min-height:44px;width:fit-content;font:400 12px/1.5 var(--jb-sans);color:#65535f;cursor:pointer}
.jb-ingredient-ready input{width:17px;height:17px;margin:0;flex:none;accent-color:#8b637d}
.jb-ingredient-note{font:400 12px/1.65 var(--jb-sans);margin:9px 0 0;color:#897580}
.jb-hands-only{display:flex;align-items:center;gap:15px;border-top:1px solid #dfd6dc;border-bottom:1px solid #dfd6dc;padding:16px 0}
.jb-hands-only h3{font:500 15px/1.6 var(--jb-sans);margin:3px 0;color:#57434f}
.jb-instruction-label{display:block;font:600 12px/1.5 var(--jb-sans);margin-bottom:8px;color:#634858}
.jb-lesson .jb-apply{font-size:14px;line-height:1.85;color:#62555f}
.jb-lesson .jb-mirror-check p,.jb-lesson .jb-step-tip{font-size:12px}
.jb-ingredient-link:focus-visible,.jb-ingredient-ready:has(input:focus-visible){outline:2px solid #886178;outline-offset:3px;border-radius:2px}
@media(max-width:700px){.jb-ingredients{margin-bottom:21px}.jb-ingredient{padding:11px 12px 2px;gap:11px;grid-template-columns:35px minmax(0,1fr)}.jb-ingredient-mark{width:35px;height:45px;font-size:23px}.jb-ingredient-link>span{font-size:12px}.jb-ingredient-note{margin-top:8px}.jb-lesson .jb-apply{font-size:13px;line-height:1.8}.jb-step-copy h2{margin-bottom:19px}.jb-camera-active .jb-camera-stage{height:clamp(100px,18svh,160px)}.jb-camera-active .jb-step-copy,.jb-camera-active .jb-step-tabs{scroll-margin-top:calc(clamp(100px,18svh,160px) + 108px)}}
@media(prefers-reduced-motion:reduce){.jb-ingredient{transition:none}}
@media(max-width:700px){.jb-camera-active .jb-mirror{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px 13px;padding:6px 0 10px;box-shadow:0 7px 12px var(--jb-paper)}.jb-camera-active .jb-camera-stage{width:78px;height:104px;grid-row:1/3}.jb-camera-active .jb-camera-controls{display:grid;gap:5px;margin:0;align-content:start}.jb-camera-active .jb-camera-controls .jb-button{justify-self:start;min-height:44px;padding:7px 10px}.jb-camera-active .jb-camera-status{font-size:11px;line-height:1.45}.jb-camera-active .jb-camera-note{grid-column:2;font-size:10px;line-height:1.4}.jb-camera-active .jb-camera-tag{display:none}.jb-camera-active .jb-step-copy,.jb-camera-active .jb-step-tabs{scroll-margin-top:156px}.jb-camera-active .jb-step-copy h2{font-size:26px;margin:8px 0 10px}.jb-camera-active .jb-ingredients{margin-bottom:15px}.jb-camera-active .jb-ingredient-drawer:not([open]) .jb-ingredients-heading{font-size:12px}.jb-camera-active .jb-mirror-check{margin:15px 0}}
@media(prefers-reduced-motion:reduce){.jb-ingredient-drawer>summary i{transition:none}}
.jb-mirror-intro{display:none}
/* The first ingredient is the starting point; an inactive camera needs no stage. */
@media(max-width:700px){.jb-lesson-head h1{font-size:30px;margin:0}.jb-lesson-head>div:nth-child(2)>.jb-eyebrow{display:none}.jb-lesson-head{gap:7px 12px;margin-bottom:14px}.jb-lesson:not(.jb-camera-active) .jb-mirror{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 12px;border:1px solid #e0d5dd;background:#f4edf080;border-radius:4px}.jb-lesson:not(.jb-camera-active) .jb-mirror-intro{display:block;grid-column:1;grid-row:1}.jb-mirror-intro h2{font:400 22px/1.2 var(--jb-serif);letter-spacing:-.025em;margin:0;color:#74566a}.jb-lesson:not(.jb-camera-active) .jb-camera-stage{display:none}.jb-lesson:not(.jb-camera-active) .jb-camera-controls{display:contents}.jb-lesson:not(.jb-camera-active) .jb-camera-controls>.jb-button{grid-column:2;grid-row:1;min-height:44px;font-size:11px;padding:7px 10px}.jb-lesson:not(.jb-camera-active) .jb-camera-status{grid-column:1/-1;font-size:11px;line-height:1.5}.jb-lesson:not(.jb-camera-active) .jb-camera-note{grid-column:1/-1;font-size:10px;line-height:1.4}.jb-camera-idle .jb-camera-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.jb-lesson:not(.jb-camera-active) .jb-step-copy h2{font-size:30px;margin:9px 0 14px}}
@media(max-width:700px){.jb-lesson:not(.jb-camera-active){padding-top:8px}.jb-lesson:not(.jb-camera-active) .jb-lesson-layout{gap:8px}.jb-lesson:not(.jb-camera-active) .jb-step-tabs{margin-bottom:7px}.jb-lesson:not(.jb-camera-active) .jb-step-copy h2{margin:6px 0 8px}}
@media(max-width:350px){.jb-lesson-head h1{font-size:24px}.jb-mirror-intro h2{font-size:19px;white-space:nowrap}.jb-lesson:not(.jb-camera-active) .jb-mirror{gap:6px 8px;padding:9px}.jb-lesson:not(.jb-camera-active) .jb-camera-controls>.jb-button{font-size:10px;padding-inline:8px}}
/* ===== style block 07 ===== */
.jw-wardrobe,.jw-dialog{--jw-paper:#faf9f6;--jw-ink:#292629;--jw-muted:#8b8186;--jw-line:#e2dcdf;--jw-accent:#b07898;--jw-serif:var(--j-serif,'Bodoni Moda',Georgia,serif);--jw-sans:var(--j-sans,Manrope,Arial,sans-serif);font-family:var(--jw-sans);color:var(--jw-ink);font-size:12px;line-height:1.6;box-sizing:border-box}
.jw-wardrobe *,.jw-dialog *{box-sizing:border-box}
.jw-wardrobe{max-width:1240px;margin:auto;padding:30px 42px 65px;min-height:calc(100svh - 56px)}
.jw-eyebrow{display:block;color:var(--jw-muted);font-size:9px;font-weight:600;letter-spacing:.14em;line-height:1.5;text-transform:uppercase}
.jw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.jw-header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:30px}
.jw-back,.jw-text-button,.jw-reset{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;padding:0;font:500 10px/1.5 var(--jw-sans);color:var(--jw-muted);cursor:pointer}
.jw-back{margin-bottom:21px}
.jw-header h1{font:400 clamp(43px,5vw,69px)/.98 var(--jw-serif);letter-spacing:-.04em;margin:13px 0 14px}
.jw-header-copy{font-size:11px;color:var(--jw-muted);margin:0;line-height:1.8}
.jw-header-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;padding-bottom:6px}
.jw-button,.jw-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:11px 16px;border:1px solid var(--jw-line);background:#fff;color:var(--jw-ink);font:500 10px/1.5 var(--jw-sans);border-radius:2px;cursor:pointer;transition:background .18s,border-color .18s}
.jw-primary{background:#30272e;color:white;border-color:#30272e}
.jw-button:hover{background:#f0e8ed;border-color:#c6afbb}.jw-primary:hover{background:#584150;border-color:#584150}
.jw-button:disabled,.jw-card-actions button:disabled{opacity:.45;cursor:default}
.jw-wardrobe button:focus-visible,.jw-wardrobe input:focus-visible,.jw-wardrobe select:focus-visible,.jw-dialog button:focus-visible,.jw-dialog input:focus-visible,.jw-dialog textarea:focus-visible,.jw-dialog select:focus-visible{outline:2px solid var(--jw-accent);outline-offset:3px}
.jw-tabs{display:flex;align-items:center;border-bottom:1px solid var(--jw-line);gap:32px}
.jw-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;position:relative;min-height:53px;border:0;background:none;font:500 12px/1.5 var(--jw-sans);padding:10px 1px;color:#9b8e95;cursor:pointer}
.jw-tabs button[aria-pressed=true]{color:var(--jw-ink)}
.jw-tabs button[aria-pressed=true]:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#dc9686,#b180a4,#829eb0)}
.jw-tabs button span{font-size:9px;color:#a2939c;min-width:19px;text-align:center;background:#ece5e9;border-radius:10px;padding:1px 5px}
.jw-search-row{display:flex;gap:12px;align-items:center;margin-top:23px}
.jw-search{display:flex;flex:1;align-items:center;gap:10px;min-width:0;border:1px solid var(--jw-line);padding:0 12px;min-height:46px;background:#fff;border-radius:2px}
.jw-search iconify-icon{color:#9a8c95;width:16px;height:16px;font-size:16px}
.jw-search input{width:100%;min-width:0;height:44px;border:0;background:transparent;outline-offset:0;padding:8px 0;font:400 11px/1.5 var(--jw-sans);color:var(--jw-ink)}
.jw-search input::placeholder{color:#a1969b}
.jw-sort select{border:1px solid var(--jw-line);border-radius:2px;background:#fff;padding:10px 30px 10px 12px;min-height:46px;max-width:190px;font:400 10px/1.5 var(--jw-sans);color:#84747f}
.jw-favorite-filter{display:grid;place-items:center;min-width:46px;min-height:46px;border:1px solid var(--jw-line);border-radius:2px;background:white;color:#998994;cursor:pointer}
.jw-favorite-filter[aria-pressed=true]{background:#efe1eb;color:#92617f;border-color:#c8a5ba}
.jw-category-strip{display:flex;align-items:center;gap:7px;overflow-x:auto;scrollbar-width:none;margin:18px 0 0;padding:2px 0}
.jw-category-strip::-webkit-scrollbar{display:none}
.jw-category-strip button{white-space:nowrap;flex:none;min-height:44px;border:0;border-radius:2px;padding:9px 15px;background:none;color:#9c8f96;font:400 10px/1.5 var(--jw-sans);cursor:pointer}
.jw-category-strip button[aria-pressed=true]{color:#79576c;background:#eee4eb}
.jw-results-head{display:flex;justify-content:space-between;align-items:center;min-height:45px;margin:7px 0 5px}
.jw-results-count{font-size:9px;color:var(--jw-muted);margin:0}
.jw-reset{font-size:9px;text-decoration:underline;text-underline-offset:4px}
.jw-reset[hidden]{display:none}
.jw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px}
.jw-card{min-width:0;position:relative;background:#fff;border:1px solid #e5e0e2}
.jw-card-open{display:block;width:100%;padding:0;text-align:left;border:0;background:none;color:inherit;cursor:pointer}
.jw-art{display:block;position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;background:#eeece6;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.jw-art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.jw-card-copy{display:block;padding:17px 16px 13px}
.jw-card-label{display:block;font:500 8px/1.5 var(--jw-sans);letter-spacing:.05em;color:#a1949b;margin-bottom:7px}
.jw-card-copy>strong{display:block;font:400 21px/1.18 var(--jw-serif);letter-spacing:-.02em;min-height:49px}
.jw-card-meta{display:flex;justify-content:space-between;gap:9px;font:400 9px/1.5 var(--jw-sans);color:#91828c;margin-top:10px}
.jw-card-heart{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffffa6;border-radius:50%;background:#fffdf8e3;color:#9d8b95;cursor:pointer;backdrop-filter:blur(8px)}
.jw-card-heart[aria-pressed=true],.jw-drawer-price .jw-icon-button[aria-pressed=true]{color:#a56a8d;background:#f2e2ec;border-color:#dec4d3}
.jw-card-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ece6e9}
.jw-card-actions button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:0;background:#fff;font:500 9px/1.5 var(--jw-sans);color:#8b7483;cursor:pointer}
.jw-card-actions button+button{border-left:1px solid #ece6e9}
.jw-card-actions button iconify-icon{font-size:14px;width:14px;height:14px}
.jw-friend-permission{font-size:8px;line-height:1.7;color:#ad96a3;padding:0 16px 12px;margin:0}
.jw-friends-context{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:22px 0 0}
.jw-friends-context p{font-size:10px;line-height:1.8;color:#91818b;margin:5px 0 0;max-width:550px}
.jw-friends-context .jw-text-button{flex:none}
.jw-source-note{font-size:9px;line-height:1.8;color:#a3989f;margin:25px 0 0}
.jw-announcement{font-size:10px;line-height:1.7;min-height:17px;color:#8c6e80;margin:12px 0 0}
.jw-empty{padding:48px 22px 57px;text-align:center;border:1px solid #e7dfe4;background:radial-gradient(ellipse at 20% 0,#f6e8ef88,transparent 65%),#fff}
.jw-empty-orbit{width:67px;height:67px;display:grid;place-items:center;margin:0 auto 23px;border-radius:50%;border:1px solid #d9c3d2;box-shadow:0 0 0 7px #f5edf3,0 0 0 8px #ece2e9;color:#b28ba5}
.jw-empty-orbit iconify-icon{font-size:25px;width:25px;height:25px}
.jw-empty h2{font:400 37px/1.1 var(--jw-serif);letter-spacing:-.035em;margin:10px 0 14px}
.jw-empty p{font-size:11px;line-height:1.85;color:#93838e;max-width:370px;margin:0 auto 22px}
.jw-dialog{position:fixed;inset:0;margin:auto;border:0;padding:0;width:min(900px,calc(100vw - 48px));max-width:none;max-height:92svh;background:var(--jw-paper);box-shadow:0 15px 90px #2b172b40;border-radius:3px;overscroll-behavior:contain}
.jw-dialog::backdrop{background:#20162069;backdrop-filter:blur(7px)}
.jw-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 20px}
.jw-icon-button{padding:10px;flex:none;background:transparent}
.jw-dialog-head .jw-icon-button{border:0}
.jw-dialog-head h2{font:400 37px/1.1 var(--jw-serif);letter-spacing:-.035em;margin:8px 0 0}
.jw-drawer-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:28px;padding:0 26px 27px}
.jw-drawer-art{min-width:0;align-self:start;position:sticky;top:12px}
.jw-drawer-art .jw-art{border:1px solid #e5dfe2}
.jw-drawer-copy{min-width:0;padding-top:5px}
.jw-drawer-copy h2{font:400 38px/1.08 var(--jw-serif);letter-spacing:-.035em;margin:10px 0 17px}
.jw-drawer-price{display:flex;align-items:center;gap:12px;margin-bottom:17px}
.jw-drawer-price>strong{font:400 25px/1 var(--jw-serif)}
.jw-drawer-price>span{font-size:8px;color:#a08c98;flex:1}
.jw-status-choice{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--jw-line);margin:0 0 18px}
.jw-status-choice button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;background:white;font:400 10px/1.5 var(--jw-sans);color:#a18d9a;cursor:pointer}
.jw-status-choice button[aria-pressed=true]{background:#e9dce6;color:#765769}
.jw-field{display:flex;flex-direction:column;gap:7px;font-size:9px;color:#897380;margin:0;min-width:0}
.jw-field>span{font-size:8px;color:#b29eab;margin-top:-3px}
.jw-field input,.jw-field select,.jw-field textarea{width:100%;min-height:44px;background:#fff;border:1px solid #ded2db;border-radius:2px;padding:10px 11px;font:400 11px/1.6 var(--jw-sans);color:#54434f}
.jw-field textarea{resize:vertical;min-height:86px}
.jw-edit-fields,.jw-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 13px}
.jw-field-full{grid-column:1/-1}
.jw-note-field{margin-top:22px}
.jw-save-note{font-size:9px;text-decoration:underline;text-underline-offset:4px}
.jw-drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:16px;border-top:1px solid var(--jw-line)}
.jw-drawer-actions .jw-button{padding-inline:10px;font-size:9px}
.jw-shared-notice{border-left:2px solid #bfa1b3;padding:4px 0 4px 14px;margin:20px 0}
.jw-shared-notice>strong{font-size:11px;font-weight:500}
.jw-shared-notice p{font-size:9px;line-height:1.8;color:#9a8292;margin:5px 0 0}
.jw-shared-notice .jw-text-button{font-size:9px}
.jw-add-dialog{width:min(510px,calc(100vw - 40px))}
.jw-add-form{padding:9px 23px 24px}
.jw-add-form .jw-dialog-head{padding:9px 0 20px}
.jw-photo-pick{display:block;position:relative;height:220px;border:1px dashed #c7aebb;background:#f0e7ec;overflow:hidden;cursor:pointer}
.jw-photo-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:2;cursor:pointer}
.jw-photo-pick:focus-within{outline:2px solid var(--jw-accent);outline-offset:3px}
.jw-photo-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;height:100%;color:#a9899e;padding:25px;text-align:center}
.jw-photo-empty iconify-icon{width:28px;height:28px;font-size:28px}
.jw-photo-empty strong{font:400 29px/1.15 var(--jw-serif);color:#8d697f}
.jw-photo-empty small{font-size:9px}
.jw-new-photo{display:block;width:100%;height:100%;object-fit:contain}
.jw-new-photo[hidden],.jw-photo-empty[hidden]{display:none}
.jw-photo-status{font-size:9px;line-height:1.75;color:#a08a97;margin:10px 0 20px}
.jw-add-error{font-size:10px;line-height:1.6;color:#a35872;margin:12px 0;min-height:0}
.jw-add-submit{width:100%;margin-top:3px}
.jw-form-note{font-size:8px;line-height:1.8;color:#a6909e;margin:12px 0 0}
@media(max-width:900px){.jw-wardrobe{padding:22px 26px 45px}.jw-header{align-items:flex-start}.jw-header-actions{flex-direction:column;padding-top:92px}.jw-grid{gap:20px 15px}.jw-card-copy{padding:14px 12px 12px}.jw-card-copy>strong{font-size:20px}.jw-drawer-grid{gap:22px;padding-inline:20px}.jw-drawer-copy h2{font-size:32px}}
@media(max-width:700px){.jw-wardrobe{padding:17px 20px 40px}.jw-header{display:block;margin-bottom:20px}.jw-back{margin-bottom:16px;font-size:9px}.jw-header h1{font-size:49px;margin-top:10px}.jw-header-copy{font-size:10px}.jw-header-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;margin-top:22px}.jw-header-actions .jw-button{padding:10px 9px;font-size:9px}.jw-tabs{gap:0;justify-content:space-between}.jw-tabs button{min-height:52px;font-size:11px;padding-inline:6px}.jw-tabs button span{font-size:8px}.jw-search-row{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:10px;margin-top:18px}.jw-search{grid-column:1/-1}.jw-sort select{width:100%;max-width:none}.jw-search input{font-size:10px}.jw-category-strip{margin-top:12px;gap:3px}.jw-category-strip button{padding:8px 13px;font-size:9px}.jw-results-head{margin-top:1px}.jw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.jw-card-copy{padding:12px 10px 10px}.jw-card-copy>strong{font-size:21px;min-height:50px}.jw-card-label{font-size:7px;margin-bottom:6px;letter-spacing:0}.jw-card-meta{font-size:8px;gap:5px;margin-top:8px}.jw-card-heart{width:44px;height:44px;top:4px;right:4px}.jw-card-heart iconify-icon{width:16px;height:16px;font-size:16px}.jw-card-actions button{min-height:44px;font-size:8px;gap:5px}.jw-card-actions button iconify-icon{width:12px;height:12px;font-size:12px}.jw-friend-permission{font-size:7px;padding:0 10px 9px}.jw-friends-context{display:block;padding-top:19px}.jw-friends-context p{font-size:9px}.jw-friends-context .jw-text-button{font-size:9px}.jw-source-note{font-size:8px;line-height:1.8;margin-top:22px}.jw-dialog{width:100%;max-height:94svh;max-width:100vw;margin:auto 0 0;border-radius:16px 16px 0 0}.jw-dialog-head{padding:10px 16px}.jw-drawer-grid{display:block;padding:0 20px 25px}.jw-drawer-art{position:relative;top:auto;float:left;width:110px;margin:0 18px 18px 0}.jw-drawer-copy{padding-top:5px}.jw-drawer-copy h2{font-size:32px;margin:9px 0 12px;min-height:62px}.jw-drawer-price{margin-bottom:18px;gap:8px;flex-wrap:wrap;min-height:49px}.jw-drawer-price>strong{font-size:25px}.jw-drawer-price>span{font-size:8px}.jw-drawer-price .jw-icon-button{min-width:40px;padding:8px}.jw-status-choice{clear:both;margin-top:20px}.jw-shared-notice{clear:both;padding-top:7px}.jw-edit-fields{clear:both}.jw-note-field{margin-top:20px}.jw-drawer-actions{gap:8px;position:sticky;bottom:0;background:var(--jw-paper);padding:14px 0 0}.jw-add-form{padding:7px 20px 24px}.jw-add-form .jw-dialog-head h2{font-size:36px}.jw-photo-pick{height:180px}.jw-empty{padding:40px 20px}.jw-empty h2{font-size:33px}.jw-empty p{font-size:10px}.jw-empty .jw-eyebrow{font-size:8px}}
@media(max-width:350px){.jw-header h1{font-size:44px}.jw-card-copy>strong{font-size:19px;min-height:46px}.jw-grid{gap:17px 10px}.jw-card-copy{padding:11px 9px 10px}.jw-card-meta{font-size:7px}.jw-card-actions button{font-size:7px;gap:4px}.jw-card-actions button iconify-icon{display:none}.jw-card-heart{top:2px;right:2px}.jw-tabs button{font-size:10px;gap:6px}.jw-drawer-art{width:92px;margin-right:14px}.jw-drawer-copy h2{font-size:28px;min-height:53px}.jw-drawer-price>strong{font-size:22px}.jw-drawer-price>span{max-width:70px}.jw-drawer-actions .jw-button{font-size:8px;gap:6px}.jw-drawer-actions iconify-icon{width:15px;height:15px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.jw-button{transition:none}}
.jw-drawer-price .jw-icon-button{min-width:44px;min-height:44px}
@media(max-width:700px){.jw-wardrobe{padding-top:8px}.jw-header{margin-bottom:14px}.jw-back{margin-bottom:4px}.jw-header>.jw-eyebrow,.jw-header>div>.jw-eyebrow{font-size:8px}.jw-header h1{font-size:42px;line-height:1;margin:8px 0}.jw-header-copy{display:none}.jw-header-actions{margin-top:12px}.jw-header-actions .jw-button{min-height:44px}.jw-tabs button{min-height:44px}.jw-search-row{grid-template-columns:minmax(0,1fr) 114px 44px;gap:6px;margin-top:12px}.jw-search{grid-column:auto;min-height:44px;padding-inline:10px;gap:7px}.jw-search input{height:42px;min-height:42px;font-size:9px}.jw-sort{min-width:0}.jw-sort select{min-width:0;min-height:44px;width:100%;padding:9px 20px 9px 8px;font-size:9px}.jw-favorite-filter{min-width:44px;min-height:44px}.jw-category-strip{margin-top:6px}.jw-results-head{min-height:32px;margin:0}.jw-results-head:has(.jw-reset:not([hidden])){min-height:44px}}
@media(max-width:350px){.jw-header h1{font-size:40px}.jw-search-row{grid-template-columns:minmax(0,1fr) 102px 44px}.jw-search{padding-inline:8px;gap:5px}.jw-search input{font-size:9px}.jw-sort select{font-size:8px;padding-left:7px}}
/* ===== style block 08 ===== */
/* Session her-atelier-design-20260908. Your circle: Vogue-informed Joyful social preview. */
.jsl-page{--jsl-ink:#292628;--jsl-muted:#7f7775;--jsl-line:#ded8d4;--jsl-paper:#faf9f6;--jsl-rose:#c58d94;--jsl-serif:var(--j-serif,'Bodoni Moda',Georgia,serif);--jsl-sans:var(--j-sans,Manrope,Arial,sans-serif);max-width:1320px;margin:0 auto;padding:54px 52px 72px;color:var(--jsl-ink);font:12px/1.7 var(--jsl-sans);background:var(--jsl-paper)}
.jsl-page *{box-sizing:border-box}.jsl-page h1,.jsl-page h2,.jsl-page h3,.jsl-page p{margin:0}.jsl-page h1,.jsl-page h2,.jsl-page h3{font-family:var(--jsl-serif);font-weight:400}.jsl-page h1{font-size:clamp(50px,5.5vw,82px);line-height:1.03;letter-spacing:-.045em}.jsl-page h2{font-size:42px;line-height:1.12;letter-spacing:-.035em}.jsl-page h3{font-size:28px;line-height:1.18}.jsl-page em{font-weight:400}.jsl-page iconify-icon{display:inline-block;flex:none;width:17px;height:17px;font-size:17px;vertical-align:middle}
.jsl-eyebrow{display:block;font-size:9px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--jsl-muted)}.jsl-heading{padding-bottom:28px}.jsl-heading>.jsl-eyebrow{margin-bottom:17px}.jsl-heading>p{margin-top:22px;font-size:13px;color:var(--jsl-muted)}.jsl-nav{display:flex;gap:28px;border-block:1px solid var(--jsl-line);margin-bottom:18px}.jsl-nav button{font:500 11px var(--jsl-sans);border:0;background:none;min-height:51px;padding:10px 1px;display:flex;align-items:center;gap:8px;position:relative;cursor:pointer;color:var(--jsl-muted)}.jsl-nav button[aria-current=page]{color:var(--jsl-ink)}.jsl-nav button[aria-current=page]:after{content:'';height:2px;position:absolute;bottom:-1px;left:0;right:0;background:var(--jsl-ink)}.jsl-count{font-size:9px;display:grid;place-items:center;min-width:18px;height:18px;background:#dfcad2;border-radius:50%;color:#573e49}
.jsl-local-note{display:flex;align-items:flex-start;gap:9px;font-size:10px;line-height:1.6;color:var(--jsl-muted);max-width:650px;margin-bottom:28px!important}.jsl-local-note iconify-icon{margin-top:2px;width:14px;height:14px;font-size:14px}.jsl-status{min-height:22px;margin-top:20px!important;font-size:11px;color:#744a61}.jsl-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:44px;padding:12px 18px;border:1px solid var(--jsl-line);background:transparent;color:var(--jsl-ink);font:500 11px/1.5 var(--jsl-sans);cursor:pointer;text-align:center;border-radius:2px;transition:background .18s,border-color .18s}.jsl-button:hover{background:#efebe6;border-color:#b7aaa4}.jsl-primary{background:var(--jsl-ink);border-color:var(--jsl-ink);color:#fff}.jsl-primary:hover{background:#4a3e44;color:#fff}.jsl-button:disabled{opacity:.4;cursor:default}.jsl-button-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.jsl-page button:focus-visible,.jsl-page a:focus-visible,.jsl-page input:focus-visible,.jsl-page textarea:focus-visible,.jsl-page select:focus-visible,.jsl-page summary:focus-visible{outline:2px solid #96789f;outline-offset:3px}
.jsl-friends-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.jsl-friend-card,.jsl-invite-card{border:1px solid var(--jsl-line);padding:27px 25px;display:flex;flex-direction:column;align-items:flex-start;min-height:410px}.jsl-friend-card>.jsl-eyebrow{margin-top:21px;font-size:8px}.jsl-friend-card h2{font-size:42px;margin:8px 0 10px}.jsl-friend-card>p{color:var(--jsl-muted);min-height:45px;max-width:220px}.jsl-friend-card>.jsl-button{margin-top:auto;width:100%}.jsl-friend-card small,.jsl-invite-card>small{font-size:9px;line-height:1.6;color:var(--jsl-muted);margin-top:13px}.jsl-avatar{display:grid;place-items:center;flex:none;width:84px;height:100px;border-radius:44px 44px 2px 2px;background:linear-gradient(145deg,#ece6df,var(--jsl-person));font:italic 400 60px/1 var(--jsl-serif);color:#fff;box-shadow:inset 0 0 0 1px #ffffff40}.jsl-avatar-small{width:33px;height:40px;font-size:25px;border-radius:18px 18px 2px 2px}.jsl-permission{display:flex;align-items:center;gap:7px;padding:17px 0;font-size:10px}.jsl-permission iconify-icon{width:14px;height:14px;font-size:14px}.jsl-invite-card{background:linear-gradient(130deg,#ede0dd,#f0e8f1 70%,#e7eceb);border-color:transparent}.jsl-invite-card h2{font-size:35px;margin:16px 0 15px}.jsl-invite-card>p{font-size:11px;max-width:250px;margin-bottom:22px;color:#746b70}.jsl-invite-card>.jsl-button{margin-top:auto;width:100%}.jsl-overlap{display:flex;align-items:center;gap:17px;margin-top:21px}.jsl-overlap>.jsl-avatar{width:60px;height:68px;font-size:45px}.jsl-overlap>span:last-child{font:35px var(--jsl-serif);color:#b4a0ad}.jsl-editorial-row{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--jsl-line);padding-top:39px;margin-top:42px}.jsl-editorial-row h2{margin:12px 0 15px}.jsl-editorial-row p{max-width:350px;color:var(--jsl-muted)}.jsl-editorial-row>.jsl-button{flex:none}
.jsl-invitation{display:grid;grid-template-columns:1fr 1.15fr;border:1px solid var(--jsl-line)}.jsl-invitation-art{min-height:455px;padding:38px;background:linear-gradient(140deg,#e7d4cc,#ebdfe8 70%,#deded7);display:flex;flex-direction:column;align-items:flex-start}.jsl-invitation-art>.jsl-avatar{height:130px;width:108px;font-size:83px;border-radius:60px 60px 2px 2px;margin-bottom:27px}.jsl-invitation-art h2{margin:10px 0 20px;font-size:47px}.jsl-invitation-art p{font:italic 23px/1.5 var(--jsl-serif);color:#776770}.jsl-invitation-copy{padding:48px 40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.jsl-invitation-copy h2{font-size:53px;margin:15px 0 24px}.jsl-invitation-copy>p{margin-bottom:23px;color:var(--jsl-muted);max-width:390px}.jsl-invitation-copy>small{font-size:9px;line-height:1.6;margin-top:19px;color:var(--jsl-muted)}.jsl-invite-state{display:flex;gap:9px;align-items:center;color:#68495a!important;font-weight:600}.jsl-demo-tools{margin-top:24px;border-block:1px solid var(--jsl-line);padding:8px 0}.jsl-demo-tools summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:10px;color:var(--jsl-muted);list-style:none}.jsl-demo-tools summary:after{content:'+';margin-left:auto}.jsl-demo-tools[open] summary:after{content:'−'}.jsl-demo-tools p{font-size:10px;margin:3px 0 12px;color:var(--jsl-muted)}.jsl-demo-tools .jsl-button-row{padding-bottom:14px}
.jsl-share-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:45px}.jsl-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px;font-size:11px}.jsl-section-heading strong{font-weight:500;color:var(--jsl-muted)}.jsl-segmented{display:flex;border:1px solid var(--jsl-line);margin-bottom:18px}.jsl-segmented>.jsl-button{flex:1;border:0;border-radius:0}.jsl-segmented>.jsl-button[aria-pressed=true]{background:#e8e0e1}.jsl-piece-options{border-top:1px solid var(--jsl-line)}.jsl-piece-options>label{min-height:74px;display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--jsl-line);padding:14px 10px;cursor:pointer}.jsl-piece-options input,.jsl-permission-choice input,.jsl-friend-checks input,.jsl-reshare input{width:18px;height:18px;min-height:18px!important;flex:none;accent-color:#9a6b81}.jsl-piece-options input{accent-color:#9a6b81}.jsl-piece-options strong,.jsl-permission-choice strong{font-size:12px;font-weight:500;display:block}.jsl-piece-options small,.jsl-permission-choice small{font-size:10px;display:block;color:var(--jsl-muted)}.jsl-share-permissions{border:1px solid var(--jsl-line);padding:29px}.jsl-share-permissions h2{margin:12px 0 25px;font-size:36px}.jsl-page fieldset{margin:0;padding:0;border:0;min-width:0}.jsl-page legend{font-size:11px;margin-bottom:13px}.jsl-permission-choice{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--jsl-line);cursor:pointer}.jsl-permission-choice input{margin-top:3px;accent-color:#9a6b81}.jsl-permission-choice small{line-height:1.65;margin-top:5px}.jsl-reshare{min-height:54px;display:flex;align-items:center;gap:10px;margin-top:8px;font-size:11px;cursor:pointer}.jsl-reshare input{accent-color:#9a6b81}.jsl-share-permissions>.jsl-button{margin-top:22px;width:100%}.jsl-small{font-size:10px;line-height:1.7;color:var(--jsl-muted)}.jsl-share-result{margin-top:32px;padding:28px;background:#ede6e9;border:1px solid #ddcfd6}.jsl-share-result h3{margin:8px 0 8px}.jsl-share-result .jsl-field{margin:21px 0 10px}.jsl-share-result .jsl-button-row{margin:16px 0}.jsl-share-result>.jsl-button{font-size:10px;background:none}.jsl-share-history{margin-top:38px}.jsl-share-history h2{font-size:32px;margin-bottom:18px}.jsl-share-history>div{display:flex;align-items:center;gap:10px;border-top:1px solid var(--jsl-line);padding:13px 0}.jsl-share-history>div>span:first-child{margin-right:auto}.jsl-share-history strong{display:block;font-size:12px;font-weight:500}.jsl-share-history small{display:block;font-size:10px;color:var(--jsl-muted)}
.jsl-field{display:flex;flex-direction:column;gap:8px;font-size:11px}.jsl-field input,.jsl-field textarea,.jsl-field select,.jsl-actor-picker select{min-height:44px;width:100%;border:1px solid var(--jsl-line);border-radius:2px;background:#fff;color:var(--jsl-ink);font:12px/1.6 var(--jsl-sans);padding:12px;resize:vertical}.jsl-field textarea{min-height:108px}.jsl-field>input[readonly]{font-size:10px;background:#faf9f6}.jsl-share-selection>.jsl-field{margin-bottom:18px}.jsl-composer{max-width:720px;margin:0 auto;padding:34px;border:1px solid var(--jsl-line)}.jsl-composer h2{margin:14px 0 26px;font-size:45px}.jsl-composer>.jsl-field{margin-bottom:25px}.jsl-friend-checks{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}.jsl-friend-checks label{display:flex;gap:10px;align-items:center;min-height:64px;border:1px solid var(--jsl-line);padding:10px 16px;cursor:pointer}.jsl-friend-checks input{accent-color:#9a6b81}.jsl-friend-checks small{display:block;font-size:8px;color:var(--jsl-muted)}.jsl-composer>.jsl-button{margin-top:24px}.jsl-thread-top{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:28px}.jsl-thread-top h2{font-size:37px;margin-top:10px;max-width:740px;overflow-wrap:anywhere}.jsl-thread-top>.jsl-button{flex:none}.jsl-thread-grid{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);gap:38px;align-items:start}.jsl-look-card{border:1px solid var(--jsl-line)}.jsl-look-card>img{display:block;width:100%;max-height:460px;object-fit:cover;object-position:50% 35%;background:#e1ded6}.jsl-look-card>div{padding:22px}.jsl-look-card h3{font-size:31px;margin:8px 0 12px}.jsl-look-card p{font-size:11px;color:var(--jsl-muted)}.jsl-look-card .jsl-button{width:100%;margin-top:19px;font-size:10px}.jsl-look-card details{margin-top:15px;border-top:1px solid var(--jsl-line);font-size:10px}.jsl-look-card summary{min-height:44px;padding-block:11px;cursor:pointer}.jsl-look-card ul{padding-left:17px;margin:0 0 10px}.jsl-look-card li{padding-bottom:5px}.jsl-look-card small{font-size:9px;color:var(--jsl-muted)}.jsl-actor-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px;background:linear-gradient(120deg,#eee2e4,#e9e4ee);border:1px solid #e0d7e0}.jsl-actor-panel strong{display:block;font:400 23px/1.2 var(--jsl-serif);margin-top:5px}.jsl-actor-picker{font-size:9px;display:block;flex:0 1 190px}.jsl-actor-picker select{font-size:10px;margin-top:5px;padding:9px;max-width:100%}.jsl-votes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:21px 0 11px}.jsl-votes button{border:1px solid var(--jsl-line);background:#fff;min-height:110px;padding:15px 5px;display:flex;flex-direction:column;align-items:center;gap:9px;font:11px var(--jsl-sans);cursor:pointer;border-radius:2px;color:var(--jsl-ink)}.jsl-votes button[aria-pressed=true]{border-color:#a5788c;background:#f0e4e9;color:#674558}.jsl-votes strong{font:400 24px var(--jsl-serif)}.jsl-comments{margin:26px 0}.jsl-comment{border-top:1px solid var(--jsl-line);padding:18px 0}.jsl-comment>div{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}.jsl-comment strong{font-size:12px;font-weight:600}.jsl-comment span{font-size:8px;color:var(--jsl-muted)}.jsl-comment p{font-size:12px;line-height:1.9;overflow-wrap:anywhere}.jsl-comments-empty{font-size:11px;color:var(--jsl-muted);padding:21px 0;border-block:1px solid var(--jsl-line)}.jsl-comment-form>.jsl-button{margin-top:13px}.jsl-thread-list{margin-top:35px;border-top:1px solid var(--jsl-line);padding-top:24px}.jsl-thread-list h2{font-size:31px;margin-bottom:15px}.jsl-thread-list .jsl-button{display:flex;margin-bottom:8px}
.jsl-activity{border-top:1px solid var(--jsl-line)}.jsl-activity>article{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:20px;border-bottom:1px solid var(--jsl-line);padding:22px 0}.jsl-activity-icon{height:44px;display:grid;place-items:center;background:#ead8df;border-radius:50%}.jsl-is-read .jsl-activity-icon{background:#e8e6e1;color:#928b85}.jsl-activity h3{font-size:28px;margin:6px 0 9px}.jsl-activity p{font-size:10px;color:var(--jsl-muted);max-width:480px}.jsl-activity-actions{display:flex;gap:8px}.jsl-activity-actions .jsl-button{font-size:10px}.jsl-empty{padding:35px 22px;text-align:center;border:1px solid var(--jsl-line)}.jsl-empty h2,.jsl-empty h3{font-size:34px}.jsl-empty p{font-size:11px;max-width:440px;margin:14px auto 22px;color:var(--jsl-muted)}.jsl-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:980px){.jsl-page{padding:35px 30px 55px}.jsl-friends-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.jsl-share-layout{gap:24px}.jsl-share-permissions{padding:24px}.jsl-thread-grid{gap:24px;grid-template-columns:minmax(210px,.7fr) minmax(0,1fr)}.jsl-actor-panel{display:block}.jsl-actor-picker{margin-top:13px}.jsl-invitation-copy{padding:32px}.jsl-invitation-art{padding:30px}.jsl-activity>article{grid-template-columns:40px 1fr;gap:16px}.jsl-activity-actions{grid-column:2}}
@media(max-width:700px){.jsl-page{padding:25px 20px 45px}.jsl-heading{padding-bottom:23px}.jsl-heading>.jsl-eyebrow{font-size:8px;margin-bottom:14px}.jsl-page h1{font-size:49px}.jsl-heading>p{font-size:11px;line-height:1.8;margin-top:19px}.jsl-nav{justify-content:space-between;gap:10px;margin-bottom:16px}.jsl-nav button{font-size:10px;min-height:48px}.jsl-count{min-width:16px;height:16px;font-size:8px}.jsl-local-note{font-size:9px;margin-bottom:22px!important}.jsl-button{font-size:10px;padding:11px 13px;gap:8px}.jsl-friends-grid{grid-template-columns:1fr;gap:16px}.jsl-friend-card,.jsl-invite-card{padding:25px;min-height:360px}.jsl-friend-card{display:grid;grid-template-columns:70px 1fr;column-gap:19px;align-content:start;min-height:280px}.jsl-friend-card>.jsl-avatar{grid-row:1/4;width:70px;height:86px;font-size:53px}.jsl-friend-card>.jsl-eyebrow{font-size:7px;margin-top:0;line-height:1.7}.jsl-friend-card h2{font-size:35px;margin:4px 0 7px}.jsl-friend-card>p{font-size:10px;min-height:0}.jsl-friend-card>.jsl-permission{grid-column:1/-1;margin-top:4px;font-size:10px}.jsl-friend-card>.jsl-button,.jsl-friend-card>small{grid-column:1/-1}.jsl-invite-card{min-height:350px}.jsl-editorial-row{display:block;margin-top:30px;padding-top:29px}.jsl-editorial-row h2{font-size:36px}.jsl-editorial-row p{font-size:11px}.jsl-editorial-row>.jsl-button{margin-top:22px}.jsl-invitation{grid-template-columns:1fr}.jsl-invitation-art{min-height:305px;padding:27px;display:grid;grid-template-columns:83px 1fr;column-gap:20px;align-content:center}.jsl-invitation-art>.jsl-avatar{width:83px;height:105px;font-size:65px;grid-row:1/3;margin:0}.jsl-invitation-art>.jsl-eyebrow{font-size:8px;align-self:end}.jsl-invitation-art h2{font-size:37px;margin:8px 0 0}.jsl-invitation-art p{font-size:22px;margin-top:23px;grid-column:1/-1}.jsl-invitation-copy{padding:30px 26px}.jsl-invitation-copy h2{font-size:44px;margin:13px 0 21px}.jsl-invitation-copy>p{font-size:11px}.jsl-invitation-copy .jsl-button-row{align-items:stretch;width:100%}.jsl-invitation-copy .jsl-button-row>.jsl-button{width:100%}.jsl-demo-tools summary{font-size:10px}.jsl-share-layout{grid-template-columns:1fr;gap:26px}.jsl-share-permissions{padding:24px}.jsl-share-permissions h2{font-size:33px}.jsl-piece-options>label{padding-inline:7px;min-height:70px}.jsl-piece-options strong{font-size:11px}.jsl-share-result{padding:21px}.jsl-share-result h3{font-size:29px}.jsl-share-result .jsl-button-row>.jsl-button{width:100%}.jsl-share-history>div{flex-wrap:wrap;gap:7px}.jsl-share-history>div>span:first-child{width:100%;margin-bottom:4px}.jsl-share-history .jsl-button{min-width:80px}.jsl-composer{padding:25px 20px}.jsl-composer h2{font-size:38px}.jsl-friend-checks{display:grid;grid-template-columns:1fr;gap:9px}.jsl-friend-checks label{min-height:64px}.jsl-composer>.jsl-button{width:100%}.jsl-thread-top{display:block;margin-bottom:22px}.jsl-thread-top>.jsl-button{margin-top:17px}.jsl-thread-top h2{font-size:33px;line-height:1.24}.jsl-thread-grid{grid-template-columns:1fr;gap:24px}.jsl-look-card{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:stretch}.jsl-look-card>img{width:100%;height:100%;min-height:240px;max-height:380px;object-fit:cover;object-position:50% 30%}.jsl-look-card>div{padding:17px 14px}.jsl-look-card .jsl-eyebrow{font-size:7px;line-height:1.7}.jsl-look-card h3{font-size:27px;line-height:1.16;margin-top:7px}.jsl-look-card p{font-size:9px;line-height:1.7}.jsl-look-card .jsl-button{font-size:9px;gap:6px;padding-inline:7px}.jsl-look-card .jsl-button iconify-icon{width:13px;height:13px;font-size:13px}.jsl-actor-panel{padding:18px}.jsl-actor-panel strong{font-size:27px}.jsl-votes{gap:7px}.jsl-votes button{font-size:10px;min-height:109px}.jsl-votes button>span{line-height:1.5}.jsl-comment p{font-size:11px}.jsl-comment>div{gap:8px;flex-wrap:wrap}.jsl-comment-form>.jsl-button{width:100%}.jsl-activity>article{gap:13px;align-items:start;padding:20px 0}.jsl-activity h3{font-size:26px}.jsl-activity .jsl-eyebrow{font-size:8px}.jsl-activity p{font-size:10px}.jsl-activity-actions{flex-wrap:wrap}.jsl-empty{padding:30px 18px}.jsl-empty h2,.jsl-empty h3{font-size:31px}}
@media(max-width:350px){.jsl-page{padding-inline:16px}.jsl-page h1{font-size:43px}.jsl-nav{gap:7px}.jsl-nav button{font-size:9px}.jsl-friend-card,.jsl-invite-card{padding:21px}.jsl-friend-card{grid-template-columns:59px 1fr;column-gap:15px}.jsl-friend-card>.jsl-avatar{width:59px;height:75px;font-size:47px}.jsl-share-permissions,.jsl-share-result{padding:19px}.jsl-look-card{grid-template-columns:100px minmax(0,1fr)}.jsl-look-card>div{padding:15px 11px}.jsl-look-card h3{font-size:25px}.jsl-look-card .jsl-button{font-size:8px}.jsl-votes button{font-size:9px}.jsl-invitation-copy{padding:26px 22px}}
@media(prefers-reduced-motion:reduce){.jsl-button{transition:none}}
.jsl-comment>div>.jsl-button{margin-left:auto;font-size:9px;min-height:44px;padding:8px 12px}.jsl-thread-top .jsl-small{margin-top:10px}
.jsl-look-card>img{object-fit:contain;max-height:540px;background:#e4e0d9}@media(max-width:700px){.jsl-look-card>img{object-fit:contain;max-height:380px}}
.jsl-look-facts{display:grid;gap:7px;margin-top:14px;font-size:9px;line-height:1.65;color:var(--jsl-muted);overflow-wrap:anywhere}.jsl-look-facts>span{display:block}.jsl-look-facts iconify-icon{width:12px;height:12px;font-size:12px;margin-right:6px}.jsl-look-item-source{display:block;margin-top:3px}.jsl-look-facts:empty{display:none}
/* ===== style block 09 ===== */
/* Session her-atelier-design-20260908. Compact wardrobe orbit, scoped to its dialog content. */
.jio{--jio-mood:#ee784c;--jio-ink:#262421;--jio-muted:#777068;box-sizing:border-box;color:var(--jio-ink);font:12px/1.5 var(--j-sans,Manrope,sans-serif);max-width:520px;margin:auto;isolation:isolate}
.jio *{box-sizing:border-box}.jio button,.jio input,.jio select{font:inherit}.jio button{cursor:pointer;color:inherit}.jio [hidden]{display:none!important}
.jio-piece{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:13px;align-items:center;padding:0 0 18px;border-bottom:1px solid #dcd7ce}
.jio-thumb{width:56px;height:84px;display:grid;place-items:center;overflow:hidden;background:#eeeae2;color:#8a8071;font-size:9px;text-align:center;text-transform:capitalize}.jio-thumb img{width:100%;height:100%;object-fit:contain}.jio-thumb
.jio-piece-copy{min-width:0}.jio-eyebrow{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--jio-muted)}.jio h3{font:400 22px/1.14 var(--j-serif,Georgia,serif);letter-spacing:-.025em;margin:6px 0}.jio-source{font-size:9px;color:var(--jio-muted)}
.jio-locked{align-self:start;display:flex;gap:4px;align-items:center;font-size:9px;white-space:nowrap;padding:5px 7px;background:#eae5da}.jio-locked>span{font-size:16px;line-height:1}
.jio-axis{display:grid;grid-template-columns:1fr 1fr;margin:10px 0 5px;border-bottom:1px solid #ddd7cd;gap:20px}.jio-axis button{min-height:49px;background:transparent;border:0;border-bottom:2px solid transparent;padding:4px 0 9px;font-size:11px;text-align:left}.jio-axis button span{display:block;color:var(--jio-muted);font-size:9px;margin-top:2px}.jio-axis button[aria-pressed=true]{border-bottom-color:var(--jio-mood)}
.jio-current{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;min-height:59px;gap:8px;text-align:center}.jio-current>button{height:44px;min-width:44px;border:1px solid #d8d1c7;background:transparent;font-size:20px;font-weight:300}.jio-current strong{display:block;font:400 24px/1.2 var(--j-serif,Georgia,serif);letter-spacing:-.02em}.jio-mixture{display:block;color:var(--jio-muted);font-size:8px;line-height:1.5;margin-top:4px}
.jio-ring{width:100%;height:140px;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;margin:0;outline-offset:2px}.jio-ring svg{width:100%;height:100%;display:block;overflow:hidden}.jio-ring text{fill:#302729;font:500 11px var(--j-sans,Manrope,sans-serif);paint-order:stroke;stroke:#fff7;stroke-width:.45px;letter-spacing:.02em}.jio-sectors{fill:none;stroke-width:48;opacity:.84}.jio-marker{fill:#2c2822;stroke:#faf9f6;stroke-width:1}.jio-dragging{cursor:grabbing}
.jio-fine{margin:-8px 0 9px}.jio-fine label>span{display:block;font-size:9px;color:var(--jio-muted)}.jio-range{display:block;width:100%;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;accent-color:var(--jio-mood);cursor:ew-resize}.jio-range::-webkit-slider-runnable-track{height:4px;border-radius:0;background:linear-gradient(90deg,#508ca9,#68a795,#b6ac59,#ee784c,#d45791,#9a62b7,#7067c6,#bd5271,#cb453b,#5a75a8,#8793b3,#c394a5,#508ca9)}.jio-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin-top:-7.5px;background:#fff;border:4px solid var(--jio-mood);border-radius:50%;box-shadow:0 0 0 2px #faf9f6}.jio-range::-moz-range-track{height:4px;background:linear-gradient(90deg,#508ca9,#ee784c,#d45791,#cb453b,#508ca9)}.jio-range::-moz-range-thumb{width:12px;height:12px;border:4px solid var(--jio-mood);background:#fff;border-radius:50%}.jio-fine select{display:block;width:100%;min-height:44px;border:0;border-bottom:1px solid #d8d1c7;background:transparent;border-radius:0;color:var(--jio-ink)}
.jio-context{padding:10px 0 13px;border-top:1px solid #ded8ce}.jio-context-line{margin:0;font-size:10px;font-weight:600;line-height:1.5}.jio-context>span{display:block;margin-top:4px;font-size:8px;color:var(--jio-muted);line-height:1.5}
.jio-build{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:11px 15px;border:1px solid #25221f;background:#25221f!important;color:#fff!important;text-align:left;font-size:11px!important}.jio-build>span{font-size:20px}.jio-similar{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-height:44px;background:transparent;border:0;font-size:10px!important}.jio-note{font-size:8px;line-height:1.6;color:var(--jio-muted);text-align:center;margin:4px 8px 0}
.jio button:focus-visible,.jio input:focus-visible,.jio select:focus-visible,.jio-ring:focus-visible{outline:2px solid var(--jio-mood);outline-offset:3px}
@media(max-width:360px){.jio-piece{grid-template-columns:48px minmax(0,1fr);gap:11px}.jio-thumb{width:48px;height:72px}.jio-locked{grid-column:2;justify-self:start;margin-top:-8px}.jio h3{font-size:21px}.jio-current strong{font-size:22px}.jio-axis{gap:12px}}
@media(prefers-reduced-motion:reduce){.jio *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* ===== style block 10 ===== */
/* Session her-atelier-design-20260908. Shared wardrobe-to-studio transitions. */
#j-activity-header{position:relative}#j-activity-header span{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 3px;background:#bd637a;color:white;border-radius:50%;font-size:10px;display:grid;place-items:center}#j-activity-header span[hidden]{display:none}
.j-anchor{position:absolute;top:86px;left:22px;z-index:9;display:flex;max-width:min(350px,calc(100% - 44px));background:rgba(255,253,248,.91);backdrop-filter:blur(16px);border:1px solid #ffffff66;box-shadow:0 4px 30px #2820200b;border-radius:4px;color:#252525}.j-anchor-main{border:0;background:none;display:flex;gap:10px;align-items:center;padding:10px 12px;text-align:left;min-height:52px;color:inherit}.j-anchor small{display:block;font-size:9px;color:#73716d;letter-spacing:.04em}.j-anchor strong{display:block;font-size:12px;font-weight:500;margin-top:3px}.j-anchor>.j-icon{align-self:center;flex-shrink:0}.j-viewing-look .j-anchor{display:none}.j-invite-return{display:flex;align-items:center;gap:14px;max-width:650px;margin:28px auto 0;padding:16px 22px;background:#f0e9e1}.j-invite-return strong,.j-invite-return small{display:block}.j-invite-return small{font-size:12px;line-height:1.6;color:#68635d;margin-top:5px}.j-invite-return>iconify-icon{font-size:26px;flex-shrink:0}
.j-similar-source h3{font-family:var(--j-serif,Georgia,serif);font-size:32px;font-weight:400;margin:8px 0}.j-similar-chips{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.j-similar-chips button{border:1px solid #ded8d0;border-radius:30px;background:transparent;padding:10px 14px;min-height:44px;font-size:12px}.j-similar-chips button[aria-pressed=true]{background:#2c2826;border-color:#2c2826;color:#fff}.j-similar-result{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid #e1dcd5}.j-similar-result h3{font-size:18px;margin:8px 0}.j-similar-result .j-button{flex-shrink:0;font-size:11px;padding:12px}.j-similar-result p{font-size:12px}.j-similar-empty{background:#f0ece6;padding:22px;margin:20px 0}#j-similar-results{margin-bottom:20px}
@media(max-width:600px){.j-header-tools{gap:1px!important}.j-header .j-wordmark{font-size:28px!important}.j-header .j-header-tools .j-icon{width:36px;min-width:36px}.j-header .j-account-entry{font-size:11px;padding:0 5px!important}.j-anchor{top:73px;left:14px;max-width:calc(100% - 65px)}.j-anchor-main{padding:8px 10px}.j-anchor small{font-size:8px}.j-anchor strong{font-size:11px}.j-invite-return{margin:12px}.j-similar-result{align-items:flex-start;flex-direction:column}.j-similar-result .j-button{width:100%}}
@media(prefers-reduced-motion:no-preference){.j-anchor{animation:j-anchor-in .32s ease both}@keyframes j-anchor-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}}
/* ===== style block 11 ===== */
/* Joyful / one quiet instrument. Load after all previous studio styles.
* Root owns media state and these framing variables on .j-scene:
* --j-focus-scale (number), --j-focus-x / --j-focus-y (percent origins),
* --j-focus-translate-y (length), --j-scene-source (CSS url of same portrait).
* The framing parent is the sole focus/zoom transform. The photo-motion module
* may still add its small decorative transform to the photograph itself.
*/
#joyful-app[data-studio=true] .j-header{position:absolute;inset:0 0 auto;z-index:6;height:56px;border:0;background:linear-gradient(180deg,#faf9f6ce,#faf9f642 75%,transparent);backdrop-filter:none;box-shadow:none}
#joyful-app[data-studio=true] .j-header-tools{gap:0}
#joyful-app[data-studio=true] .j-header .j-icon{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
/* Those three rules put away the bookmark and the bell *icons* when the studio wants a clean
masthead, and they said `.j-header`, which was the same thing until the account panel moved
inside the header. "Save this Edit" is a row of that panel and carries the same
`data-action=save`: it was drawn 0px tall, invisible, on the very page it is for (found in
the browser, 2026-09-17). They mean the tools, so they say the tools. */
#joyful-app[data-studio=true] .j-header-tools [data-action=save],#joyful-app[data-studio=true] .j-header-tools [data-action=activity]{display:none!important}
#joyful-app[data-studio=true] .j-header .j-icon,#joyful-app[data-studio=true] .j-header #j-profile-header{min-width:44px;min-height:44px}
.j-hero{height:100svh;min-height:0;max-height:none;isolation:isolate;overflow:hidden}
.j-hero .j-scene{position:absolute;inset:0;background:#dedad2;overflow:hidden}
.j-hero .j-scene::before{display:none}
/* Override the old, independent makeup/video framing rules together. */
.j-hero .j-scene .j-framing{position:absolute;inset:0;width:100%;height:100%;background:none!important;overflow:hidden;transform-origin:var(--j-focus-x,50%) var(--j-focus-y,0%)!important;transform:translateY(var(--j-focus-translate-y,0px)) scale(var(--j-focus-scale,1))!important;transition:transform .65s cubic-bezier(.22,.68,.2,1);isolation:isolate}
.j-hero .j-scene .j-framing::before{content:none}
.j-hero .j-scene .j-framing>.j-portrait,.j-hero .j-scene .j-framing>.j-live-video{position:absolute;inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;min-width:0;max-width:none;max-height:none;padding:0!important;object-fit:cover!important;object-position:50% 0%!important;mask-image:none!important;-webkit-mask-image:none!important;border:0;background:transparent}
.j-hero .j-scene .j-framing>[hidden]{display:none!important}
/* Scene controls stay as small text targets, without floating panels. */
.j-hero .j-inline-media,.j-hero .j-photo-pause,.j-hero .j-view-look,.j-hero .j-beauty-caption{display:none!important}
.j-hero .j-scene-top{position:absolute;top:64px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:4;pointer-events:none}
.j-hero .j-scene-top>*{pointer-events:auto}
.j-hero .j-location{display:flex;align-items:center;gap:5px;min-height:44px;padding:0 3px;max-width:calc(100% - 118px);border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;font-size:9px;line-height:1.4;color:#47403c;text-shadow:0 1px 8px #faf9f6cc}
.j-hero .j-location>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.j-hero .j-location>iconify-icon{width:12px;height:12px;font-size:12px;flex:none}
.j-hero .j-location .j-mini-weather{display:none}
.j-hero .j-media-toggle{display:flex;align-items:center;gap:5px;min-height:44px;padding:0;background:none;border:0;border-radius:0;backdrop-filter:none;box-shadow:none;flex:none}
.j-hero .j-media-toggle button{display:flex;align-items:center;justify-content:center;position:relative;min-width:44px;min-height:44px;padding:0 4px;border:0;border-radius:0;background:none;color:#7f726a;font-size:10px;line-height:1.4;box-shadow:none;text-shadow:0 1px 8px #faf9f6cc}
.j-hero .j-media-toggle button[aria-pressed=true]{background:none;color:#302a27}
.j-hero .j-media-toggle button[aria-pressed=true]::after{content:'';position:absolute;left:7px;right:7px;bottom:7px;height:1px;background:currentColor;opacity:.7}
.j-hero .j-media-toggle iconify-icon{display:none}
.j-hero .j-photo-note,.j-hero .j-avatar-ref-link{background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0;text-shadow:0 1px 8px #faf9f6cc}
.j-hero .j-photo-note{left:16px;bottom:214px;padding:0;font-size:7px;max-width:250px}
.j-hero .j-avatar-ref-link{left:16px;bottom:223px;min-height:44px;padding:0;font-size:9px}
/* 204px altogether: one 56px toolbar, then the existing 148px visible cap.
* The SVG remains 180px tall and lowered by 32px; no scale distortion. */
.j-hero .j-controls{position:absolute;right:24px;left:auto;bottom:0;width:min(560px,100%);height:204px;min-height:0;max-height:204px;display:grid;grid-template-columns:58px minmax(132px,1fr) minmax(44px,90px) 66px;grid-template-rows:56px 148px;column-gap:5px;align-items:center;padding:0 12px;border:0;background:none;box-shadow:none;z-index:4;pointer-events:none;opacity:1;visibility:visible;transform:none;transition:none}
.j-hero .j-controls::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#faf9f6bd 0,#faf9f6bd 50px,#faf9f69e 56px,#faf9f600 88px);pointer-events:none}
.j-hero .j-controls>*{pointer-events:auto}
.j-hero .j-intro{position:static;inset:auto;grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:flex-start;min-width:0;width:auto;height:44px;max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0;backdrop-filter:none;text-align:left;pointer-events:auto}
.j-hero .j-intro .j-eyebrow,.j-hero .j-intro p{display:none}
.j-hero .j-intro>button{display:flex;align-items:center;justify-content:flex-start;min-height:44px;min-width:44px;height:44px;padding:0;border:0;background:none;border-radius:0;color:inherit;cursor:pointer}
.j-hero .j-intro .j-title{display:block;margin:0;padding:0;font-size:26px;line-height:1;letter-spacing:-.055em;filter:drop-shadow(0 1px 4px #faf9f6dd)}
.j-hero .j-mode-bar{position:static;inset:auto;transform:none;grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));align-items:center;min-width:132px;width:100%;height:44px;min-height:44px;margin:0;padding:0;gap:0;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;touch-action:pan-y;user-select:none}
.j-hero .j-mode-bar button{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;width:100%;min-height:44px;height:44px;gap:0;padding:0 2px;border:0;border-radius:0;background:none;font-size:10px;line-height:1.3;font-weight:400;color:#7e716a;transition:color .2s;text-shadow:0 1px 6px #faf9f6dd}
.j-hero .j-mode-bar button[aria-selected=true]{background:none;color:#312927;font-weight:600}
.j-hero .j-mode-bar button[aria-selected=true]::after{content:'';position:absolute;left:24%;right:24%;bottom:6px;height:1px;background:linear-gradient(90deg,#cf846b,#a17bb2,#78a6ab)}
.j-hero .j-mode-bar iconify-icon{display:none}
.j-hero .j-selection{position:static;inset:auto;grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;gap:0}
.j-hero .j-selection>.j-icon{display:none}
.j-hero .j-selection-value{display:flex;align-items:center;justify-content:center;min-width:44px;width:100%;max-width:100%;height:44px;min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;text-align:center}
.j-hero .j-selection-value strong{font:400 10px/1.4 var(--j-sans,Manrope,Arial,sans-serif);color:#6b5c59;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px #faf9f6dd}
.j-hero .j-selection-value span{display:none}
.j-hero .j-look-action{position:static;inset:auto;grid-column:4;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:4px;width:66px;min-width:44px;min-height:44px;height:44px;margin:0;padding:0 2px;background:none;border:0;border-radius:0;backdrop-filter:none;box-shadow:none;font-size:9px;color:#4f4140;text-align:right;text-shadow:0 1px 6px #faf9f6dd}
.j-hero .j-look-action>span{display:block;font-size:9px;line-height:1.3;font-weight:500;max-width:48px}
.j-hero .j-look-action>span::after{content:none}
.j-hero .j-look-action small{display:none}
.j-hero .j-look-action>iconify-icon{width:13px;height:13px;font-size:13px;flex:none}
.j-hero .j-disc{position:absolute;left:0;right:0;bottom:-32px;width:100%;height:180px;min-height:0;aspect-ratio:auto;overflow:hidden;touch-action:pan-y;transform:none;filter:none}
.j-hero .j-disc svg{display:block;width:100%;height:100%;overflow:hidden}
.j-hero .j-controls.j-mode-changing .j-disc{animation:none!important;transform:none}
.j-hero .j-axis-tabs{position:absolute;left:12px;right:12px;top:-44px;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;margin:0;padding:0;border:0;border-radius:0}
.j-hero .j-axis-tabs:focus-within{clip-path:none;width:auto;height:44px;overflow:visible;background:#faf9f6ef;border-radius:0}
.j-hero .j-axis-tabs button{min-height:44px}
.j-hero .j-controls button:focus-visible,.j-hero .j-scene-top button:focus-visible{outline:2px solid #9678b0;outline-offset:2px}
.j-hero .j-dial-hint,.j-hero .j-context-strip{display:none}
@media(min-width:701px){
.j-hero .j-scene{background:linear-gradient(135deg,#dedad2,#e8e3dc 52%,#dbd4ca)}
/* There was a second, blurred copy of the same photograph here — inside the framing, clipped
by it, and always behind the picture. It could never be seen except *through* a frame that
was not yet fully opaque, which is to say it could only ever appear as a ghost of the
picture during a transition. The room beside a portrait is filled by `.j-scene::after`,
which is outside the framing and does the job properly (owner, 2026-09-11: "кажется, что
на десктопе как-то двоится"). */
.j-hero .j-scene .j-framing>.j-portrait,.j-hero .j-scene .j-framing>.j-live-video{object-fit:contain!important;object-position:50% 0%!important}
/* The stage is the shape of the photograph, not the shape of the window.
Every frame of a look is 9:16. On a desktop the scene was the whole landscape viewport,
and the engine fits a frame to its canvas the way `object-fit: cover` does — so a portrait
was cropped to a horizontal band and the site showed a torso with no head and no feet
(owner, 2026-09-11). The rule above says `contain`, but it only reaches the ![]()
of the
DOM path; the WebGL canvas never saw it. Narrowing the stage fixes both paths at once,
and the blurred backdrop and the scene's own gradient fill what is left. */
.j-hero .j-scene .j-framing{width:min(100%,calc(100svh * 9 / 16));margin-inline:auto}
/* A landscape frame gets the whole stage; only a portrait is held to its own proportions
(owner, 2026-09-11: "если есть у образа горизонтальная фотография, нужно отображать её;
если её нет, то тогда вертикальную, без обрезания"). */
.j-hero .j-scene[data-wide=true] .j-framing{width:100%}
/* What fills the room the portrait does not: the frame itself, blurred far past reading, so
the light of her place carries across the whole window instead of flat grey. */
.j-hero /* The room beside the photograph, filled with the photograph's own blur.
*
* It carried `z-index:0` while the framing that holds the picture carried none, and a
* pseudo-element is the last child in tree order — so a blurred, desaturated copy of the very
* same frame was painted *over* the sharp one at 28 per cent. That is the overlay the owner
* kept seeing, and the reason a professional photograph arrived on screen soft and flat
* (2026-09-11). It belongs behind the picture, and now it is. */
}
@media(max-width:700px){
#joyful-app[data-studio=true] .j-header{height:48px;padding-inline:12px}
.j-hero .j-scene-top{top:53px;left:13px;right:13px;gap:10px}
.j-hero .j-location{font-size:8px;max-width:calc(100% - 108px)}
.j-hero .j-media-toggle{gap:3px}
.j-hero .j-media-toggle button{font-size:9px}
.j-hero .j-controls{left:0;right:0;bottom:env(safe-area-inset-bottom,0px);width:100%;height:204px;max-height:204px;padding:0 12px;grid-template-columns:55px minmax(132px,1fr) minmax(44px,70px) 62px;column-gap:4px}
.j-hero .j-intro .j-title{font-size:25px}
.j-hero .j-mode-bar button{font-size:9px}
.j-hero .j-look-action{width:62px;font-size:8px}
.j-hero .j-look-action>span{font-size:8px;max-width:45px}
.j-hero .j-selection-value strong{font-size:9px}
.j-hero .j-photo-note{left:13px;bottom:214px;font-size:7px}
.j-hero .j-avatar-ref-link{left:13px;bottom:225px;font-size:8px}
}
@media(max-width:600px){
.j-hero .j-controls{grid-template-columns:55px minmax(132px,1fr) 62px;column-gap:8px}
.j-hero .j-selection{display:none!important}
.j-hero .j-look-action{grid-column:3}
}
@media(max-width:350px){
#joyful-app[data-studio=true] .j-wordmark{font-size:21px}
.j-hero .j-controls{padding-inline:10px;grid-template-columns:49px minmax(132px,1fr) 58px;column-gap:5px}
.j-hero .j-intro .j-title{font-size:23px}
.j-hero .j-look-action{width:58px;gap:3px}
.j-hero .j-look-action>span{font-size:8px;max-width:42px}
.j-hero .j-mode-bar button{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.j-hero .j-scene .j-framing,.j-hero .j-mode-bar button{transition:none!important}}
/* One legible text hierarchy at every viewport; targets remain 44px. */
.j-hero .j-intro .j-title{min-width:0;width:100%;max-width:100%}
.j-hero .j-intro .j-title>button,.j-hero .j-intro>button{display:flex;align-items:center;justify-content:flex-start;min-width:44px;min-height:44px;width:100%;max-width:100%;height:44px;padding:0;border:0;border-radius:0;font:inherit;letter-spacing:inherit;white-space:nowrap;background:linear-gradient(105deg,#bd5247 4%,#d1718c 35%,#986fbd 62%,#538aa0 98%);background-clip:text;-webkit-background-clip:text;color:transparent}
.j-hero .j-mode-bar button{font-size:12px;color:#61554f;text-shadow:none}
.j-hero .j-mode-bar button[aria-selected=true]{color:#302824;font-weight:600}
.j-hero .j-media-toggle button{font-size:11px;color:#61554f}
.j-hero .j-media-toggle button[aria-pressed=true]{color:#302824;font-weight:600}
.j-hero .j-location{min-width:44px;font-size:11px;color:#4d413b}
.j-hero .j-location #j-weather-small{display:inline!important}
.j-hero .j-selection-value strong{font-size:11px;color:#61554f;text-shadow:none}
.j-hero .j-look-action,.j-hero .j-look-action>span{font-size:11px;line-height:1.3;color:#302824;text-shadow:none;white-space:nowrap}
.j-hero .j-look-action{padding:0;gap:3px}
.j-hero .j-look-action>span{max-width:none}
/* ===== style block 12 ===== */
/* Session her-atelier-design-20260908. Joint settings and secondary media controls below the image. */
.j-shared-edit{padding:30px 42px 25px;max-width:1240px;margin:auto;background:#faf9f6;border-bottom:1px solid #dfd9d1;color:#302b2a}.j-shared-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.j-shared-heading .j-text-button{display:flex;gap:8px;align-items:center;min-height:44px;font-size:12px;border-bottom:1px solid #bbb0a8}.j-shared-values{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}.j-shared-values>div{border-left:1px solid #d9ccc8;padding-left:16px}.j-shared-values span{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#8b7976;margin-bottom:8px}.j-shared-values strong{font:400 22px/1.3 var(--j-serif);display:block}.j-shared-edit>.j-note{font-size:12px;line-height:1.8;margin-top:20px;color:#796e67;max-width:680px}.j-media-settings{margin-top:20px}.j-media-settings>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px;width:max-content;font-size:12px;border-bottom:1px solid #d7cbc3}.j-media-settings>summary::-webkit-details-marker{display:none}.j-media-settings-body{padding:18px 0 5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.j-media-settings-body .j-note{flex-basis:100%;font-size:12px;line-height:1.7;max-width:720px}.j-media-settings-body [hidden]{display:none!important}.j-media-settings-body .j-button{font-size:12px}
@media(max-width:700px){.j-shared-edit{padding:22px 20px}.j-shared-heading{gap:10px;margin-bottom:18px}.j-shared-heading>.j-eyebrow{font-size:9px}.j-shared-values{gap:10px}.j-shared-values>div{padding-left:9px}.j-shared-values span{font-size:9px;letter-spacing:.05em;margin-bottom:6px}.j-shared-values strong{font-size:18px}.j-shared-edit>.j-note{font-size:11px;line-height:1.75}.j-media-settings-body .j-button{flex-grow:1}.j-media-settings-body .j-note{font-size:11px}}
/* The keyboard focus box must fit the visible cap; the artwork still uses180px. */
.j-hero .j-disc{height:148px!important;bottom:0!important;outline-offset:-2px}.j-hero .j-disc>svg{height:180px!important;width:100%!important;max-height:none!important}
/* A lesson has its own Back action; keep the narrow global header focused. */
#joyful-app:has(.jb-lesson) .j-header-tools [data-action=save],#joyful-app:has(.jb-lesson) .j-header-tools [data-action=activity]{display:none}
@media(max-width:350px){#joyful-app:has(.jb-lesson) .j-header{padding-inline:12px}#joyful-app:has(.jb-lesson) .j-header-tools{gap:0}}
/* ===== style block 13 ===== */
/* Session her-atelier-design-20260908. Weather layer is shared by photo/video; never blocks gestures. */
.j-atmosphere{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.j-atmosphere[data-paused=true] *{animation-play-state:paused!important}.j-atmosphere[data-weather=unknown]>*{opacity:0;animation:none}.j-weather-brief{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid #e3ddd5;margin-top:16px;font-size:12px;line-height:1.6}.j-weather-brief>svg{width:22px;height:22px;flex:none;margin-top:2px}.j-weather-brief strong{display:block;font-size:12px;font-weight:600}.j-weather-brief p{margin:4px 0 0;color:#786e66}.j-weather-brief button{border:0;background:none;border-bottom:1px solid #a79a91;font:inherit;min-height:44px;padding:0;cursor:pointer}.j-weather-brief small{display:block;margin-top:4px;font-size:10px;color:#8a7d76}.j-weather-box>svg{width:30px;height:30px;margin:14px 0 0}.j-day>svg{width:12px;height:12px;display:block;margin:2px auto 0;flex:none}.j-day{flex-direction:column}.j-hero .j-location>svg{width:14px;height:14px;flex:none}
@media(prefers-reduced-motion:reduce){.j-atmosphere *{animation:none!important;transition:none!important}}
/* ===== style block 14 ===== */
/* Session her-atelier-design-20260908. Sequential detail layer; original modules remain mounted. */
.jew-enabled{--jew-ink:#292628;--jew-muted:#817775;--jew-line:#ded8d1;--jew-paper:#faf9f6;--jew-serif:var(--j-serif,'Bodoni Moda',Georgia,serif);--jew-sans:var(--j-sans,Manrope,Arial,sans-serif);background:var(--jew-paper);color:var(--jew-ink);scroll-margin-top:18px}
.jew-shell{max-width:1240px;margin:auto;padding:38px 42px 42px;font-family:var(--jew-sans);box-sizing:border-box}
.jew-shell *{box-sizing:border-box}.jew-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:30px}.jew-eyebrow{display:block;font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--jew-muted);margin-bottom:11px}.jew-heading h2{font:400 clamp(33px,4vw,51px)/1.1 var(--jew-serif);letter-spacing:-.04em;margin:0}.jew-heading h2 em{font-weight:400}.jew-heading>p{font-size:11px;line-height:1.8;text-align:right;color:var(--jew-muted);margin:0 0 2px}
.jew-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--jew-line);scroll-margin-top:22px}.jew-tabs>button{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:17px;min-width:0;min-height:76px;padding:16px 24px;border:0;background:none;text-align:left;color:var(--jew-muted);cursor:pointer;border-radius:0}.jew-tabs>button+button{border-left:1px solid var(--jew-line)}.jew-step-number{font:400 30px/1 var(--jew-serif);letter-spacing:-.055em;color:#b2a49f}.jew-step-name{font:500 13px var(--jew-sans)}.jew-tab-line{position:absolute;bottom:-1px;height:2px;left:24px;right:24px;background:transparent}.jew-tabs>button[aria-selected=true]{background:#f0e9e6;color:var(--jew-ink)}.jew-tabs>button[aria-selected=true] .jew-step-number{color:#a3667b}.jew-tabs>button[aria-selected=true] .jew-tab-line{background:linear-gradient(90deg,#c77478,#aa82b5,#829ea5)}.jew-tabs>button:focus-visible,.jew-footer>button:focus-visible,.jew-keep summary:focus-visible,.jew-action-grid>button:focus-visible{outline:2px solid #976d8b;outline-offset:4px;z-index:1}.jew-subtitle{font-size:11px;line-height:1.75;color:var(--jew-muted);margin:15px 0 0;min-height:20px}
.jew-enabled>.j-beauty-root,.jew-enabled .j-beauty-nav,.jew-enabled .jd-finishing-card,.jew-enabled .jd-presentation,.jew-enabled .jd-section-heading,.jew-enabled .jd-total-row [data-jd=wishlist]{display:none!important}
.jew-panel[hidden]{display:none!important}.jew-panel{min-width:0;outline:none}.jew-panel:focus-visible{outline:2px solid #b19aaa;outline-offset:5px}.jew-enabled .jd-details{max-width:none;padding:24px 0 4px;background:transparent}.jew-enabled .jd-item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.jew-enabled .jd-look-meta{margin-top:20px}.jew-enabled .jd-styling-note{padding:28px 0;margin-top:24px}.jew-enabled .jd-total-row{padding:22px 0}.jew-enabled .jd-total-row>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px 20px}.jew-enabled .jd-total-row .jd-control-label{margin-bottom:0}.jew-enabled .jd-total-row strong{font-size:38px}.jew-enabled .jd-total-row p{flex-basis:100%;margin-top:0}.jew-enabled .jb-beauty-edit{max-width:none;padding:26px 0 10px;background:transparent;border-top:0}.jew-enabled .jb-detail-head h2{font-size:39px}.jew-enabled .jb-detail-head .jb-eyebrow{display:none}.jew-enabled .jb-detail-head h2{margin-top:0}.jew-enabled .jb-kit{margin-top:24px}.jew-enabled .jb-kit summary{font-size:11px;min-height:58px}.jew-enabled .jb-kit-summary{font-size:10px}.jew-enabled .jb-products{grid-template-columns:repeat(3,minmax(0,1fr))}.jew-enabled .jb-detail-description{margin-top:18px}
.jew-context .j-shared-edit{max-width:none;padding:17px 0 18px;margin:17px 0 0;background:transparent;border-block:1px solid var(--jew-line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 28px}.jew-context .j-shared-values{display:none}.jew-context .j-shared-heading{grid-column:2;grid-row:1;margin:0;align-self:start}.jew-context .j-shared-heading>.j-eyebrow{display:none}.jew-context .j-shared-heading .j-text-button{font-size:10px;min-height:44px}.jew-context .j-shared-edit>#j-shared-status{grid-column:1;grid-row:1;align-self:center;font-size:10px;line-height:1.75;margin:0;max-width:800px}.jew-context .j-media-settings{grid-column:1/-1;grid-row:2;margin-top:4px}.jew-context .j-media-settings>summary{font-size:10px;min-height:40px;border-bottom:0}.jew-context .j-media-settings-body{padding-top:13px}.jew-context .j-media-settings-body .j-note,.jew-context .j-media-settings-body .j-button{font-size:10px}
.jew-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;padding:23px 0;border-top:1px solid var(--jew-line);margin-top:13px}.jew-footer>button{display:flex;align-items:center;justify-content:center;gap:12px;font:500 11px/1.5 var(--jew-sans);min-height:48px;min-width:44px;padding:12px 22px;cursor:pointer;border:1px solid var(--jew-line);border-radius:2px}.jew-back{justify-self:start;background:transparent;color:var(--jew-muted)}.jew-next{justify-self:end;background:var(--jew-ink);border-color:var(--jew-ink)!important;color:#fff}.jew-footer>button:disabled{opacity:.35;cursor:default}.jew-footer iconify-icon{width:16px;height:16px;font-size:16px}.jew-progress{font-size:9px;letter-spacing:.12em;color:#a2918c;font-variant-numeric:tabular-nums}.jew-keep{border-block:1px solid var(--jew-line);padding:0;margin-top:0}.jew-keep>summary{display:flex;align-items:center;gap:10px;min-height:52px;list-style:none;cursor:pointer;font-size:11px;color:var(--jew-muted)}.jew-keep>summary::-webkit-details-marker{display:none}.jew-keep summary>iconify-icon{width:15px;height:15px;font-size:15px}.jew-keep-mark{font:400 23px var(--jew-serif);margin-left:auto}.jew-keep[open] .jew-keep-mark{transform:rotate(45deg)}.jew-keep-body{padding:2px 0 21px}.jew-keep-body>p{font-size:10px;line-height:1.75;color:var(--jew-muted);margin:0 0 16px}.jew-action-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.jew-action-grid>button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;min-width:0;padding:11px 8px;border:1px solid var(--jew-line);background:transparent;border-radius:2px;font:500 10px/1.5 var(--jew-sans);color:var(--jew-ink);cursor:pointer}.jew-action-grid>button:disabled{opacity:.4;cursor:default}.jew-action-grid iconify-icon{width:15px;height:15px;font-size:15px;flex:none}.jew-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover){.jew-tabs>button:hover{background:#f2edeb}.jew-action-grid>button:not(:disabled):hover,.jew-back:not(:disabled):hover{background:#f0e9e6}.jew-next:hover{background:#514249}}
@media(max-width:900px){.jew-shell{padding:30px 30px 35px}.jew-heading>p{max-width:220px;font-size:10px}.jew-tabs>button{padding:15px 20px;gap:13px}.jew-tab-line{left:20px;right:20px}.jew-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.jew-enabled .jd-item-grid{gap:25px 18px}.jew-context .j-shared-edit{gap:0 20px}}
@media(max-width:700px){.jew-shell{padding:26px 20px 32px}.jew-heading{display:block;margin-bottom:23px}.jew-eyebrow{font-size:8px;margin-bottom:10px}.jew-heading h2{font-size:38px;letter-spacing:-.04em}.jew-heading>p{font-size:10px;line-height:1.7;text-align:left;margin-top:13px;max-width:none}.jew-heading>p br{display:none}.jew-tabs{scroll-margin-top:14px}.jew-tabs>button{min-height:71px;gap:9px;padding:15px 10px;justify-content:center}.jew-step-number{font-size:24px}.jew-step-name{font-size:11px}.jew-tab-line{left:10px;right:10px}.jew-subtitle{font-size:10px;line-height:1.7;min-height:34px;margin-top:13px}.jew-context .j-shared-edit{padding:13px 0 12px;margin-top:12px;grid-template-columns:minmax(0,1fr) auto;gap:0 12px}.jew-context .j-shared-edit>#j-shared-status{font-size:9px;line-height:1.75;grid-column:1/-1;grid-row:1}.jew-context .j-shared-heading{grid-column:2;grid-row:2;align-self:start}.jew-context .j-shared-heading .j-text-button{font-size:10px;min-height:44px;white-space:nowrap}.jew-context .j-media-settings{grid-column:1/-1;grid-row:2;padding-right:98px;margin:0}.jew-context .j-media-settings[open]{padding-right:0}.jew-context .j-media-settings>summary{font-size:10px;min-height:44px;width:max-content}.jew-context .j-media-settings-body{padding-top:14px}.jew-context .j-media-settings-body .j-button{font-size:10px;min-height:44px}.jew-context .j-media-settings-body .j-note{font-size:9px}.jew-enabled .jd-details{padding:22px 0 0}.jew-enabled .jd-look-meta{margin-top:17px;font-size:9px}.jew-enabled .jd-item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 13px}.jew-enabled .jd-item-copy h3{font-size:11px!important}.jew-enabled .jd-styling-note{padding:24px 0;margin-top:23px;gap:23px}.jew-enabled .jd-styling-note>div:first-child>p{font-size:25px}.jew-enabled .jd-total-row{padding:20px 0}.jew-enabled .jd-total-row>div{gap:6px 13px}.jew-enabled .jd-total-row strong{font-size:35px}.jew-enabled .jd-total-row .jd-control-label{font-size:9px}.jew-enabled .jb-beauty-edit{padding:23px 0 5px}.jew-enabled .jb-detail-head{align-items:flex-start;gap:13px}.jew-enabled .jb-detail-head h2{font-size:32px}.jew-enabled .jb-detail-head>.jb-button{font-size:9px;max-width:135px;min-height:46px;flex-shrink:0;padding:9px 12px}.jew-enabled .jb-detail-description{margin-top:17px;gap:14px}.jew-enabled .jb-detail-description>p{font-size:11px;line-height:1.8}.jew-enabled .jb-brief-meta{font-size:9px;gap:7px 10px}.jew-enabled .jb-kit{margin-top:19px}.jew-enabled .jb-kit summary{font-size:10px;gap:12px;min-height:58px}.jew-enabled .jb-kit-summary{font-size:9px;gap:9px}.jew-enabled .jb-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 15px}.jew-enabled .jb-product h3{font-size:10px}.jew-enabled .jb-product p{font-size:9px}.jew-enabled .jb-product-mark{width:25px;flex:none}.jew-enabled .jb-product>strong{font-size:9px}.jew-footer{gap:10px;padding:20px 0;margin-top:14px}.jew-footer>button{font-size:10px;min-height:46px;padding:11px 13px;gap:8px}.jew-footer iconify-icon{width:14px;height:14px;font-size:14px}.jew-progress{font-size:8px;letter-spacing:.07em}.jew-keep>summary{font-size:10px;min-height:50px}.jew-keep-body>p{font-size:9px}.jew-action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.jew-action-grid>button{font-size:10px;min-height:46px;gap:7px}.jew-action-grid>button:last-child{grid-column:1/-1}}
@media(max-width:350px){.jew-shell{padding-inline:16px}.jew-heading h2{font-size:34px}.jew-tabs>button{gap:7px;padding-inline:7px}.jew-step-number{font-size:22px}.jew-step-name{font-size:10px}.jew-enabled .jb-detail-head{display:block}.jew-enabled .jb-detail-head>.jb-button{margin-top:15px;max-width:none}.jew-enabled .jb-products{grid-template-columns:1fr}.jew-enabled .jb-product-mark{width:30px}.jew-enabled .jb-kit summary{gap:8px;font-size:9px}.jew-enabled .jb-kit-summary{font-size:8px;max-width:108px;text-align:right}.jew-footer{gap:6px;grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr)}.jew-footer>button{font-size:9px;padding-inline:10px;gap:6px}.jew-action-grid>button{font-size:9px}.jew-enabled .jd-total-row strong{font-size:33px}}
/* Four complete chapters retain the original mounted editors. */
.jew-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.jew-tabs>button{gap:12px;padding-inline:18px}.jew-enabled[data-edit-step=presentation] .jew-context{display:none}.jew-enabled[data-edit-step=presentation] .jew-footer{display:none}.jew-enabled[data-edit-step=presentation] .jew-keep{display:none}.jew-presentation-wait{padding:35px 0;color:var(--jew-muted);font-size:13px}
@media(max-width:700px){.jew-tabs>button{flex-direction:column;gap:6px;padding:11px 3px;min-height:73px}.jew-step-number{font-size:23px}.jew-step-name{font-size:10.5px;letter-spacing:-.02em}.jew-tabs>button[data-jew-step=presentation] .jew-step-name{font-size:10px}.jew-tab-line{left:7px;right:7px}.jew-enabled[data-edit-step=presentation] .jew-subtitle{margin-top:12px}}
/* A quiet utility row: hidden ready status must not reserve an empty row. */
.jew-context .j-shared-edit:has(>#j-shared-status[hidden]){padding-block:5px;min-height:54px}.jew-context .j-shared-edit:has(>#j-shared-status[hidden]) .j-shared-heading,.jew-context .j-shared-edit:has(>#j-shared-status[hidden]) .j-media-settings{grid-row:1}.jew-context .j-media-settings{padding-right:110px}.jew-context .j-media-settings[open]{padding-right:0}.jew-context .j-media-settings>summary{width:max-content;min-height:44px}.jew-context .j-media-settings[open]>summary{padding-right:0}.jew-enabled .jd-pin,.jew-enabled .jd-wish{min-width:44px!important;min-height:44px!important}.jew-enabled .jd-wish{margin-right:0!important}
@media(max-width:700px){.jew-heading{margin-bottom:20px}.jew-subtitle{min-height:0}.jew-enabled .jd-details{padding-top:16px}.jew-context .j-media-settings{padding-right:98px}.jew-context .j-media-settings[open]{padding-right:0}}
@media(prefers-reduced-motion:reduce){.jew-shell *{scroll-behavior:auto!important;transition:none!important}}
/* ===== style block 15 ===== */
/* Session her-atelier-design-20260908. One compact circular instrument.
Root owns data-orbit-state, aria-expanded and inert. Expanded150px / collapsed54px.
SVG128px is deliberately clipped by its110px focus box; x/y units remain1:1.
The collapsed colour tip is a6px clip of a2000px-radius circle, never an ellipse. */
.j-hero .j-controls{--j-orbit-size:150px;position:absolute;left:auto;right:24px;bottom:env(safe-area-inset-bottom,0px);display:block;width:min(560px,100%);height:var(--j-orbit-size)!important;max-height:none;min-height:0;padding:0;overflow:visible;background:none;border:0;box-shadow:none;transition:height .38s cubic-bezier(.2,.8,.2,1);isolation:isolate}
.j-hero .j-controls::before{display:none!important}
.j-hero .j-controls::after{content:'';position:absolute;left:6%;right:6%;bottom:0;height:6px;border-radius:0;background:linear-gradient(90deg,#69a393,#bfb362,#ef8459,#d96196,#8d78bb);-webkit-mask-image:radial-gradient(circle 2000px at 50% 2000px,#000 1999.7px,transparent 2000.3px);mask-image:radial-gradient(circle 2000px at 50% 2000px,#000 1999.7px,transparent 2000.3px);opacity:0;pointer-events:none;transition:opacity .2s}
.j-hero .j-controls .j-intro{position:absolute;left:12px;top:0;width:55px;height:44px;max-width:55px;padding:0;margin:0;display:block;text-align:left;transform:none;background:none;z-index:3;pointer-events:auto}
.j-hero .j-controls .j-intro .j-title{font-size:25px;line-height:1;letter-spacing:-.055em;margin:0;padding:0;height:44px}
.j-hero .j-controls .j-title>button{width:55px;height:44px;min-height:44px;padding:0;justify-content:flex-start;filter:drop-shadow(0 1px 3px #fff9)}
.j-hero .j-controls .j-mode-bar{position:absolute;left:50%;top:0;width:min(200px,calc(100% - 140px));height:52px;min-width:132px;margin:0;padding:0;display:block;transform:translateX(-50%);border:0;background:none;box-shadow:none;z-index:3}
.j-hero .j-controls .j-mode-bar button{position:absolute;top:4px;left:0;width:33.333%;min-width:44px;height:44px;min-height:44px;font-size:12px;line-height:1.2;padding:0;display:flex;align-items:center;justify-content:center;color:#61554f;font-weight:400;text-shadow:none;background:none;transition:color .18s}
.j-hero .j-controls .j-mode-bar button:nth-child(2){left:33.333%;top:0}
.j-hero .j-controls .j-mode-bar button:nth-child(3){left:66.666%}
.j-hero .j-controls .j-mode-bar button[aria-selected=true]{color:#302824;font-weight:600}
.j-hero .j-controls .j-mode-bar button[aria-selected=true]::after{left:24%;right:24%;bottom:8px;height:1px;background:linear-gradient(90deg,#e4a177,#cc789c,#8fa8b7)}
.j-hero .j-controls .j-look-action{position:absolute;left:auto;right:12px;top:0;bottom:auto;width:44px;height:44px;min-height:44px;padding:0;margin:0;display:flex;justify-content:center;align-items:center;gap:0;border:0;background:none;color:#302824;z-index:4;font-size:11px;text-shadow:0 1px 6px #fff,0 0 12px #fffa}
.j-hero .j-controls .j-look-action>span{display:block;font-size:11px;line-height:1.2;white-space:nowrap}
.j-hero .j-controls .j-look-action>iconify-icon,.j-hero .j-controls .j-look-action small{display:none}
.j-hero .j-controls .j-selection{display:none!important;position:absolute;top:0;left:79px;right:108px;width:auto;height:44px;min-height:44px;margin:0;padding:0;border:0;background:none}
.j-hero .j-controls .j-selection>.j-icon{display:none}
.j-hero .j-controls .j-selection-value{display:flex;width:100%;height:44px;min-height:44px;padding:0;align-items:flex-start;justify-content:center;text-align:left}
.j-hero .j-controls .j-selection-value strong{font:500 11px/1.3 var(--j-sans);color:#4c3d3b;text-shadow:0 1px 6px #fff,0 0 12px #fffa}
.j-hero .j-controls .j-selection-value>span{display:none}
.j-hero .j-controls .j-orbit-toggle{position:absolute;right:9px;bottom:0;top:auto;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#faf9f670;backdrop-filter:blur(4px);color:#4d3a40;z-index:5;touch-action:manipulation}
.j-hero .j-controls .j-orbit-toggle>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.j-hero .j-controls .j-orbit-toggle iconify-icon{width:16px;height:16px;font-size:16px;transition:transform .3s}
.j-hero .j-controls .j-disc{position:absolute;top:40px!important;left:0;right:0;bottom:auto!important;width:100%;height:110px!important;min-height:0;max-height:none;aspect-ratio:auto;overflow:hidden;touch-action:pan-y;transform:none!important;filter:none;z-index:2;opacity:1;visibility:visible;outline-offset:-2px!important;transition:opacity .22s}
.j-hero .j-controls .j-disc>svg{display:block;position:absolute;left:0;top:0;width:100%!important;height:128px!important;max-height:none!important;overflow:hidden}
.j-hero .j-controls .j-disc [data-band=outer] .j-ring-track{stroke:var(--j-band-paint,#faf7f0);stroke-opacity:.88}
.j-hero .j-controls .j-disc [data-band=inner] .j-ring-track{stroke-opacity:.87}
.j-hero .j-controls :is(.j-disc [data-band=outer] .j-ring-labels,.j-lens-layer[data-band=outer]) text{font-size:12px;fill:#4c4540}
.j-hero .j-controls .j-disc .j-today-tick{fill:#ac454b;font-weight:700}
.j-hero .j-controls :is(.j-disc,.j-lens-layer) .j-date-weekday{font-size:6px;letter-spacing:.04em;fill:#867b70}
.j-hero .j-controls .j-disc .j-weather-mark{color:#6d6257;fill:none;stroke:currentColor;stroke-width:1.7}
.j-hero .j-controls .j-disc .j-calendar-weather{color:#807365;fill:none;stroke:currentColor;stroke-width:1.6}
.j-hero .j-controls :is(.j-disc [data-band=middle] .j-ring-labels,.j-lens-layer[data-band=middle]) text{font-size:12px;font-weight:600}
.j-hero .j-controls :is(.j-disc [data-band=inner] .j-ring-labels,.j-lens-layer[data-band=inner]) text{font-size:10px}
.j-hero .j-controls .j-disc [data-band=outer] .j-ring-track{stroke-opacity:.88}
.j-hero .j-controls .j-disc [data-band=inner] .j-ring-track{stroke-opacity:.87}
.j-hero .j-controls .j-axis-tabs{top:0;left:68px;right:60px;z-index:6}
.j-hero .j-controls .j-axis-tabs:focus-within{background:#faf9f6f2}
.j-hero .j-controls[data-orbit-state=collapsed]{--j-orbit-size:54px}
.j-hero .j-controls[data-orbit-state=collapsed]::after{opacity:.9}
.j-hero .j-controls[data-orbit-state=collapsed] .j-disc,.j-hero .j-controls[data-orbit-state=collapsed] .j-mode-bar{visibility:hidden!important;opacity:0;pointer-events:none}
.j-hero .j-controls[data-orbit-state=collapsed] .j-disc{height:0!important}
.j-hero .j-controls[data-orbit-state=collapsed] .j-selection{display:block!important}
.j-hero .j-controls[data-orbit-state=collapsed] .j-orbit-toggle{top:0;bottom:auto;right:60px;background:none;backdrop-filter:none;text-shadow:0 1px 6px #fff}
.j-hero .j-controls :is(button,[tabindex]):focus-visible{outline:2px solid #8052a3;outline-offset:-2px}
@media(max-width:700px){.j-hero .j-controls{left:0;right:0;width:100%}}
@media(max-width:350px){.j-hero .j-controls .j-intro{left:10px;width:49px;max-width:49px}.j-hero .j-controls .j-intro .j-title{font-size:23px}.j-hero .j-controls .j-title>button{width:49px}.j-hero .j-controls .j-mode-bar{width:calc(100% - 132px)}.j-hero .j-controls .j-selection{left:70px}.j-hero .j-controls .j-look-action{right:10px}}
@media(prefers-reduced-motion:reduce){.j-hero .j-controls,.j-hero .j-controls *,.j-hero .j-controls::after{transition:none!important}}
/* The mode tabs sit on the uppermost true circular track, radius600px. */
.j-hero .j-controls .j-mode-bar{overflow:hidden}
.j-hero .j-controls .j-mode-bar::before{content:"";position:absolute;left:50%;top:10px;width:1200px;height:1200px;border:24px solid #faf9f6d9;border-radius:50%;transform:translateX(-50%);box-shadow:none;pointer-events:none;z-index:-1}
/* A restrained iridescent edge; no ambient animation or permanent RAF. */
.j-hero .j-controls::after{filter:drop-shadow(0 0 4px #d594c584)}
.j-hero .j-controls[data-orbit-state=expanded]::after{opacity:.75;height:3px;left:9%;right:9%}
.j-hero .j-controls .j-disc[data-motion=drag]{filter:drop-shadow(0 0 4px #d0a7ca35)}
@media(prefers-reduced-motion:reduce){.j-hero .j-controls::after{filter:none}.jmo-root .jmo-edge{filter:none}}
/* ===== style block 16 ===== */
/* Session her-atelier-design-20260908. Full-width mode track, concentric with Joyful.
There is no staggered HTML label row: glyphs follow the SVG circular baseline. */
.j-hero .j-controls .j-mode-bar.jmo-root{position:absolute;left:0;right:0;top:0;bottom:auto;transform:none;width:100%;min-width:0;max-width:none;height:var(--j-mode-window-height,74px);min-height:0;margin:0;padding:0;display:block;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;z-index:3;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.j-hero .j-controls .j-mode-bar.jmo-root::before,.j-hero .j-controls .j-mode-bar.jmo-root::after{display:none!important}
.jmo-root .jmo-svg{display:block;position:absolute;left:0;top:0;width:100%!important;height:var(--j-mode-window-height,74px)!important;max-height:none;overflow:hidden;pointer-events:none}
.jmo-root .jmo-paper{fill:none;stroke:#faf9f6;stroke-opacity:.9;stroke-width:28;pointer-events:none}
.jmo-root .jmo-edge{fill:none;stroke:#fff9ef;stroke-opacity:.8;stroke-width:1;pointer-events:none}
.jmo-root .jmo-label{font:500 12.5px/1 var(--j-sans,Manrope,Arial,sans-serif);letter-spacing:.02em;fill:#584c46;stroke:none;text-shadow:none;pointer-events:none}
.jmo-root .jmo-tab[aria-selected=true] .jmo-label{fill:#282322;font-weight:700}
.jmo-root .jmo-tab{cursor:pointer;outline:none!important;touch-action:pan-y}
.jmo-root .jmo-hit{fill:transparent;stroke:none;pointer-events:all}
.jmo-root .jmo-focus{fill:none;stroke:#8661a4;stroke-width:1.7;opacity:0;pointer-events:none}
.jmo-root .jmo-tab:focus-visible .jmo-focus{opacity:1}
.jmo-root .jmo-indicator{fill:none;stroke-width:3;stroke-linecap:round;pointer-events:none}
@media(min-width:701px){.jmo-root .jmo-label{font-size:13px}}
@media(prefers-reduced-motion:reduce){.jmo-root *{transition:none!important;animation:none!important}}
/* Angular labels move; the selection aperture remains centred. */
.jmo-root .jmo-label{fill:#665b56;transition:fill .15s}
.jmo-root .jmo-tab.jmo-nearest .jmo-label{fill:#282322;font-weight:700}
.jmo-root .jmo-tab:not(.jmo-nearest) .jmo-label{font-weight:500;fill:#766b65}
.jmo-root .jmo-paper{stroke-width:calc(28px + 6px * var(--jmo-engaged,0));transition:stroke-width .18s;stroke-opacity:.94}
.jmo-root .jmo-edge{stroke-width:1.4;stroke-opacity:.75;filter:drop-shadow(0 0 3px #ca94cd70)}
.jmo-root[data-motion=drag] .jmo-edge,.jmo-root[data-motion=coast] .jmo-edge{stroke-opacity:1;filter:drop-shadow(0 0 5px #d595cc90)}
.jmo-root .jmo-indicator{stroke-width:2.5}
.jmo-root .jmo-track-hit{fill:none;stroke:transparent;stroke-width:44;pointer-events:stroke;touch-action:pan-y}
.jmo-root .jmo-ghosts{pointer-events:none}
/* ===== style block 17 ===== */
/* Session her-atelier-design-20260908. Readable context and an unobstructed Edit. */
.j-hero .j-scene-top .j-location{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;background:rgba(250,249,246,.94);border:1px solid rgba(255,255,255,.65);border-radius:4px;color:#302824!important;font:600 12px/1.3 var(--j-sans);text-shadow:none!important;box-shadow:0 2px 12px #20180e12;backdrop-filter:blur(12px);opacity:1;max-width:calc(100% - 132px)}
.j-hero .j-scene-top .j-location>svg{width:17px;height:17px;flex-shrink:0;color:#4b4038;stroke-width:1.6}
.j-hero .j-scene-top .j-location span{color:inherit!important;opacity:1;text-shadow:none}
.j-hero .j-controls .j-intro,.j-hero .j-controls .j-selection,.j-hero .j-controls[data-orbit-state=collapsed] .j-selection{display:none!important}
.j-hero .j-controls .j-look-action{top:-50px;right:12px;width:auto;min-width:78px;height:40px;min-height:44px;padding:0 10px;gap:6px;background:#faf9f6eb;border:1px solid #fff6;border-radius:4px;color:#302824;text-shadow:none;box-shadow:0 2px 12px #20180e12;font-weight:500}
.j-hero .j-controls .j-look-action>iconify-icon{display:block;font-size:13px}
.j-hero .j-controls[data-orbit-state=collapsed] .j-look-action{top:0;right:12px}
.j-hero .j-controls .j-orbit-toggle{background:#faf9f6ed;box-shadow:0 2px 12px #20180e12;color:#302824;backdrop-filter:blur(8px)}
.j-hero .j-controls[data-orbit-state=collapsed] .j-orbit-toggle{right:auto;left:calc(50% - 22px);background:#faf9f6ed;backdrop-filter:blur(8px);text-shadow:none}
.j-hero .j-portrait{transition:opacity .24s ease}
/* 2026-09-17 · a three-colour bar crept along the foot of the stage here on `data-image-loading`.
No module has set that attribute for months, so it was a fourth waiting mark waiting to be
switched back on. Deleted with the other three (owner: one loader, everywhere). */
@media(prefers-reduced-motion:reduce){.j-hero .j-portrait{transition:none}}
/* The SVG hit regions own input; the transparent mode container must not cover Calendar. */
.j-hero .j-controls .j-mode-bar.jmo-root{pointer-events:none}
.j-hero .j-scene-top .j-mini-weather{display:none!important}
.j-hero .j-media-toggle button:disabled{opacity:.5;cursor:default}
/* Session her-atelier-design-20260908. Image feedback only when relevant; no media setup panel. */
.jew-context .j-shared-edit.j-preview-feedback[hidden]{display:none!important}
.jew-context .j-shared-edit.j-preview-feedback{display:block;min-height:0;padding:12px 0;margin:8px 0 0}
.j-preview-feedback .j-render-coverage{font-size:11px;line-height:1.7;margin-top:8px}
.j-preview-feedback .j-render-coverage>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.j-preview-feedback [data-action="preview-retry"]{min-height:44px}
/* ===== style block 18 ===== */
/* Session her-atelier-design-20260908. Open beauty kit with photographed products.
Scope: the new .jb-kit-open gallery and lesson marks explicitly labelled .jb-ingredient-photo.
Image sources, photographed variants and external destinations remain root-owned data. */
.jb-beauty-edit:has(.jb-kit-open) .jb-detail-head{gap:16px;align-items:center}
.jb-beauty-edit:has(.jb-kit-open) .jb-detail-head h2{font-size:clamp(27px,3vw,35px);line-height:1.14;margin-top:0}
.jb-beauty-edit:has(.jb-kit-open) .jb-detail-description{margin-top:12px;gap:15px 24px}
.jb-beauty-edit:has(.jb-kit-open) .jb-detail-description>p{font-size:12px;line-height:1.7}
.jb-beauty-edit .jb-kit.jb-kit-open{display:block;margin-top:22px;padding-top:20px;border-top:1px solid var(--jb-line,#e6dfe0);min-width:0}
.jb-kit-open .jb-kit-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 9px}
.jb-kit-open .jb-kit-heading h3{font:400 clamp(23px,2.6vw,29px)/1.16 var(--jb-serif,var(--j-serif,Georgia,serif));letter-spacing:-.025em;color:#30282d;margin:0;min-width:0}
.jb-kit-open .jb-kit-heading>span{flex:none;font:500 11px/1.5 var(--jb-sans,var(--j-sans,Arial,sans-serif));color:#86757c;white-space:nowrap;font-variant-numeric:tabular-nums}
.jb-kit-open .jb-kit-intro{font:400 12px/1.7 var(--jb-sans,var(--j-sans,Arial,sans-serif));color:#7c6e74;max-width:680px;margin:0 0 20px}
.jb-kit-open .jb-product-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:26px 22px;min-width:0;width:100%;max-width:844px}
.jb-kit-open .jb-product-card{display:flex;flex-direction:column;min-width:0;margin:0;background:transparent;border:0;border-bottom:1px solid #e9e2e2;padding:0 0 12px;isolation:isolate}
.jb-kit-open .jb-product-photo{display:block;position:relative;width:100%;aspect-ratio:4/3;max-height:200px;min-height:0;overflow:hidden;background:#f7f5f2;border:1px solid #eeebe6;border-radius:3px;color:#77646d;text-decoration:none;flex:none}
.jb-kit-open .jb-packshot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
.jb-kit-open .jb-packshot>img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;background:none;transform-origin:var(--jb-photo-origin,50% 50%);transform:translateY(var(--jb-photo-offset,0px)) scale(var(--jb-photo-scale,1));transition:transform 260ms cubic-bezier(.2,.7,.2,1);border:0}
.jb-kit-open .jb-product-index{position:absolute;left:11px;top:9px;font:400 10px/1.2 var(--jb-sans,var(--j-sans,Arial,sans-serif));font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#92838a;pointer-events:none}
.jb-kit-open .jb-product-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-width:0;padding:13px 1px 0}
.jb-kit-open .jb-product-brand{display:block;font:600 10px/1.5 var(--jb-sans,var(--j-sans,Arial,sans-serif));letter-spacing:.11em;text-transform:uppercase;color:#87727d;overflow-wrap:anywhere}
.jb-kit-open .jb-product-copy h4{font:500 13px/1.55 var(--jb-sans,var(--j-sans,Arial,sans-serif));letter-spacing:0;color:#392e34;margin:1px 0 3px;min-width:0;width:100%}
.jb-kit-open .jb-product-copy h4>a{display:flex;align-items:center;min-height:44px;width:100%;padding:3px 0;text-decoration:none;overflow-wrap:anywhere;color:inherit}
.jb-kit-open .jb-product-role{font:400 11px/1.6 var(--jb-sans,var(--j-sans,Arial,sans-serif));color:#776b71;margin:0;overflow-wrap:anywhere}
.jb-kit-open .jb-product-variant{display:block;font:400 10px/1.65 var(--jb-sans,var(--j-sans,Arial,sans-serif));color:#8b7983;margin:5px 0 0;overflow-wrap:anywhere}
.jb-kit-open .jb-product-shop{display:inline-flex;align-items:center;justify-content:flex-start;min-height:44px;max-width:100%;padding:10px 0 3px;margin-top:auto;gap:5px;font:500 11px/1.55 var(--jb-sans,var(--j-sans,Arial,sans-serif));color:#765468;text-decoration:underline;text-decoration-color:#c8b6c1;text-underline-offset:4px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.jb-kit-open .jb-product-copy ul{list-style:none;margin:8px 0 2px;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.jb-kit-open .jb-product-copy li{font:400 10px/1.55 var(--jb-sans,var(--j-sans,Arial,sans-serif));color:#7a6b72;margin:0;padding:0;overflow-wrap:anywhere}
.jb-kit-open .jb-product-copy li::before{content:'·';margin-right:5px;color:#b59aa8}
.jb-kit-open .jb-kit-technique{display:grid;grid-template-columns:minmax(120px,.45fr) minmax(0,1.55fr);gap:15px 28px;align-items:start;margin:0;padding:23px 0 22px}
.jb-kit-open .jb-kit-technique>.jb-eyebrow,.jb-kit-open .jb-kit-technique>span{font:600 10px/1.6 var(--jb-sans,var(--j-sans,Arial,sans-serif));letter-spacing:.1em;text-transform:uppercase;color:#8b7681}
.jb-kit-open .jb-kit-technique>p{font:400 12px/1.85 var(--jb-sans,var(--j-sans,Arial,sans-serif));color:#72626c;margin:0;max-width:680px}
.jb-kit-open>.jb-kit-footer,.jb-kit-open>footer{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--jb-line,#e6dfe0)}
.jb-kit-open>.jb-kit-footer>small,.jb-kit-open>footer>small,.jb-kit-open>.jb-kit-footer>p,.jb-kit-open>footer>p{flex:1 1 280px;font:400 11px/1.75 var(--jb-sans,var(--j-sans,Arial,sans-serif));color:#877780;min-width:0;max-width:650px;margin:0}
.jb-kit-open>.jb-kit-footer>.jb-button,.jb-kit-open>footer>.jb-button{font-size:11px;min-height:44px;flex:none;margin:0;padding:10px 16px}
.jb-kit-open a:focus-visible{outline:2px solid #946c85;outline-offset:3px;border-radius:2px}
.jb-kit-open .jb-product-photo:focus-visible{outline-offset:3px}
/* Photographic marks enrich the existing lesson list; drawer and camera layout stay intact. */
.jb-lesson .jb-ingredient:has(>.jb-ingredient-photo){grid-template-columns:60px minmax(0,1fr);gap:14px}
.jb-lesson .jb-ingredient-mark.jb-ingredient-photo{display:flex;align-items:center;justify-content:center;width:60px;height:72px;min-width:60px;padding:5px;overflow:hidden;background:#fff;border:1px solid #e8dfe3;border-radius:3px;font:inherit;letter-spacing:normal;flex:none}
.jb-lesson .jb-ingredient-photo>img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;background:none;border:0;transform-origin:var(--jb-photo-origin,50% 50%);transform:translateY(var(--jb-photo-offset,0px)) scale(var(--jb-photo-scale,1))}
@media(hover:hover) and (pointer:fine){.jb-kit-open .jb-product-photo:hover .jb-packshot>img{transform:translateY(calc(var(--jb-photo-offset,0px) - 2px)) scale(calc(var(--jb-photo-scale,1) * 1.025))}.jb-kit-open .jb-product-copy h4>a:hover{text-decoration:underline;text-decoration-color:#bca5b2;text-underline-offset:3px}.jb-kit-open .jb-product-shop:hover{color:#513349;text-decoration-color:currentColor}}
@media(max-width:700px){
.jb-beauty-edit:has(.jb-kit-open) .jb-detail-head h2{font-size:29px}
.jb-beauty-edit:has(.jb-kit-open) .jb-detail-description{margin-top:11px;gap:12px}
.jb-beauty-edit .jb-kit.jb-kit-open{margin-top:18px;padding-top:17px}
.jb-kit-open .jb-kit-heading{gap:10px;align-items:flex-start;margin-bottom:8px}
.jb-kit-open .jb-kit-heading h3{font-size:24px;max-width:265px}
.jb-kit-open .jb-kit-heading>span{font-size:10px;padding-top:5px}
.jb-kit-open .jb-kit-intro{font-size:11px;line-height:1.75;margin-bottom:16px}
.jb-kit-open .jb-product-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 13px}
.jb-kit-open .jb-product-photo{aspect-ratio:4/3;max-height:none}
.jb-kit-open .jb-packshot{padding:12px}
.jb-kit-open .jb-product-index{top:8px;left:8px;font-size:9px}
.jb-kit-open .jb-product-copy{padding-top:10px}
.jb-kit-open .jb-product-brand{font-size:9px;letter-spacing:.085em}
.jb-kit-open .jb-product-copy h4{font-size:12px;line-height:1.6;margin-top:0}
.jb-kit-open .jb-product-role{font-size:10px;line-height:1.65}
.jb-kit-open .jb-product-variant{font-size:10px;line-height:1.6}
.jb-kit-open .jb-product-shop{font-size:10px;min-height:44px;padding-top:8px}
.jb-kit-open .jb-kit-technique{grid-template-columns:1fr;gap:8px;padding:21px 0}
.jb-kit-open .jb-kit-technique>p{font-size:11px;line-height:1.85}
.jb-kit-open>.jb-kit-footer,.jb-kit-open>footer{gap:12px;padding-top:14px;align-items:flex-start}
.jb-kit-open>.jb-kit-footer>small,.jb-kit-open>footer>small,.jb-kit-open>.jb-kit-footer>p,.jb-kit-open>footer>p{flex-basis:100%;font-size:10px;line-height:1.8}
.jb-lesson .jb-ingredient:has(>.jb-ingredient-photo){grid-template-columns:52px minmax(0,1fr);gap:11px}
.jb-lesson .jb-ingredient-mark.jb-ingredient-photo{width:52px;min-width:52px;height:62px;padding:4px}
}
@media(max-width:350px){.jb-kit-open .jb-kit-heading h3{font-size:22px}.jb-kit-open .jb-product-gallery{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:11px}.jb-kit-open .jb-packshot{padding:11px}.jb-kit-open .jb-product-copy h4{font-size:11.5px}.jb-kit-open .jb-product-brand{letter-spacing:.065em}.jb-kit-open .jb-product-shop{font-size:10px}.jb-beauty-edit:has(.jb-kit-open) .jb-detail-head>.jb-button{margin-top:11px}}
@media(prefers-reduced-motion:reduce){.jb-kit-open .jb-packshot>img{transition:none!important;transform:translateY(var(--jb-photo-offset,0px)) scale(var(--jb-photo-scale,1))!important}}
/* Keep the authored fallback inside the image well until a verified image has loaded. */
.jb-kit-open .jb-packshot>svg,.jb-lesson .jb-ingredient-photo>svg{display:block;width:42px;height:52px;max-width:100%;max-height:100%;flex:none}
.jb-kit-open .jb-packshot.has-photo>svg,.jb-lesson .jb-ingredient-photo.has-photo>svg{display:none}
.jb-kit-open .jb-packshot:not(.has-photo)>img,.jb-lesson .jb-ingredient-photo:not(.has-photo)>img{position:absolute;inset:0;opacity:0;pointer-events:none}
.jb-lesson .jb-ingredient-photo{position:relative}
.jb-kit-open .jb-product-optional{position:absolute;top:8px;right:8px;max-width:calc(100% - 42px);padding:3px 6px;border:1px solid #e9e0e2;border-radius:2px;background:#faf9f6ed;color:#87717d;font:400 10px/1.4 var(--jb-sans,var(--j-sans,Arial,sans-serif));white-space:nowrap;pointer-events:none}
.jb-lesson .jb-product-variant{display:block;font:400 10px/1.65 var(--jb-sans,var(--j-sans,Arial,sans-serif));color:#8b7983;margin-top:4px;letter-spacing:0;overflow-wrap:anywhere}
/* The five Glossier sources place complete packages low in a511×640 canvas.
Crop only the blank source margins; retain every lid, spoolie and package edge.
Framing is static even with reduced motion, and shared with lesson thumbnails. */
.jb-kit-open .jb-packshot:is([data-product-photo=moisturiser],[data-product-photo=tint],[data-product-photo=brow],[data-product-photo=cheek],[data-product-photo=lip]),
.jb-lesson .jb-ingredient-photo:is([data-product-photo=moisturiser],[data-product-photo=tint],[data-product-photo=brow],[data-product-photo=cheek],[data-product-photo=lip]){--jb-photo-scale:2;--jb-photo-origin:50% 100%;--jb-photo-offset:5%}
.jb-kit-open .jb-packshot[data-product-photo=moisturiser],.jb-lesson .jb-ingredient-photo[data-product-photo=moisturiser]{--jb-photo-offset:-5%}
.jb-kit-open .jb-packshot[data-product-photo=brow],.jb-lesson .jb-ingredient-photo[data-product-photo=brow]{--jb-photo-scale:1.6}
/* ===== style block 19 ===== */
/* Session her-atelier-design-20260908. An editorial caption inside the image. */
body:has(.j-editorial-caption)>.j-header{background:transparent}
#joyful-app:has(.j-editorial-caption)>.j-header{position:absolute;inset:10px 14px auto auto;background:none;border:0;width:auto;height:44px;padding:0;z-index:8}
#joyful-app:has(.j-editorial-caption)>.j-header .j-wordmark,#joyful-app:has(.j-editorial-caption)>.j-header .j-desktop-nav{display:none}
#joyful-app:has(.j-editorial-caption)>.j-header .j-header-tools{background:#faf9f6e8;border:1px solid #ffffff90;backdrop-filter:blur(14px);border-radius:24px;padding:0 4px}
/* On the studio the masthead is a small floating pill, and the tool icons are put away inside
it. The exception used to be the menu button; there is no menu button any more (2026-09-17),
so the exception went with it and the pill holds the language switch and the one account
control. */
#joyful-app:has(.j-editorial-caption)>.j-header .j-header-tools>.j-icon{display:none}
#joyful-app:has(.j-editorial-caption)>.j-header .j-account-entry{font-size:10px;padding:0 8px}
.j-hero:has(.j-editorial-caption){height:100svh;max-height:none;min-height:480px}
.j-hero .j-scene-top.j-editorial-caption{position:absolute;inset:15px auto auto 22px;padding:0;display:grid;grid-template-columns:auto;justify-items:start;gap:0;width:auto;max-width:calc(100% - 128px);z-index:5;pointer-events:none;color:#fff;filter:drop-shadow(0 1px 6px #14141880)}
.j-editorial-caption::before{content:'';position:absolute;z-index:-1;inset:-28px -28px -23px -30px;background:radial-gradient(ellipse at 32% 24%,#17171d65,transparent 72%);pointer-events:none}
.j-caption-brand{font:400 27px/1.12 var(--j-serif);letter-spacing:-1px;color:#fff;text-shadow:0 1px 4px #14141880;white-space:nowrap}
.j-caption-brand em{font-weight:400}.j-caption-brand>i{font-size:15px;letter-spacing:0;margin-left:4px}
.j-hero .j-editorial-caption .j-location{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:38px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0;color:#fff;pointer-events:auto;text-shadow:0 1px 4px #151318c0!important;max-width:none;width:max-content;color:#fff!important;font-size:10px;white-space:nowrap;flex-wrap:nowrap}
.j-caption-city{font:italic 400 22px/1 var(--j-serif);letter-spacing:-.5px}.j-caption-date{font-size:10px;border-left:1px solid #ffffff80;padding-left:8px}
.j-editorial-caption .j-location>svg,.j-editorial-caption .j-location>iconify-icon{width:12px;height:12px;font-size:12px;opacity:.9;margin-left:0}
.j-editorial-caption #j-weather-small{font-size:10px}
.j-hero .j-editorial-caption .j-media-toggle{display:flex;gap:10px;align-items:center;padding:0;background:none;border:0;border-radius:0;backdrop-filter:none;box-shadow:none;pointer-events:auto}
.j-hero .j-editorial-caption .j-media-toggle button{min-height:44px;min-width:44px;padding:0 0 5px;color:#ffffffb0;background:none;border:0;border-radius:0;font:italic 400 16px/1.2 var(--j-serif);position:relative;text-shadow:0 1px 4px #171418b0;transition:color .2s}
.j-hero .j-editorial-caption .j-media-toggle button[aria-pressed=true]{color:#fff;background:none}
.j-hero .j-editorial-caption .j-media-toggle button::after{content:'';position:absolute;bottom:7px;left:0;right:0;height:1px;background:linear-gradient(90deg,#ffa08a,#d69add,#a2dce4);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.j-hero .j-editorial-caption .j-media-toggle button[aria-pressed=true]::after{transform:scaleX(1)}
.j-hero .j-editorial-caption .j-media-toggle button:disabled{opacity:.45;cursor:not-allowed}
.j-editorial-caption .j-media-toggle>span{font:italic 400 14px var(--j-serif);color:#ffffff75}
.j-editorial-caption :is(button,a):focus-visible{outline:2px solid white;outline-offset:2px}
@media(min-width:701px){.j-hero .j-scene-top.j-editorial-caption{top:25px;left:30px}.j-caption-brand{font-size:34px}.j-caption-city{font-size:27px}.j-caption-brand>i{font-size:18px}.j-hero .j-editorial-caption .j-media-toggle button{font-size:18px}}
@media(max-width:350px){.j-hero .j-scene-top.j-editorial-caption{left:16px;max-width:calc(100% - 106px)}.j-caption-brand{font-size:24px}.j-hero .j-editorial-caption .j-location{gap:6px}.j-caption-city{font-size:20px}.j-caption-date{padding-left:6px}#joyful-app:has(.j-editorial-caption)>.j-header{right:8px}}
@media(prefers-reduced-motion:reduce){.j-editorial-caption *{transition:none!important}}
.j-hero .j-editorial-caption .j-location span{overflow:visible;text-overflow:clip;flex:none;text-shadow:0 1px 4px #151318c0;color:inherit!important}.j-hero .j-editorial-caption .j-location>svg{color:#fff;width:13px;height:13px}
.j-hero .j-editorial-caption .j-presentation-switch{color:#fff!important;display:flex;gap:9px;align-items:center}.j-hero .j-editorial-caption .j-presentation-switch::after{transform:scaleX(1)}.j-presentation-arrow{font:400 13px/1 var(--j-sans);opacity:.8}
/* ===== style block 20 ===== */
/* Photographic wing textures move independently on a lightweight composited layer. */
@media(prefers-reduced-motion:reduce){}
/* ===== style block 21 ===== */
/* Session her-atelier-design-20260908. The complete curved edge, with controls in its hollow. */
.j-hero .j-controls{--j-orbit-size:calc(40px + var(--j-disc-height,148px))}
.j-hero .j-controls .j-disc{height:var(--j-disc-height,148px)!important}
.j-hero .j-controls .j-disc>svg{height:var(--j-disc-height,148px)!important}
.j-hero .j-controls[data-orbit-state=expanded]::after{display:none}
/* Only the glyphs are visible; Details retains a 44px touch target. */
.j-hero .j-controls .j-look-action{left:auto;right:12px;top:-30px;bottom:auto;width:76px;min-width:44px;height:44px;min-height:44px;padding:0;gap:6px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;color:#fff;text-shadow:0 1px 3px #151318,0 0 9px #151318b0;font-weight:500;transition:opacity .2s}
.j-hero .j-controls .j-look-action>span{font-size:12px;font-weight:500;letter-spacing:.01em;color:inherit!important;text-shadow:inherit}
.j-hero .j-controls .j-look-action>iconify-icon{display:block;font-size:12px;transition:transform .2s}
.j-hero .j-controls .j-look-action:hover>iconify-icon{transform:translateY(2px)}
.j-hero .j-controls .j-look-action:focus-visible{outline:1px solid #fff;outline-offset:-5px;border-radius:10px}
/* A focused instrument marks its active point, never an unrelated rectangular frame. */
.j-hero .j-controls .j-disc:focus-visible{outline:none!important}
.j-hero .j-controls:has(.j-disc:focus-visible) .j-lens-rim{stroke:#8052a3;stroke-width:2.5px;stroke-opacity:1;filter:drop-shadow(0 0 2px #fff)}
@media(prefers-reduced-motion:reduce){.j-hero .j-controls .j-look-action,.j-hero .j-controls .j-look-action>iconify-icon{transition:none}}
/* ===== style block 22 ===== */
/* Session her-atelier-design-20260908. Only an active, mounted lesson becomes a fullscreen mirror.
Camera-off lesson and existing product photography styles are not changed. */
.jb-lesson.jmf-active{--jmf-card-height:clamp(190px,30dvh,280px);position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;min-height:0;max-width:none;margin:0;padding:0!important;overflow:hidden;background:#2b2729;color:#30272d;isolation:isolate;overscroll-behavior:none}
.jb-lesson.jmf-active .jb-lesson-head{display:none!important}
.jb-lesson.jmf-active .jb-lesson-layout{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;gap:0}
.jb-lesson.jmf-active .jb-mirror{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;background:none;border:0;box-shadow:none;z-index:0}
.jb-lesson.jmf-active .jb-camera-stage{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;min-height:0;display:block;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0;background:#2b2729;overflow:hidden}
.jb-lesson.jmf-active .jb-camera-video{position:absolute;inset:0;width:100%;height:100%;min-width:100%;min-height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 42%;transform:scaleX(-1);border-radius:0;background:#2b2729}
.jb-lesson.jmf-active .jb-mirror-intro,.jb-lesson.jmf-active .jb-mirror-empty,.jb-lesson.jmf-active .jb-camera-tag,.jb-lesson.jmf-active .jb-camera-controls>.jb-button{display:none!important}
.jb-lesson.jmf-active .jb-camera-controls,.jb-lesson.jmf-active .jb-camera-status,.jb-lesson.jmf-active .jb-camera-note{position:absolute!important;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.jb-lesson.jmf-active .jmf-ui{position:absolute;inset:0;z-index:4;pointer-events:none;font-family:var(--jb-sans,var(--j-sans,Arial,sans-serif));line-height:1.5}
.jmf-ui [hidden]{display:none!important}
.jmf-ui button,.jmf-ui a,.jmf-ui input,.jmf-ui summary,.jmf-coach{pointer-events:auto}
.jmf-top{position:absolute;top:max(12px,env(safe-area-inset-top));left:16px;right:16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;color:#fff}
.jmf-top button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid #ffffff52;border-radius:24px;background:#201b2457;backdrop-filter:blur(12px);color:#fff;font:500 12px/1.3 var(--jb-sans,var(--j-sans,Arial,sans-serif));box-shadow:0 2px 12px #00000012}
.jmf-top .jmf-close{justify-self:start;padding-left:10px}
.jmf-top .jmf-step-button{justify-self:end;gap:5px;font-variant-numeric:tabular-nums;min-width:76px}
.jmf-top svg,.jmf-coach button>svg{display:block;width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jmf-local{font-size:11px;color:#ffffffed;text-shadow:0 1px 8px #0009;white-space:nowrap}
.jmf-coach{position:absolute;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;max-width:600px;height:var(--jmf-card-height);margin-inline:auto;padding:17px 16px 13px;display:grid;grid-template-rows:minmax(0,1fr) 44px;gap:10px;background:#fbf9f8ed;backdrop-filter:blur(16px);border:1px solid #ffffffa8;border-radius:17px;box-shadow:0 9px 38px #21121c25;transition:height 240ms cubic-bezier(.2,.75,.2,1);color:#352b31}
.jmf-handle{position:absolute;top:-23px;left:50%;transform:translateX(-50%);width:92px;height:44px;min-width:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:15px;touch-action:none;cursor:ns-resize}
.jmf-handle>span{display:block;width:34px;height:4px;border-radius:3px;background:#ccb8c4;box-shadow:0 1px 0 #fff9;pointer-events:none}
.jmf-compact{display:flex;flex-direction:column;justify-content:space-between;min-height:0;gap:8px}
.jmf-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:44px}
.jmf-title{font:400 clamp(22px,2.3vw,29px)/1.1 var(--jb-serif,var(--j-serif,Georgia,serif));letter-spacing:-.025em;margin:0;max-width:460px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.jmf-products{position:relative;display:flex;align-items:center;justify-content:center;min-width:48px;width:48px;min-height:48px;height:48px;padding:0;border:0;background:#fff9;border-radius:7px}
.jb-lesson.jmf-active .jmf-product-preview .jb-ingredient-photo{width:34px;min-width:34px;height:40px;padding:2px;margin:0;border:0;border-radius:2px;background:transparent;pointer-events:none}
.jmf-product-count{position:absolute;right:-3px;top:-3px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;background:#87667b;color:#fff;border:2px solid #fbf9f8;border-radius:50%;font-size:10px;line-height:1;pointer-events:none}
.jmf-instruction{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-width:0;min-height:44px;width:100%;padding:0;border:0;border-radius:0;background:none;text-align:left;color:#685761}
.jmf-action-text{font:400 13px/1.6 var(--jb-sans,var(--j-sans,Arial,sans-serif));display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-align:left}
.jmf-more{display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:1.4;color:#826579;flex:none}
.jmf-more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jmf-actions{display:grid;grid-template-columns:minmax(44px,.8fr) minmax(44px,.95fr) minmax(70px,1.3fr);gap:8px;min-height:44px}
.jmf-actions>button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;height:44px;padding:0 8px;border:1px solid #d8c9d3;border-radius:5px;background:#ffffff62;color:#5d4855;font:500 12px/1.35 var(--jb-sans,var(--j-sans,Arial,sans-serif));white-space:nowrap}
.jmf-actions>button:disabled{opacity:.38;cursor:default}
.jmf-actions>.jmf-next{background:#5d3f53;border-color:#5d3f53;color:#fff}
.jmf-status{position:absolute;bottom:calc(var(--jmf-card-height) + max(10px,env(safe-area-inset-bottom)) + 14px);left:18px;right:18px;max-width:560px;margin:0 auto;padding:10px 13px;border-radius:8px;background:#2b2026d9;color:#fff;font-size:12px;line-height:1.55;backdrop-filter:blur(10px);box-shadow:0 3px 14px #0002;pointer-events:none}
.jmf-collapsed{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;min-height:52px;padding:0 17px;border:0;background:none;color:#513e49;text-align:left}
.jmf-collapsed-title{font:400 21px/1.2 var(--jb-serif,var(--j-serif,Georgia,serif));letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jb-lesson.jmf-active[data-jmf-view=collapsed]{--jmf-card-height:54px}
.jb-lesson.jmf-active[data-jmf-view=collapsed] .jmf-coach{display:block;padding:0;border-radius:14px}
.jb-lesson.jmf-active[data-jmf-view=details]{--jmf-card-height:65dvh}
.jb-lesson.jmf-active[data-jmf-view=details] .jmf-coach{max-width:680px;padding-top:6px;gap:10px}
.jmf-details{min-height:0;display:grid;grid-template-rows:44px minmax(0,1fr);gap:3px}
.jmf-details-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;border-bottom:1px solid #e2d7de}
.jmf-details-head>button{display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;min-width:44px;min-height:44px;padding:0 4px 0 0;border:0;background:none;color:#6d4d61;font:500 12px/1.3 var(--jb-sans,var(--j-sans,Arial,sans-serif))}
.jmf-details-head>span{font-size:10px;color:#8c7482;white-space:nowrap}
.jmf-details-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#cebac6 transparent;padding:0 1px 9px;touch-action:pan-y;pointer-events:auto;-webkit-overflow-scrolling:touch}
.jb-lesson.jmf-active .jmf-details .jb-guidance{padding:0;margin:0;min-width:0;position:static}
.jb-lesson.jmf-active .jmf-details .jb-step-tabs{position:sticky;top:0;z-index:2;background:#fbf9f8;margin:0 0 14px;scroll-margin-top:0}
.jb-lesson.jmf-active .jmf-details .jb-step-tabs button{min-width:44px;min-height:48px;padding:5px 0}
.jb-lesson.jmf-active .jmf-details .jb-step-tabs button>small{font-size:9px}
.jb-lesson.jmf-active .jmf-details .jb-step-copy{scroll-margin-top:56px}
.jb-lesson.jmf-active .jmf-details .jb-step-copy h2{font-size:27px;line-height:1.15;max-width:none;margin:8px 0 14px}
.jb-lesson.jmf-active .jmf-details .jb-step-kicker>.jb-read-step,.jb-lesson.jmf-active .jmf-details .jb-step-actions{display:none!important}
.jb-lesson.jmf-active .jmf-details .jb-lesson-status{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.jb-lesson.jmf-active .jmf-details .jb-ingredients{margin:0 0 16px}
.jb-lesson.jmf-active .jmf-details .jb-mirror-check{margin:17px 0}
.jb-lesson.jmf-active .jmf-details .jb-apply{font-size:13px;line-height:1.8}
.jb-lesson.jmf-active .jmf-details .jb-step-tip{font-size:12px;line-height:1.7}
.jmf-ui button:focus-visible,.jmf-ui a:focus-visible,.jmf-ui input:focus-visible,.jmf-ui summary:focus-visible{outline:2px solid #ba89ab;outline-offset:2px}
@media(max-width:700px){.jmf-top{top:max(10px,env(safe-area-inset-top));left:12px;right:12px;grid-template-columns:1fr auto;gap:6px 10px}.jmf-local{grid-row:2;grid-column:1/-1;justify-self:center;font-size:10.5px}.jmf-top button{font-size:11px;min-height:44px}.jmf-coach{padding:16px 14px 12px}.jmf-title{font-size:24px}.jmf-actions>button{font-size:11px}.jmf-details-head>span{font-size:9px}.jmf-product-count{font-size:10px}.jmf-status{font-size:11px}}
@media(max-width:350px),(max-height:620px){.jmf-coach{padding:14px 12px 11px;gap:8px}.jmf-title{font-size:21px;line-height:1.12}.jmf-heading{gap:8px}.jmf-products{width:46px;height:46px;min-width:46px;min-height:46px}.jmf-action-text{-webkit-line-clamp:2;font-size:12px;line-height:1.45}.jmf-instruction{gap:4px}.jmf-more{font-size:10.5px}.jmf-actions{gap:6px}.jmf-actions>button{padding-inline:4px;font-size:10.5px}.jmf-details-head>span{display:none}.jb-lesson.jmf-active .jmf-details .jb-step-copy h2{font-size:25px}.jmf-details-scroll{padding-inline:0}}
@media(prefers-reduced-motion:reduce){.jb-lesson.jmf-active .jmf-coach,.jb-lesson.jmf-active .jmf-ui *{transition:none!important;scroll-behavior:auto!important}}
/* ===== style block 23 ===== */
/* Session her-atelier-design-20260908. Editorial beauty shelf / local estimate. */
.jbs-card-controls{border-top:1px solid #dedbd7;margin-top:12px;padding-top:10px;color:#191919}
.jbs-price-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.jbs-price-copy{min-width:0;display:grid;gap:3px}.jbs-price{font:600 15px/1.25 Manrope,sans-serif;letter-spacing:-.025em}.jbs-market{font:400 9px/1.4 Manrope,sans-serif;color:#777}
.jbs-heart,.jbs-close{display:inline-grid;place-items:center;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;border:1px solid #d6d2ce;background:#fff;color:#181818;border-radius:0;font:400 26px/1 Georgia,serif;cursor:pointer;flex-shrink:0}
.jbs-heart[aria-pressed=true]{color:#bb243c;border-color:#bb243c}.jbs-stock{display:block;font:400 9px/1.45 Manrope,sans-serif;color:#6e6c69;margin-top:4px}.jbs-stock.jbs-unavailable{color:#9e3341}
.jbs-owned{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font:500 10px/1.4 Manrope,sans-serif;color:#252525;margin:4px 0 0;padding:2px 0}
.jbs-owned input{margin:0;width:17px;height:17px;flex-shrink:0;accent-color:#171717;cursor:pointer}
.jb-kit-footer.jbs-footer{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px;padding-top:20px;align-items:stretch;width:100%}
.jbs-cost-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.jbs-cost-copy{display:grid;gap:5px;min-width:0}
.jbs-eyebrow{display:block;font:600 9px/1.45 Manrope,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#72706d}
.jbs-cost-amount{font:500 clamp(23px,3vw,32px)/1.15 'Bodoni Moda',Georgia,serif;letter-spacing:-.02em;color:#181818}.jbs-cost-context{font:400 9px/1.5 Manrope,sans-serif;color:#76736f}
.jbs-actions{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px}.jbs-button,.jbs-link-button{min-height:44px;min-width:44px;padding:10px 13px;display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:6px;border:1px solid #ccc8c3;border-radius:0;background:#fff;color:#191919;font:600 10px/1.4 Manrope,sans-serif;cursor:pointer;text-decoration:none;white-space:normal}
.jbs-button.jbs-primary{background:#171717;color:#fff;border-color:#171717}.jbs-link-button{border:0;background:none;padding:8px;font-size:10px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;flex-shrink:0}
.jbs-button:focus-visible,.jbs-link-button:focus-visible,.jbs-heart:focus-visible,.jbs-close:focus-visible,.jbs-owned:has(input:focus-visible){outline:2px solid #b32d47;outline-offset:3px}.jbs-button:hover,.jbs-heart:hover{border-color:#171717}.jbs-button.jbs-primary:hover{background:#373737}
.jb-kit-footer.jbs-footer .jbs-storage-note{font:400 9px/1.6 Manrope,sans-serif;max-width:none;margin:0;color:#76736f}
dialog.jbs-dialog{position:fixed;inset:0;box-sizing:border-box;width:min(680px,calc(100vw - 32px));max-width:680px;max-height:calc(100svh - 32px);margin:auto;padding:26px;border:1px solid #d7d2cc;border-radius:0;background:#faf9f7;color:#191919;overflow:auto;overscroll-behavior:contain;box-shadow:0 20px 70px #0003;font-family:Manrope,sans-serif}
dialog.jbs-dialog::backdrop{background:rgba(18,16,16,.45);backdrop-filter:blur(6px)}
.jbs-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}.jbs-dialog-head h2{margin:6px 0 0;font:400 clamp(31px,6vw,46px)/1.08 'Bodoni Moda',Georgia,serif;letter-spacing:-.025em}.jbs-close{font-size:28px;background:transparent;border:0}
.jbs-dialog-intro{margin:0 0 19px;font:400 12px/1.65 Manrope,sans-serif;color:#66615d}.jbs-estimate-lines{display:grid;gap:0}
.jbs-estimate-item{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:8px 13px;padding:16px 0;border-top:1px solid #dedbd7;min-width:0}.jbs-thumb{width:62px;height:78px;background:#fff;grid-row:1/3;overflow:hidden}.jbs-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.jbs-line-copy{display:grid;align-content:start;gap:5px;min-width:0}.jbs-line-name{font:600 12px/1.4 Manrope,sans-serif;color:#191919;text-decoration:none;overflow-wrap:anywhere}.jbs-line-variant,.jbs-line-stock{font:400 9px/1.45 Manrope,sans-serif;color:#78736e}.jbs-line-price{display:grid;align-content:start;justify-items:end;gap:5px;text-align:right;max-width:126px}.jbs-line-price strong{font:600 13px/1.4 Manrope,sans-serif}.jbs-line-price small{font:400 9px/1.45 Manrope,sans-serif;color:#77716b}.jbs-line-controls{grid-column:2/4;display:flex;align-items:center;justify-content:space-between;gap:10px}.jbs-line-controls .jbs-owned{margin:0}
.jbs-dialog-total{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #171717;margin-top:12px;padding:19px 0 9px}.jbs-dialog-total>span{font:500 11px/1.5 Manrope,sans-serif}.jbs-dialog-total>strong{font:500 28px/1.1 'Bodoni Moda',Georgia,serif;text-align:right}
.jbs-caveat{font:400 10px/1.6 Manrope,sans-serif;color:#756f69;margin:9px 0}.jbs-empty{padding:32px 0;font:400 20px/1.45 'Bodoni Moda',Georgia,serif}.jbs-clear{margin-top:14px;padding-left:0;color:#963149}
.jbs-share-text{box-sizing:border-box;display:block;width:100%;min-height:200px;max-height:42svh;resize:vertical;border:1px solid #d1ccc6;border-radius:0;background:#fff;color:#282522;padding:15px;font:400 12px/1.6 Manrope,sans-serif}.jbs-dialog-actions{display:flex;gap:9px;margin-top:16px}.jbs-dialog-actions>*{flex:1}.jbs-copy-status{font:400 11px/1.5 Manrope,sans-serif;color:#67615b}
@media(max-width:500px){dialog.jbs-dialog{width:calc(100vw - 20px);max-height:calc(100svh - 20px);padding:18px}.jbs-dialog-head{margin-bottom:17px}.jbs-estimate-item{grid-template-columns:48px minmax(0,1fr);gap:8px 11px}.jbs-thumb{width:48px;height:66px;grid-row:1/3}.jbs-line-price{grid-column:2;justify-items:start;text-align:left;max-width:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 10px}.jbs-line-controls{grid-column:2}.jbs-line-name{font-size:11px}.jbs-line-variant{overflow-wrap:anywhere}.jbs-dialog-total{align-items:flex-start}.jbs-dialog-total>strong{font-size:24px;max-width:170px}.jbs-cost-amount{font-size:26px}.jbs-cost-row>.jbs-link-button{max-width:98px}.jbs-actions{gap:6px}.jbs-button{font-size:9px;padding:9px 8px}.jbs-owned{font-size:9px}}
@media(prefers-reduced-motion:reduce){dialog.jbs-dialog{scroll-behavior:auto}}
/* ===== style block 24 ===== */
/* Session her-atelier-design-20260908. One personal Edit, five readable chapters. */
.jpr-book{--jpr-ink:#302b2d;--jpr-muted:#7c7174;--jpr-line:#e3dcd7;--jpr-paper:#faf9f6;color:var(--jpr-ink);font-family:var(--j-sans,Manrope,Arial,sans-serif);padding-top:24px}.jpr-book *{box-sizing:border-box}.jpr-book [hidden]{display:none!important}.jpr-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.jpr-eyebrow{display:block;color:var(--jpr-muted);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.jpr-toolbar h3{font:400 35px/1.1 var(--j-serif,'Bodoni Moda',Georgia,serif);letter-spacing:-.04em;margin:8px 0 0}.jpr-toolbar h3 em{font-weight:400}.jpr-modes{display:flex;border-bottom:1px solid var(--jpr-line);gap:8px}.jpr-modes button{min-height:44px;min-width:44px;padding:8px 13px;display:flex;align-items:center;gap:7px;background:transparent;border:0;border-bottom:2px solid transparent;font:500 11px inherit;color:var(--jpr-muted)}.jpr-modes button[aria-pressed=true]{color:var(--jpr-ink);border-bottom-color:#a76f86}.jpr-book iconify-icon{width:16px;height:16px;font-size:16px;flex:none}.jpr-reader{outline:none;touch-action:pan-y;overflow:hidden;background:#f0ece8;border:1px solid var(--jpr-line);box-shadow:0 12px 35px #44313708}.jpr-page{min-width:0}.jpr-page h4{font:400 clamp(34px,5vw,61px)/1.05 var(--j-serif,'Bodoni Moda',Georgia,serif);letter-spacing:-.035em;margin:16px 0 24px}.jpr-page h4 em{font-weight:400}.jpr-cover{position:relative;min-height:590px;height:min(72vh,760px);isolation:isolate;background:#b7aaa1}.jpr-visual{position:relative;overflow:hidden;background:#d7cec8;min-width:0;min-height:0}.jpr-image-slot{position:absolute;inset:0;overflow:hidden}.jpr-image-slot>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%}.jpr-image-unavailable{display:grid;place-content:center;padding:25px;color:#76686d;font-size:12px}.jpr-image-note{position:absolute;right:12px;bottom:10px;color:#fff;font-size:9px;line-height:1.5;text-shadow:0 1px 6px #0008;max-width:75%;text-align:right}.jpr-cover-photo{position:absolute;inset:0}.jpr-cover-photo .jpr-image-slot>img{object-fit:contain}.jpr-cover::after{position:absolute;inset:0;content:'';z-index:0;background:linear-gradient(180deg,#332c253d,transparent 22%,transparent 52%,#3027208a)}.jpr-cover-masthead{position:absolute;top:25px;left:30px;right:30px;color:#fff;font:400 clamp(40px,6.5vw,77px)/1 var(--j-serif,'Bodoni Moda',Georgia,serif);letter-spacing:-.065em;z-index:1}.jpr-cover-masthead em{font-weight:400}.jpr-cover-masthead>span{display:block;font:500 9px/2.2 var(--j-sans,Manrope,sans-serif);letter-spacing:.25em;margin-top:8px}.jpr-cover-copy{position:absolute;bottom:36px;left:30px;right:30px;color:#fff;z-index:1}.jpr-cover-copy>span{font-size:10px;letter-spacing:.08em}.jpr-cover-copy h4{font-size:clamp(40px,5.5vw,66px);margin:12px 0 17px;max-width:75%}.jpr-cover-copy>p{font-size:11px;line-height:1.8;margin:0}.jpr-cover-index{position:absolute;right:20px;bottom:27px;z-index:1;color:#fff;font-size:9px;letter-spacing:.13em;writing-mode:vertical-rl}.jpr-spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:590px;background:var(--jpr-paper)}.jpr-outfit-photo .jpr-image-slot>img{object-fit:contain}.jpr-editorial{padding:34px 30px;min-width:0}.jpr-editorial>p{font-size:12px;line-height:1.9;color:var(--jpr-muted);margin:15px 0 22px}.jpr-look-facts{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:10px;color:#947d88;border-block:1px solid var(--jpr-line);padding:13px 0;margin:22px 0}.jpr-item-list{list-style:none;margin:0;padding:0}.jpr-item-list>li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--jpr-line)}.jpr-item-list h5{font-size:11px;font-weight:500;line-height:1.5;margin:0 0 3px}.jpr-item-list small{font-size:9px;line-height:1.6;color:var(--jpr-muted);display:block}.jpr-item-list strong{font-size:10px;font-weight:500;white-space:nowrap}.jpr-item-art{display:grid;place-content:center;position:relative;overflow:hidden;width:42px;height:58px;background:#ece7e1;color:#b3a29e;font:400 21px var(--j-serif,Georgia,serif)}.jpr-item-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.jpr-item-art.jpr-atlas{background-image:none;background-size:300% 200%}.jpr-item-art.jpr-atlas>span{visibility:hidden}.jpr-edit-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:7px 0;border:0;background:transparent;color:#89677b;font:500 11px var(--j-sans,Manrope,sans-serif);margin-top:10px}.jpr-beauty-photo .jpr-image-slot>img{transform-origin:50% 0%;transform:scale(2.45);object-fit:cover}.jpr-hair-crop .jpr-image-slot>img{transform:scale(2.1)}.jpr-colors{display:flex;gap:5px;margin:18px 0}.jpr-colors i{height:18px;width:18px;border:1px solid #00000010;border-radius:50%}.jpr-beauty-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0}.jpr-beauty-products>div{min-width:0}.jpr-packshot{display:block;position:relative;height:85px;background:#f5f2ee;margin-bottom:9px;overflow:hidden}.jpr-packshot>img{width:100%;height:100%;object-fit:contain}.jpr-beauty-products>div>span:not(.jpr-packshot){display:block;font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#99828e}.jpr-beauty-products strong{display:block;font-size:9px;line-height:1.7;font-weight:500;margin-top:3px}.jpr-editorial>.jpr-pending{font-size:10px;color:#97738c;border-left:2px solid #c5a3bb;padding-left:10px}.jpr-shopping{padding:42px 60px;background:var(--jpr-paper);max-width:850px;margin:auto}.jpr-shopping-head h4{margin:13px 0 17px}.jpr-shopping-head p{font-size:11px;color:var(--jpr-muted);margin-bottom:30px}.jpr-shopping .jpr-item-list>li{grid-template-columns:49px minmax(0,1fr) auto;gap:15px}.jpr-shopping .jpr-item-art{width:49px;height:64px}.jpr-total{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:24px 0 13px}.jpr-total>span{font-size:11px;color:var(--jpr-muted)}.jpr-total>strong{font:400 39px var(--j-serif,Georgia,serif)}.jpr-price-note{font-size:10px;line-height:1.8;color:#917f86;margin:0 0 22px}.jpr-shopping-beauty{display:grid;grid-template-columns:1fr 1fr;gap:15px}.jpr-shopping-beauty>button{display:flex;align-items:flex-start;flex-direction:column;gap:10px;min-height:70px;padding:15px;border:1px solid var(--jpr-line);background:transparent;text-align:left}.jpr-shopping-beauty span{font:400 20px var(--j-serif,Georgia,serif)}.jpr-shopping-beauty strong{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--jpr-muted);font-weight:400}.jpr-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.jpr-pagination>button{display:grid;place-items:center;min-width:44px;min-height:44px;background:transparent;border:1px solid var(--jpr-line);color:var(--jpr-ink)}.jpr-pagination button:disabled{opacity:.3}.jpr-dots{display:flex;justify-content:center}.jpr-dots>button{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0}.jpr-dots>button>span{width:5px;height:5px;background:#c4b7b5;border-radius:50%;transition:transform 180ms}.jpr-dots>button[aria-current=page]>span{background:#a16682;transform:scale(1.5)}.jpr-page-caption{text-align:center;font-size:9px;letter-spacing:.1em;color:var(--jpr-muted);margin-top:2px}.jpr-export{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:9px;padding:26px 0 10px}.jpr-export button{display:flex;justify-content:center;align-items:center;gap:8px;min-height:47px;min-width:44px;padding:9px;border:1px solid var(--jpr-line);background:transparent;color:var(--jpr-ink);font:500 11px var(--j-sans,Manrope,sans-serif)}.jpr-export [data-jp=pdf]{background:#493944;color:#fff;border-color:#493944}.jpr-status{font-size:11px;line-height:1.7;color:#8e667f;min-height:0;margin:10px 0}.jpr-status:empty{display:none}.jpr-notes{border-top:1px solid var(--jpr-line);margin-top:10px}.jpr-notes summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:10px;color:var(--jpr-muted)}.jpr-notes p{font-size:10px;line-height:1.8;color:var(--jpr-muted);margin:0 0 10px}.jpr-book button{cursor:pointer}.jpr-book button:focus-visible,.jpr-book summary:focus-visible,.jpr-reader:focus-visible{outline:2px solid #a76f94;outline-offset:3px}.jpr-film{position:relative;min-height:590px;height:min(72vh,760px);background:#b3a8a0;isolation:isolate}.jpr-film-poster,.jpr-film-stage{position:absolute;inset:0}.jpr-film-poster .jpr-image-slot>img{object-fit:contain;filter:brightness(.65)}.jpr-film-stage{visibility:hidden;background:#222}.jpr-video{width:100%;height:100%;object-fit:contain;display:block}.jpr-film-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px;text-align:center;color:#fff}.jpr-film-copy .jpr-eyebrow{color:#e8d9df}.jpr-film-copy h4{margin-bottom:18px}.jpr-film-copy p{font-size:12px;line-height:1.8;max-width:270px}.jpr-film-play{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border:1px solid #ffffff9c;background:#fbf9f622;color:#fff;font:500 11px var(--j-sans,Manrope,sans-serif);backdrop-filter:blur(8px);margin-top:10px}.jpr-playing .jpr-film-stage{visibility:visible}.jpr-playing .jpr-film-copy{display:none}.jpr-playing .jpr-film-poster{visibility:hidden}.jpr-arrive{animation:jpr-enter 220ms ease-out}@keyframes jpr-enter{from{opacity:.5;transform:translateX(7px)}to{opacity:1;transform:none}}
@media(max-width:700px){.jpr-book{padding-top:20px}.jpr-toolbar{gap:12px;margin-bottom:16px;align-items:flex-end}.jpr-toolbar h3{font-size:29px}.jpr-toolbar .jpr-eyebrow{font-size:7px;letter-spacing:.1em}.jpr-modes{gap:0;flex:none}.jpr-modes button{font-size:10px;padding-inline:9px;gap:5px}.jpr-modes button iconify-icon{display:none}.jpr-cover,.jpr-film{min-height:410px;height:58svh;max-height:590px}.jpr-cover-masthead{font-size:45px;top:20px;left:20px;right:20px}.jpr-cover-masthead>span{font-size:7px;letter-spacing:.2em}.jpr-cover-copy{left:20px;right:20px;bottom:30px}.jpr-cover-copy h4{font-size:40px;max-width:90%}.jpr-cover-copy>p{font-size:10px}.jpr-cover-index{right:13px;font-size:8px}.jpr-image-note{font-size:8px;right:10px;bottom:8px}.jpr-spread{display:flex;flex-direction:column;min-height:0}.jpr-spread>.jpr-visual{height:350px;flex:none}.jpr-outfit-photo{height:390px!important}.jpr-editorial{padding:25px 21px}.jpr-page h4{font-size:38px;margin-bottom:18px}.jpr-editorial>p{font-size:11px;line-height:1.9}.jpr-beauty-photo .jpr-image-slot>img{object-fit:contain;transform:scale(2.55)}.jpr-hair-crop .jpr-image-slot>img{transform:scale(2.25)}.jpr-packshot{height:77px}.jpr-shopping{padding:28px 21px}.jpr-shopping .jpr-item-list>li{grid-template-columns:36px minmax(0,1fr) auto;gap:10px}.jpr-shopping .jpr-item-art{width:36px;height:49px}.jpr-shopping .jpr-item-list h5{font-size:10px}.jpr-shopping .jpr-item-list small{font-size:8px}.jpr-shopping .jpr-item-list strong{font-size:9px}.jpr-shopping-beauty{gap:10px}.jpr-shopping-beauty>button{padding:12px 10px}.jpr-shopping-beauty span{font-size:19px}.jpr-shopping-beauty strong{font-size:9px}.jpr-export{gap:7px;padding-top:22px}.jpr-export button{font-size:10px;gap:6px;padding-inline:6px}.jpr-export iconify-icon{width:14px;height:14px;font-size:14px}.jpr-dots>button{width:37px}.jpr-film-copy{padding:24px}.jpr-film-copy p{font-size:11px}.jpr-notes p{font-size:9px}}
@media(max-width:350px){.jpr-toolbar h3{font-size:25px}.jpr-modes button{padding-inline:7px;font-size:9px}.jpr-cover,.jpr-film{min-height:380px;height:66svh}.jpr-cover-copy h4{font-size:36px}.jpr-export button{font-size:9px;gap:5px}.jpr-export iconify-icon{display:none}.jpr-dots>button{width:35px}.jpr-pagination{gap:4px}.jpr-editorial,.jpr-shopping{padding-inline:17px}.jpr-total>strong{font-size:34px}}
.jpr-reader{max-height:min(72svh,760px);overflow:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#cdbcc6 transparent}.jpr-modes button{font:500 11px var(--j-sans,Manrope,Arial,sans-serif)}
.jpr-book [data-jpr-photo=moisturiser]>img{transform:translateY(-5%) scale(2);transform-origin:50% 100%}.jpr-book [data-jpr-photo=tint]>img,.jpr-book [data-jpr-photo=cheek]>img,.jpr-book [data-jpr-photo=lip]>img{transform:translateY(5%) scale(2);transform-origin:50% 100%}.jpr-book [data-jpr-photo=brow]>img{transform:translateY(5%) scale(1.6);transform-origin:50% 100%}
.jpr-beauty-products>a{display:block;min-width:44px;min-height:44px;text-decoration:none;color:inherit}.jpr-beauty-products>a>span:not(.jpr-packshot){display:block;font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:#99828e}.jpr-kit-link{display:flex;align-items:center;gap:6px;min-height:44px;background:none;border:0;padding:0;color:#89677b;font:500 10px var(--j-sans,Manrope,sans-serif);margin-top:-14px}.jpr-shopping-category{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:500;color:#a08192;margin:30px 0 4px}.jpr-kit-list a{display:flex;flex-direction:column;justify-content:center;min-height:44px;color:inherit;text-decoration:none}.jpr-kit-list a>span{font-size:8px;color:#987a8b;margin-bottom:3px}.jpr-kit-list a>strong{font-size:10px;line-height:1.6;font-weight:500;white-space:normal}.jpr-book a:focus-visible{outline:2px solid #a76f94;outline-offset:3px}
@media(max-width:700px){.jpr-modes button{font-size:10px}}@media(max-width:350px){.jpr-modes button{font-size:9px}}
@media(max-width:700px){.jpr-book{padding-top:16px}.jpr-toolbar{margin-bottom:12px;min-height:44px}.jpr-toolbar .jpr-eyebrow{display:none}.jpr-toolbar h3{margin-top:0}.jpr-reader{height:min(58svh,calc(100svh - 330px));min-height:300px}.jpr-cover,.jpr-film{height:100%;min-height:0;max-height:none}.jpr-page:has(>.jpr-cover),.jpr-page:has(>.jpr-film){height:100%}.jpr-export{padding-top:16px;padding-bottom:8px}.jpr-cover-copy h4{overflow-wrap:anywhere}}
@media(max-width:700px) and (max-height:650px){.jpr-cover-masthead{font-size:35px;top:16px;left:17px}.jpr-cover-copy{bottom:24px;left:17px}.jpr-cover-copy h4{font-size:31px;margin:8px 0 10px}.jpr-cover-copy>span{font-size:9px}.jpr-cover-copy>p{font-size:9px}.jpr-film-copy h4{font-size:31px;margin:8px 0}.jpr-film-copy p{font-size:10px}.jpr-film-play{margin-top:6px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.jpr-book *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ===== style block 26 ===== */
/* 2026-09-09: the split desktop composition (portrait left, instrument right) was rejected by the
owner and superseded by block 34, which keeps the mobile principle on every screen. */
/* ===== style block 27 ===== */
/* Refinement 2026-09-09. Expression study layers: two square portraits from the reviewed
atlas, cover-fitted to the scene and cross-faded while the mood ring turns. */
/* The expression study, while the mood ring turns.
*
* It was laid over the photograph with `background:none` and an opacity that eased from 0 to
* 1, so for a third of a second on every turn there were two pictures of her on screen at
* once — a second face fading in over the first. That is the doubling the owner reported, and
* it is the last of it (2026-09-11).
*
* It is opaque now. While it is up it *is* the picture; when it is not, it is not there at
* all. Nothing is ever blended with a photograph. */
@media(prefers-reduced-motion:reduce){}
/* ===== style block 30 ===== */
/* 2026-09-08 · city search inside the calendar sheet; the weather location is now chosen. */
.j-city{margin:22px 0 4px;padding-top:18px;border-top:1px solid #e3dfd6}
.j-city .j-field{margin:0 0 12px}
.j-city .j-option-grid{margin:0 0 14px;max-height:222px;overflow-y:auto}
.j-city .j-option-grid[hidden]{display:none}
.j-city .j-option{min-height:52px}
.j-city .j-text-button{display:inline-flex}
.j-city .j-note{margin-top:12px}
/* ===== style block 31 ===== */
/* Refinement 2026-09-09. Desktop readout above the instrument, and a quiet entrance for
chapter panels. Mobile keeps the approved layout: the readout is hidden below 1001px. */
.j-desk-readout{display:none}
/* Desktop readout retired 2026-09-09 (block 34); the element stays for the RU/EN layer. */
.jew-panel:not([hidden]){animation:j-panel-in .36s cubic-bezier(.2,.7,.2,1) both}
@keyframes j-panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jew-panel:not([hidden]){animation:none}}
/* ===== style block 32 ===== */
/* Refinement 2026-09-09. Lookbook cover fills its frame on wide screens. */
@media (min-width:1001px){
.jpr-cover-photo .jpr-image-slot>img{object-fit:cover;object-position:50% 10%}
}
/* ===== style block 33 ===== */
/* Refinement 2026-09-09. The living instrument. Rings grow under the hand (hover eases through
registered properties, engagement follows the JS spring in --j-orbit-growth), tick at every
detent, and sway once to invite a first turn. The Details button is retired: chapters sit
under the desktop instrument, mobile scrolls naturally. The photograph moves like a fashion
film: drift and pointer parallax (08-photo-motion), scroll parallax (--j-scroll from
29-cinema), and a crossfade ghost when the frame changes. */
@property --j-hover-outer{syntax:'';inherits:true;initial-value:0}
@property --j-hover-middle{syntax:'';inherits:true;initial-value:0}
@property --j-hover-inner{syntax:'';inherits:true;initial-value:0}
.j-hero .j-controls .j-disc{--j-ring-base:32px;transform-origin:50% 100%!important;transform:translateY(calc(-5px * var(--j-orbit-growth,0))) scale(calc(1 + .06 * var(--j-orbit-growth,0)))!important;transition:--j-hover-outer .32s cubic-bezier(.2,.8,.2,1),--j-hover-middle .32s cubic-bezier(.2,.8,.2,1),--j-hover-inner .32s cubic-bezier(.2,.8,.2,1);will-change:transform}
/* Keyed by band, so the beauty dial's three rings light up exactly as the look dial's do. */
.j-hero .j-disc[data-hover-band=outer]{--j-hover-outer:1;cursor:grab}
.j-hero .j-disc[data-hover-band=middle]{--j-hover-middle:1;cursor:grab}
.j-hero .j-disc[data-hover-band=inner]{--j-hover-inner:1;cursor:grab}
.j-hero .j-disc.j-dragging{cursor:grabbing}
/* One growth mechanic for every ring in the atelier, keyed by band rather than by the name of
an axis. The rules used to name the look dial's axes — calendar, mood, occasion — so the
beauty dial's three rings matched nothing and their type never grew, while the look dial's
did. Two instruments, one hand (owner, 2026-09-10). */
.j-hero .j-disc[data-engaged-axis=outer]{--j-grow-outer:var(--j-orbit-growth,0)}
.j-hero .j-disc[data-engaged-axis=middle]{--j-grow-middle:var(--j-orbit-growth,0)}
.j-hero .j-disc[data-engaged-axis=inner]{--j-grow-inner:var(--j-orbit-growth,0)}
.j-hero .j-controls :is(.j-disc [data-band=outer] .j-ring-labels,.j-lens-layer[data-band=outer]) text{font-size:calc(12px + 2px * var(--j-hover-outer,0) + 3px * var(--j-grow-outer,0))}
.j-hero .j-controls :is(.j-disc,.j-lens-layer) .j-date-weekday{font-size:calc(7px + .5px * var(--j-hover-outer,0) + 1px * var(--j-grow-outer,0))}
.j-hero .j-controls :is(.j-disc [data-band=middle] .j-ring-labels,.j-lens-layer[data-band=middle]) text{font-size:calc(12px + 2px * var(--j-hover-middle,0) + 3px * var(--j-grow-middle,0))}
.j-hero .j-controls :is(.j-disc [data-band=inner] .j-ring-labels,.j-lens-layer[data-band=inner]) text{font-size:calc(10px + 2px * var(--j-hover-inner,0) + 2.5px * var(--j-grow-inner,0))}
/* The engaged band keeps its colour; the other two step back a little. */
.j-hero .j-disc[data-engaged-axis=middle] [data-band=outer] .j-ring-track,.j-hero .j-disc[data-engaged-axis=inner] [data-band=outer] .j-ring-track,.j-hero .j-disc[data-engaged-axis=middle] [data-band=outer] .j-ring-track,.j-hero .j-disc[data-engaged-axis=inner] [data-band=outer] .j-ring-track{opacity:calc(1 - .3 * var(--j-orbit-growth,0))}
.j-hero .j-disc[data-engaged-axis=outer] [data-band=middle] .j-ring-sectors,.j-hero .j-disc[data-engaged-axis=inner] [data-band=middle] .j-ring-sectors{opacity:calc(.96 - .3 * var(--j-orbit-growth,0))}
.j-hero .j-disc[data-engaged-axis=outer] [data-band=inner] .j-ring-track,.j-hero .j-disc[data-engaged-axis=middle] [data-band=inner] .j-ring-track{opacity:calc(.93 - .3 * var(--j-orbit-growth,0))}
/* Detent tick: the reading dot swells for a moment. */
@media (hover:hover){.jmo-root .jmo-tab:hover{cursor:grab}.jmo-root .jmo-tab:hover .jmo-label{fill:#282322}}
/* Details button retired; the instrument's top row keeps three cells. */
.j-hero .j-look-action{display:none!important}
.j-hero .j-controls{grid-template-columns:58px minmax(132px,1fr) minmax(44px,110px)}
/* First-visit invitation: a small pill above the rings while they sway. */
.j-hero .j-dial-hint .j-hint-long{display:none}
.j-hero .j-controls[data-invite=true] .j-dial-hint{display:block;position:absolute;left:50%;top:-50px;bottom:auto;right:auto;transform:translateX(-50%);z-index:5;margin:0;height:auto;padding:9px 16px;border-radius:22px;background:#faf9f6f0;box-shadow:0 4px 18px #2b241518;font-size:10px;letter-spacing:.06em;color:#4f4744;white-space:nowrap;text-align:center;line-height:1.3;animation:j-hint-in .6s cubic-bezier(.2,.8,.2,1) both 1.1s;pointer-events:none}
@keyframes j-hint-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
/* Chapters: a contents line under the desktop instrument, mirroring the wizard steps. */
.j-chapters{display:none}
/* Scroll parallax and the instrument's exit. */
.j-hero .j-scene{transform:translate3d(0,calc(var(--j-scroll,0) * 24%),0) scale(calc(1 + var(--j-scroll,0) * .05));transform-origin:50% 100%;will-change:transform}
.j-hero .j-controls{opacity:calc(1 - var(--j-scroll,0) * 1.5)}
.j-hero .j-scene .j-framing>.j-portrait-ghost{z-index:1;pointer-events:none}
/* Desktop chapters/hint variants retired 2026-09-09; block 34 keeps the mobile pill everywhere. */
@media (prefers-reduced-motion:reduce){
.j-hero .j-controls .j-disc{transform:none!important;transition:none}
.j-hero .j-scene{transform:none}
.j-hero .j-controls{opacity:1}
.j-hero .j-controls[data-invite=true] .j-dial-hint{animation:none}
}
/* ===== style block 34 ===== */
/* Refinement 2026-09-09 (owner: "the same principle as on the phone"). Every screen wider than
700px follows the mobile composition: the photograph fills the viewport, the caption sits
top-left, the instrument spans the full width at the bottom with a real curve. The base look
uses the wide editorial frame (1672×941); other prepared portraits are cover-cropped to head
and shoulders; the clip (480×864) is contained over a blurred wide backdrop. Page sections
snap: hero, chapters, footer. */
html:has(#joyful-app[data-studio=true] .j-hero){scroll-snap-type:y mandatory}
#joyful-app[data-studio=true] .j-hero{scroll-snap-align:start;scroll-snap-stop:always}
#joyful-app[data-studio=true] .j-details-root{scroll-snap-align:start;scroll-margin-top:0}
#joyful-app[data-studio=true] .j-page-footer{scroll-snap-align:end}
@media (min-width:701px){
.j-hero,.j-hero:has(.j-editorial-caption){background:#dedad2}
.j-hero::before{content:none}
.j-hero .j-scene{position:absolute;inset:0;left:0;right:0;top:0;bottom:0;width:auto;max-width:none;min-width:0;background:#dedad2}
.j-hero .j-scene .j-framing::before{content:none}
/* The whole photograph, never a trimmed one. A 9:16 frame cover-cropped into a phone's
scene box lost about a seventh of its height — her feet, or the top of her hair, depending
where the crop was anchored. The room left over is filled by the frame's own blur behind
(owner, 2026-09-11: "должны отображаться вертикальные, но без обрезания"). */
.j-hero .j-scene .j-framing>.j-portrait,.j-hero .j-scene .j-framing>.j-portrait-ghost{object-fit:contain!important;object-position:50% 50%!important}
/* 2026-09-17 · a landscape frame gets the whole stage (`width:100%` above), and holding it
to `contain` there left the same grey bands the phone had — 1672x941 in a 1440x900 window
letterboxes by 1.11. Cover crops 10% of its width instead, which is street, not her. A
*portrait* frame on a desktop is the one case still held to its own proportions: covering
0.56 into 1.6 would show a band of her waist, and the narrowed column above is the answer
to that until the look has a landscape twin. */
.j-hero .j-scene[data-wide=true] .j-framing>.j-portrait,.j-hero .j-scene[data-wide=true] .j-framing>.j-portrait-ghost{object-fit:cover!important;object-position:50% 50%!important}
.j-hero .j-scene[data-wide=true] .j-framing>.j-live-video{object-fit:cover!important;object-position:50% 50%!important}
.j-hero .j-scene .j-framing>.j-live-video{object-fit:contain!important;object-position:50% 50%!important;background:transparent}
.j-hero .j-scene[data-motion-mode=video] .j-framing::before,.j-hero .j-scene[data-motion-mode=pending] .j-framing::before{content:'';position:absolute;inset:-48px;z-index:0;background:#e6e3dc;filter:blur(28px) saturate(.8) brightness(.9);pointer-events:none}
/* Expression study on a landscape scene: the square tile stands full height in the centre over a blurred wash of itself. */
/* Caption, a little larger. */
.j-hero .j-scene-top.j-editorial-caption{top:34px;left:44px;max-width:calc(100% - 280px)}
.j-caption-brand{font-size:40px}
.j-caption-brand>i{font-size:20px}
.j-caption-city{font-size:32px}
.j-caption-date,.j-editorial-caption #j-weather-small{font-size:11px}
.j-hero .j-editorial-caption .j-media-toggle button{font-size:19px}
#joyful-app:has(.j-editorial-caption)>.j-header{inset:24px 32px auto auto}
/* The instrument spans the width, like the phone, with a real curve. */
.j-hero .j-controls{--j-ring-curve:1.6;--j-ring-min:1400;position:absolute;left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-width:none;margin:0;padding:0;height:calc(40px + var(--j-disc-height,230px));max-height:none;grid-template-rows:56px auto;opacity:calc(1 - var(--j-scroll,0) * 1.5)}
.j-hero .j-controls::before{content:none}
.j-hero .j-controls .j-mode-bar::before{content:none}
.j-hero .j-controls .j-disc{top:40px!important;height:var(--j-disc-height,230px)!important;transform-origin:50% 100%!important;transform:translateY(calc(-6px * var(--j-orbit-growth,0))) scale(calc(1 + .05 * var(--j-orbit-growth,0)))!important}
.j-hero .j-controls .j-disc>svg{height:var(--j-disc-height,230px)!important}
.j-hero .j-controls :is(.j-disc [data-band=outer] .j-ring-labels,.j-lens-layer[data-band=outer]) text{font-size:calc(13px + 2px * var(--j-hover-outer,0) + 3px * var(--j-grow-outer,0))}
.j-hero .j-controls :is(.j-disc,.j-lens-layer) .j-date-weekday{font-size:calc(7px + .5px * var(--j-hover-outer,0) + 1px * var(--j-grow-outer,0))}
.j-hero .j-controls :is(.j-disc [data-band=middle] .j-ring-labels,.j-lens-layer[data-band=middle]) text{font-size:calc(13px + 2px * var(--j-hover-middle,0) + 3px * var(--j-grow-middle,0))}
.j-hero .j-controls :is(.j-disc [data-band=inner] .j-ring-labels,.j-lens-layer[data-band=inner]) text{font-size:calc(11px + 2px * var(--j-hover-inner,0) + 2.5px * var(--j-grow-inner,0))}
.j-hero .j-controls .j-desk-readout,.j-hero .j-controls .j-chapters{display:none}
.j-hero .j-controls[data-invite=true] .j-dial-hint{font-size:11px;padding:10px 18px}
}
@media (min-width:701px) and (max-height:760px){
.j-hero .j-controls{--j-ring-curve:2.2;--j-ring-min:2000}
}
@media (min-width:701px) and (max-height:640px){
.j-hero .j-controls{--j-ring-curve:2.8;--j-ring-min:2600}
}
@media (prefers-reduced-motion:reduce){
html:has(#joyful-app[data-studio=true] .j-hero){scroll-snap-type:y proximity}
.j-hero .j-controls .j-disc{transform:none!important}
}
/* ===== style block 35 ===== */
/* Refinement 2026-09-09 (owner). The presentation is not a fourth numbered chapter but the finale:
three tabs, then one full-width "Exactly You" step in the wordmark's own type. */
.jew-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.jew-tabs>button.jew-tab-final{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;min-height:74px;padding:14px 24px;border-left:0;border-top:1px solid var(--jew-line);background:#262626;color:#fff;text-align:left;transition:background .2s}
.jew-tabs>button.jew-tab-final .jew-final-kicker{font:600 9px/1.4 var(--jew-sans);letter-spacing:.14em;text-transform:uppercase;color:#ffffffa8}
.jew-tabs>button.jew-tab-final .jew-final-lockup{font:400 31px/1 var(--jew-serif);letter-spacing:-.04em;color:#fff;white-space:nowrap;justify-self:center}
.jew-tabs>button.jew-tab-final .jew-final-lockup em{font-style:italic;font-weight:400}
.jew-tabs>button.jew-tab-final .jew-final-arrow{justify-self:end;font:400 24px/1 var(--jew-serif);color:#fff;transition:transform .25s}
.jew-tabs>button.jew-tab-final .jew-tab-line{left:0;right:0;bottom:0;height:3px}
.jew-tabs>button.jew-tab-final[aria-selected=true]{background:#3a2b35;color:#fff}
.jew-tabs>button.jew-tab-final[aria-selected=true] .jew-tab-line{background:linear-gradient(90deg,#c77478,#aa82b5,#829ea5)}
@media(hover:hover){.jew-tabs>button.jew-tab-final:hover{background:#514249}.jew-tabs>button.jew-tab-final:hover .jew-final-arrow{transform:translateX(5px)}}
@media(max-width:700px){.jew-tabs>button.jew-tab-final{grid-template-columns:1fr;justify-items:center;gap:6px;padding:14px 12px;min-height:84px}.jew-tabs>button.jew-tab-final .jew-final-kicker{font-size:8px;text-align:center;letter-spacing:.1em}.jew-tabs>button.jew-tab-final .jew-final-lockup{font-size:27px}.jew-tabs>button.jew-tab-final .jew-final-arrow{display:none}}
@media(prefers-reduced-motion:reduce){.jew-tabs>button.jew-tab-final,.jew-tabs>button.jew-tab-final .jew-final-arrow{transition:none}}
/* ===== style block 36 ===== */
/* Refinement 2026-09-09 (owner: "photographs in the correct format and proportions, no empty
areas, everywhere"). Every editorial photo slot either takes the photograph's own proportion
or cover-crops it with a deliberate focus; landscape slots show the landscape twin
(JoyfulFrameFor). Letterboxing is reserved for user uploads and product packshots. */
/* Lookbook cover: fills the frame at every size; the landscape twin keeps the whole figure. */
.jpr-cover-photo .jpr-image-slot>img{object-fit:cover;object-position:50% 12%}
.jpr-cover-photo .jpr-image-slot[data-wide=true]>img{object-position:36% 42%}
/* Outfit spread: the photo column takes the portrait's proportion, so the full silhouette shows. */
.jpr-spread{grid-template-columns:minmax(300px,36%) minmax(0,1fr)}
.jpr-outfit-photo .jpr-image-slot>img{object-fit:cover;object-position:50% 18%}
.jpr-outfit-photo .jpr-image-slot[data-wide=true]>img{object-position:36% 42%}
/* Beauty close-ups: always a crop, never a contained frame. */
.jpr-beauty-photo .jpr-image-slot>img{object-fit:cover}
/* Film: the poster fills the frame; the clip (portrait) plays over a blurred backdrop of its own poster. */
.jpr-film-poster .jpr-image-slot>img{object-fit:cover;object-position:50% 12%;filter:brightness(.65)}
.jpr-film-poster .jpr-image-slot[data-wide=true]>img{object-position:36% 42%}
.jpr-film-stage{overflow:hidden;background:#1f1c1d}
.jpr-film-stage::before{content:'';position:absolute;inset:-48px;background:var(--jpr-film-bg,none) 36% 42%/cover no-repeat;filter:blur(26px) brightness(.55) saturate(.8);pointer-events:none}
.jpr-video{position:relative;z-index:1}
@media(max-width:700px){
.jpr-spread>.jpr-visual.jpr-outfit-photo{height:auto!important;aspect-ratio:941/1672;max-height:640px}
.jpr-spread>.jpr-visual.jpr-outfit-photo .jpr-image-slot>img{object-position:50% 0%}
.jpr-beauty-photo .jpr-image-slot>img{object-fit:cover}
}
/* Cards elsewhere: cover crops with the figure in view. */
.j-saved-card img{object-fit:cover;object-position:50% 12%}
.j-motion-card img{object-fit:cover;object-position:50% 0%}
.j-catalog-cover img{object-fit:cover;object-position:50% 12%}
.jsl-look-card>img{object-fit:cover!important;object-position:50% 20%}
/* ===== style block 37 ===== */
/* Refinement 2026-09-09 (owner: "far too much text, and text must never cover the face").
Lookbook cover: masthead + dateline + one line, in the bottom band; on the landscape frame the
masthead sits top-right over the façade, away from the figure. Film copy moves to the bottom.
Inside the finale step the reader's own heading is dropped (the step already says it). */
.jpr-cover-masthead{top:auto;bottom:118px;left:30px;right:auto;font-size:clamp(30px,4vw,46px);letter-spacing:-.05em;line-height:1;text-shadow:0 1px 10px #14141866}
.jpr-cover-masthead>span,.jpr-cover-index,.jpr-cover-copy h4{display:none}
.jpr-cover-copy{bottom:34px;left:30px;right:30px}
.jpr-cover-copy>span{display:block;font:600 9px/1.4 var(--j-sans,Manrope,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#ffffffd6}
.jpr-cover-copy>p{font:italic 400 clamp(22px,2.6vw,30px)/1.2 var(--j-serif,'Bodoni Moda',Georgia,serif);margin:8px 0 0;color:#fff}
.jpr-cover::after{background:linear-gradient(180deg,transparent 58%,#2a231f99 100%)}
.jpr-cover:has(.jpr-image-slot[data-wide=true]) .jpr-cover-masthead{top:26px;right:30px;left:auto;bottom:auto;text-align:right}
.jpr-cover:has(.jpr-image-slot[data-wide=true])::after{background:linear-gradient(180deg,#2a231f38,transparent 26%,transparent 58%,#2a231f99 100%)}
.jpr-cover-photo .jpr-image-note{display:none}
/* Film */
.jpr-film::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,transparent 48%,#1c1719c9 100%);pointer-events:none}
.jpr-film-poster .jpr-image-slot>img{filter:brightness(.82)}
.jpr-film-copy{align-items:flex-start;justify-content:flex-end;text-align:left;padding:30px;z-index:1}
.jpr-film-copy h4{font-size:clamp(30px,4vw,48px);margin:8px 0 12px}
.jpr-film-copy p{max-width:340px;color:#ffffffd6}
.jpr-film-poster .jpr-image-note{display:none}
/* Reader chrome inside the finale */
.jew-panel[data-jew-panel=presentation] .jpr-toolbar>div:not(.jpr-modes){display:none}
.jew-panel[data-jew-panel=presentation] .jpr-toolbar{justify-content:flex-end;margin-bottom:14px}
@media(max-width:700px){
.jpr-cover-masthead{font-size:30px;left:20px;bottom:96px}
.jpr-cover:has(.jpr-image-slot[data-wide=true]) .jpr-cover-masthead{top:18px;right:20px}
.jpr-cover-copy{left:20px;right:20px;bottom:24px}
.jpr-cover-copy>p{font-size:22px}
.jpr-film-copy{padding:22px 20px}
}
/* ===== style block 38 ===== */
/* Refinement 2026-09-09 (owner). Rings a finger can hold: 40px bands 6px apart, +20px while
turning, +12px under the pointer; the whole instrument lifts and grows. No reading dot: the
band itself brightens at every detent. The instrument's height follows its geometry on every
screen. The photograph carries a mood grade (saturation, contrast, warmth) that follows the
mood ring live, so the same frame answers the ring instead of a different photograph. */
.j-hero .j-controls .j-disc{--j-ring-base:40px;height:var(--j-disc-height,150px)!important;transform:translateY(calc(-8px * var(--j-orbit-growth,0))) scale(calc(1 + .08 * var(--j-orbit-growth,0)))!important}
.j-hero .j-controls .j-disc>svg{height:var(--j-disc-height,150px)!important}
.j-hero .j-controls{height:calc(40px + var(--j-disc-height,150px));max-height:none}
.j-hero .j-controls :is(.j-disc [data-band=outer] .j-ring-labels,.j-lens-layer[data-band=outer]) text{font-size:calc(13px + 3px * var(--j-hover-outer,0) + 4px * var(--j-grow-outer,0))}
.j-hero .j-controls :is(.j-disc,.j-lens-layer) .j-date-weekday{font-size:calc(7px + 1px * var(--j-hover-outer,0) + 1.5px * var(--j-grow-outer,0))}
.j-hero .j-controls :is(.j-disc [data-band=middle] .j-ring-labels,.j-lens-layer[data-band=middle]) text{font-size:calc(13px + 3px * var(--j-hover-middle,0) + 4px * var(--j-grow-middle,0))}
.j-hero .j-controls :is(.j-disc [data-band=inner] .j-ring-labels,.j-lens-layer[data-band=inner]) text{font-size:calc(11px + 3px * var(--j-hover-inner,0) + 3px * var(--j-grow-inner,0))}
.j-hero .j-disc.j-ticking[data-engaged-axis=outer] [data-band=outer],.j-hero .j-disc.j-ticking[data-engaged-axis=middle] [data-band=middle],.j-hero .j-disc.j-ticking[data-engaged-axis=inner] [data-band=inner]{animation:j-band-tick .24s cubic-bezier(.2,.8,.2,1)}
@keyframes j-band-tick{0%{filter:brightness(1)}40%{filter:brightness(1.16)}100%{filter:brightness(1)}}
.j-hero .j-scene .j-framing{transition:transform .65s cubic-bezier(.22,.68,.2,1)}
@media (min-width:701px){
.j-hero .j-controls :is(.j-disc [data-band=outer] .j-ring-labels,.j-lens-layer[data-band=outer]) text{font-size:calc(14px + 3px * var(--j-hover-outer,0) + 4px * var(--j-grow-outer,0))}
.j-hero .j-controls :is(.j-disc [data-band=middle] .j-ring-labels,.j-lens-layer[data-band=middle]) text{font-size:calc(14px + 3px * var(--j-hover-middle,0) + 4px * var(--j-grow-middle,0))}
.j-hero .j-controls :is(.j-disc [data-band=inner] .j-ring-labels,.j-lens-layer[data-band=inner]) text{font-size:calc(12px + 3px * var(--j-hover-inner,0) + 3px * var(--j-grow-inner,0))}
}
@media (prefers-reduced-motion:reduce){.j-hero .j-disc.j-ticking *{animation:none!important}.j-hero .j-scene .j-framing{transition:none}}
/* ===== style block 39 ===== */
/* Refinement 2026-09-09 (owner). One mechanic for all four rings. The disc writes
--j-orbit-growth, data-engaged-band and data-hover-band (outer | middle | inner) on itself and
on .j-controls. A growing band pushes every band outside it outward (up) and every band inside
it inward (down) by half its growth; the mode cap is the outermost band, so every growth pushes
it, and it scales with the instrument about the same point (the instrument's bottom). */
@property --j-hover-outer{syntax:'';inherits:true;initial-value:0}
@property --j-hover-middle{syntax:'';inherits:true;initial-value:0}
@property --j-hover-inner{syntax:'';inherits:true;initial-value:0}
.j-hero .j-controls,.j-hero .j-controls .j-disc{transition:--j-hover-outer .32s cubic-bezier(.2,.8,.2,1),--j-hover-middle .32s cubic-bezier(.2,.8,.2,1),--j-hover-inner .32s cubic-bezier(.2,.8,.2,1),--j-hover-outer .32s cubic-bezier(.2,.8,.2,1),--j-hover-middle .32s cubic-bezier(.2,.8,.2,1),--j-hover-inner .32s cubic-bezier(.2,.8,.2,1)}
.j-hero .j-controls[data-hover-band=outer],.j-hero .j-disc[data-hover-band=outer]{--j-hover-outer:1}
.j-hero .j-controls[data-hover-band=middle],.j-hero .j-disc[data-hover-band=middle]{--j-hover-middle:1}
.j-hero .j-controls[data-hover-band=inner],.j-hero .j-disc[data-hover-band=inner]{--j-hover-inner:1}
.j-hero .j-controls[data-engaged-band=outer],.j-hero .j-disc[data-engaged-band=outer]{--j-grow-outer:var(--j-orbit-growth,0)}
.j-hero .j-controls[data-engaged-band=middle],.j-hero .j-disc[data-engaged-band=middle]{--j-grow-middle:var(--j-orbit-growth,0)}
.j-hero .j-controls[data-engaged-band=inner],.j-hero .j-disc[data-engaged-band=inner]{--j-grow-inner:var(--j-orbit-growth,0)}
.j-hero .j-disc .j-band[data-band=outer]{transform:translateY(calc(-10px * var(--j-grow-middle,0) - 10px * var(--j-grow-inner,0) - 6px * var(--j-hover-middle,0) - 6px * var(--j-hover-inner,0)))}
.j-hero .j-disc .j-band[data-band=middle]{transform:translateY(calc(10px * var(--j-grow-outer,0) + 6px * var(--j-hover-outer,0) - 10px * var(--j-grow-inner,0) - 6px * var(--j-hover-inner,0)))}
.j-hero .j-disc .j-band[data-band=inner]{transform:translateY(calc(10px * var(--j-grow-outer,0) + 10px * var(--j-grow-middle,0) + 6px * var(--j-hover-outer,0) + 6px * var(--j-hover-middle,0)))}
.j-hero .j-controls .j-mode-bar.jmo-root{transform-origin:50% calc(40px + var(--j-disc-height,150px));transform:translateY(calc(-18px * var(--j-orbit-growth,0) - 6px * var(--j-hover-outer,0) - 6px * var(--j-hover-middle,0) - 6px * var(--j-hover-inner,0))) scale(calc(1 + .08 * var(--j-orbit-growth,0)));will-change:transform}
@media (prefers-reduced-motion:reduce){.j-hero .j-controls .j-mode-bar.jmo-root{transform:none}.j-hero .j-controls,.j-hero .j-controls .j-disc{transition:none}.j-hero .j-disc .j-band{transform:none}}
/* ===== style block 40 ===== */
/* Refinement 2026-09-09 (owner: "what is the point of these texts? it overloads"). The chapter
subtitle and the preview-coverage note are gone from the flow; the status row appears only
while an image loads or fails. */
.jew-subtitle{display:none}
.jew-context .j-render-coverage{display:none!important}
.jew-context .j-shared-edit[hidden]{display:none!important}
.jew-context .j-shared-edit{margin-top:10px;padding:12px 0}
/* ===== style block 41 ===== */
/* Refinement 2026-09-09 (owner). Alternatives live on the card: a short list of the same piece in
its other versions, with the price difference; one tap swaps. The old bottom panel is retired. */
.jd-alternatives{display:none!important}
.jd-variants{display:grid;gap:6px;margin-top:10px;animation:j-panel-in .28s cubic-bezier(.2,.7,.2,1) both}
.jd-variant{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "note price";column-gap:12px;align-items:center;min-height:48px;padding:9px 12px;border:1px solid #d8d5d0;border-radius:0;background:#fff;text-align:left;font-size:11px;cursor:pointer;transition:border-color .15s,background .15s}
.jd-variant .jd-variant-name{grid-area:name;font-weight:500;line-height:1.35}
.jd-variant .jd-variant-price{grid-area:price;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.jd-variant .jd-variant-note{grid-area:note;font-size:9px;color:#8a847a;line-height:1.4}
.jd-variant.jd-selected{border-color:#323232;background:#f6f3ef}
.jd-variant.jd-selected .jd-variant-note{color:#323232}
@media(hover:hover){.jd-variant:not(.jd-selected):hover{border-color:#484642}}
.jd-variants>.jd-small{margin:4px 0 0}
@media(prefers-reduced-motion:reduce){.jd-variants{animation:none}}
/* ===== style block 42 ===== */
/* Refinement 2026-09-09 (owner). Alternatives as a slider inside the card: one image at a time,
arrows, dots, swipe; the copy names the previewed piece. Same-piece versions share the sample
image with a light treatment. Block 41's row list is superseded. */
.jd-variants{display:none}
.jd-alt-stage{overflow:hidden;touch-action:pan-y;cursor:grab;outline-offset:-3px}
.jd-alt-stage:active{cursor:grabbing}
.jd-alt-track{display:flex;width:100%;will-change:transform}
.jd-alt-slide{flex:0 0 100%;min-width:0}
.jd-alt-slide[data-tone="1"]
.jd-alt-slide[data-tone="2"]
.jd-alt-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border-radius:50%;background:#ffffffe6;box-shadow:0 2px 10px #2b241524;z-index:2;color:#262626}
.jd-alt-prev{left:8px}.jd-alt-next{right:8px}
.jd-alt-arrow:disabled{opacity:.28}
.jd-alt-arrow iconify-icon{width:16px;height:16px;font-size:16px}
.jd-alt-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;z-index:2;pointer-events:none}
.jd-alt-dots i{width:6px;height:6px;border-radius:50%;background:#ffffffc0;box-shadow:0 0 0 1px #2b241540}
.jd-alt-dots i.jd-on{background:#262626;box-shadow:0 0 0 1px #ffffffc0}
.jd-alt-open .jd-source-tag{bottom:auto;top:10px}
.jd-alt-use:disabled{opacity:.5}
@media(hover:hover){.jd-alt-arrow:not(:disabled):hover{background:#fff}}
/* ===== style block 43 ===== */
/* Refinement 2026-09-09 (owner). Browsing alternatives is one gesture in one place: the whole
card is framed while the mode is on, the confirm sits in the middle of the image, close is in
the image's corner; nothing to look for below. */
.jd-item-card.jd-alt-open{outline:2px solid #262626;outline-offset:6px;border-radius:1px}
.jd-alt-confirm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border:0;border-radius:24px;background:#262626e8;color:#fff;font:600 11px/1 var(--jd-sans,Manrope,sans-serif);letter-spacing:.04em;box-shadow:0 6px 20px #2b241540;z-index:3;backdrop-filter:blur(6px);cursor:pointer;transition:background .15s,transform .15s}
.jd-alt-confirm iconify-icon{width:16px;height:16px;font-size:16px}
.jd-alt-confirm.jd-is-current{background:#ffffffe8;color:#262626;box-shadow:0 0 0 1px #26262640,0 4px 14px #2b241520;cursor:default}
.jd-alt-close{position:absolute;top:8px;right:8px;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border-radius:50%;background:#ffffffe6;box-shadow:0 2px 10px #2b241524;z-index:3;color:#262626}
.jd-alt-close iconify-icon{width:16px;height:16px;font-size:16px}
.jd-alt-hint{display:flex;align-items:center;min-height:44px;margin:0;border-bottom:1px solid var(--jd-line);font-size:9px;line-height:1.4;color:#8a847a}
@media(hover:hover){.jd-alt-confirm:not(:disabled):hover{background:#262626;transform:translate(-50%,-50%) scale(1.04)}.jd-alt-close:hover{background:#fff}}
@media(prefers-reduced-motion:reduce){.jd-alt-confirm{transition:none}}
/* Narrow cards (two-column phones): swipe and dots do the browsing; the confirm pill stays compact. */
@media(max-width:700px){.jd-alt-arrow{display:none}.jd-alt-confirm{padding:0 14px 0 12px;min-height:40px;font-size:10px;gap:6px}}
/* ===== style block 44 ===== */
/* Refinement 2026-09-09 (owner: "just a blur"). The confirm is a crisp control: a white pill with
an ink hairline and ink text, no translucency, no backdrop blur, centred by flex (no fractional
transform, so the type stays sharp). The stage shows no focus ring of its own — the card frame
already says it is active. */
.jd-alt-centre{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.jd-alt-confirm{position:static;left:auto;top:auto;transform:none;pointer-events:auto;min-height:44px;padding:0 20px 0 16px;border:1px solid #262626;border-radius:24px;background:#fff;color:#262626;font:600 11px/1 var(--jd-sans,Manrope,sans-serif);letter-spacing:.04em;box-shadow:0 4px 16px #2b241526;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .15s,color .15s}
.jd-alt-confirm iconify-icon{width:16px;height:16px;font-size:16px;color:inherit}
.jd-alt-confirm.jd-is-current{background:#faf9f6;color:#8a847a;border-color:#c9c5bd;box-shadow:none}
@media(hover:hover){.jd-alt-confirm:not(:disabled):hover{background:#262626;color:#fff;transform:none}}
.jd-alt-confirm:focus-visible{outline:2px solid #262626;outline-offset:3px}
.jd-alt-stage:focus,.jd-alt-stage:focus-visible{outline:none!important}
@media(max-width:700px){.jd-alt-confirm{min-height:40px;padding:0 14px 0 12px;font-size:10px}}
/* ===== style block 45 ===== */
/* Refinement 2026-09-09 (owner: "not clear that it can be swiped"). The neighbours peek at both
edges (82% slides, active one centred, others dimmed and slightly smaller); on phones small
arrows sit in the bottom corners beside the dots; opening the mode nudges the track once. */
.jd-alt-slide{flex:0 0 82%;opacity:.42;transform:scale(.92);transition:opacity .28s,transform .28s;transform-origin:50% 60%}
.jd-alt-slide.jd-active{opacity:1;transform:none}
@media(max-width:700px){
.jd-alt-arrow{display:flex;top:auto;bottom:6px;transform:none;width:32px;height:32px;min-width:32px;min-height:32px}
.jd-alt-arrow iconify-icon{width:14px;height:14px;font-size:14px}
.jd-alt-prev{left:6px}.jd-alt-next{right:6px}
.jd-alt-dots{bottom:16px}
}
@media(prefers-reduced-motion:reduce){.jd-alt-slide{transition:none}}
/* Arrows and close read as controls on light packshots: ink hairline, ink glyph. */
.jd-alt-arrow,.jd-alt-close{border:1px solid #262626a6;color:#262626;background:#fff}
.jd-alt-arrow{width:40px;height:40px;min-width:40px;min-height:40px}
.jd-alt-arrow iconify-icon{width:18px;height:18px;font-size:18px}
.jd-alt-arrow:disabled{opacity:.22}
@media(max-width:700px){.jd-alt-arrow{width:34px;height:34px;min-width:34px;min-height:34px}.jd-alt-arrow iconify-icon{width:15px;height:15px;font-size:15px}}
/* ===== style block 46 ===== */
/* The browse stage keeps the card image's own proportion; slides fill its height, so the
photograph does not shrink when the neighbours peek. */
.jd-alt-stage{aspect-ratio:1/1.03}
.jd-alt-track,.jd-alt-slide{height:100%}
.jd-alt-slide .jd-product-art{height:100%;aspect-ratio:auto}
@media(max-width:700px){.jd-alt-stage{aspect-ratio:1/1.23}}
/* ===== style block 47 ===== */
/* Refinement 2026-09-09 (owner: the tail blocks felt torn out of the logic). The chapter ends
with one summary: a stylist's note (why the pieces work), the colour direction (with a way
back to change it) and the cost to complete the look, itemised against the budget set above.
The live status stays for screen readers only. */
.jd-styling-note,.jd-total-row{display:none!important}
.jd-summary{margin-top:30px;padding:30px 0 6px;border-top:1px solid var(--jd-line)}
.jd-summary-head{margin-bottom:22px}
.jd-summary-head h3{font:400 clamp(24px,2.4vw,32px)/1.15 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.03em;margin:6px 0 0}
.jd-summary-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;border-top:1px solid var(--jd-line)}
.jd-summary-cell{padding:22px 28px 22px 0;min-width:0}
.jd-summary-cell+.jd-summary-cell{padding-left:28px;border-left:1px solid var(--jd-line)}
.jd-summary-cell>.jd-eyebrow{margin-bottom:12px}
.jd-summary-note p{font:400 20px/1.45 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.015em;margin:0}
.jd-summary-palette strong{display:block;font:400 20px/1.2 'Bodoni Moda','Times New Roman',serif;margin-bottom:10px}
.jd-summary-palette .jd-large-swatches{display:flex;gap:8px;margin-bottom:10px}
.jd-summary-palette .jd-large-swatches i{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px #0000000f}
.jd-summary-palette p{font-size:11px;line-height:1.7;color:var(--jd-muted);margin:0 0 6px}
.jd-summary-amount{display:block;font:400 40px/1.05 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.03em;margin-bottom:12px}
.jd-summary-lines{display:grid;gap:6px;margin:0 0 8px;font-size:11px}
.jd-summary-lines>div{display:flex;justify-content:space-between;gap:12px}
.jd-summary-lines dt{color:var(--jd-muted)}.jd-summary-lines dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.jd-summary-lines dd span{font-weight:400;color:var(--jd-muted)}
.jd-summary-budget{padding-top:8px;border-top:1px solid var(--jd-line)}
.jd-summary-budget dd.jd-budget-over{color:#a83a3a}
.jd-summary .jd-text-button{font-size:10px;min-height:40px;padding:0}
.jd-summary [data-jd=wishlist]{margin-top:12px}
.jew-enabled .jd-summary [data-jd=wishlist]{display:none!important}
.jd-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}
@media(max-width:900px){.jd-summary-grid{grid-template-columns:1fr 1fr}.jd-summary-note{grid-column:1/-1;border-bottom:1px solid var(--jd-line)}.jd-summary-palette{padding-left:0!important;border-left:0!important}}
@media(max-width:700px){.jd-summary{margin-top:24px;padding-top:24px}.jd-summary-grid{grid-template-columns:1fr}.jd-summary-cell,.jd-summary-cell+.jd-summary-cell{padding:20px 0;border-left:0;border-top:1px solid var(--jd-line)}.jd-summary-grid>.jd-summary-cell:first-child{border-top:0}.jd-summary-note p{font-size:19px}.jd-summary-amount{font-size:36px}}
/* ===== style block 48 ===== */
/* Refinement 2026-09-09 (owner). Profile photographs are portraits: every upload window is
vertical (3:4), three equal columns on wide screens, the portrait first and larger on phones;
an uploaded photo fills its window. */
.ja-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.ja-photo-window{height:auto;aspect-ratio:3/4}
.ja-photo-pick>img{object-fit:cover;object-position:50% 20%;padding:0}
.ja-photo-portrait .ja-silhouette{width:46%;height:auto;max-height:52%}
@media(max-width:700px){
.ja-photo-grid{grid-template-columns:1fr 1fr;gap:14px}
.ja-photo-slot.ja-photo-portrait{grid-column:1/-1;max-width:280px}
}
.ja-photo-slot .ja-photo-window,.ja-photo-portrait .ja-photo-window{height:auto!important;min-height:0;aspect-ratio:3/4}
/* ===== style block 49 ===== */
/* Refinement 2026-09-09 (owner). "Her" in the caption wordmark, and "You" in the finale,
take the colour of the mood currently on the ring (--j-mood, written by the app on every
turn) and follow it as the ring moves. */
.j-hero .j-editorial-caption .j-caption-brand em{color:var(--j-mood,#fff);transition:color .5s ease;text-shadow:0 1px 4px #14141880,0 0 14px #14141840}
.jew-tabs>button.jew-tab-final .jew-final-lockup em{color:var(--j-mood,#fff);transition:color .5s ease}
@media(prefers-reduced-motion:reduce){.j-hero .j-editorial-caption .j-caption-brand em,.jew-tabs>button.jew-tab-final .jew-final-lockup em{transition:none}}
/* ===== style block 50 ===== */
/* The standard header (non-studio routes) overflowed by 7px on 390px phones: tighter padding. */
@media(max-width:700px){#joyful-app:not([data-studio=true]) .j-header{padding:0 10px 0 14px;gap:8px}}
@media(max-width:700px){#joyful-app:not([data-studio=true]) .j-header-tools [data-action=save],#joyful-app:not([data-studio=true]) .j-header-tools [data-action=activity]{display:none!important}}
/* ===== style block 51 ===== */
/* 2026-09-09 (owner): the boxed heart in product cards broke the card language; the wishlist action is a quiet underlined label like the retailer link. */
.jbs-heart{min-width:44px;width:auto;height:auto;min-height:44px;padding:8px 2px;border:0!important;background:none;font:600 10px/1.4 Manrope,sans-serif;letter-spacing:.02em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;color:#191919}
.jbs-heart[aria-pressed=true]{color:#bb243c}
.jbs-heart:hover{color:#bb243c}
/* ===== style block 52 ===== */
/* 2026-09-09 (owner): the header wordmark must read like the wordmark on the studio scene —
"Her" in the mood currently on the ring (--j-mood, written by the app) — and the personal
space heading is the same lockup: "Exactly ." with the name in that mood colour. */
.j-wordmark span{color:var(--j-mood,var(--j-ink));transition:color .5s ease}
/* One consistent lockup: the conic-gradient bead is retired everywhere (markup removed too). */
.j-wordmark i{display:none}
.jp-page-head h1.jp-name-lockup em{color:var(--j-mood,var(--j-ink));transition:color .5s ease}
@media(prefers-reduced-motion:reduce){.j-wordmark span,.jp-page-head h1.jp-name-lockup em{transition:none}}
/* ===== style block 53 ===== */
/* 2026-09-09 (owner): My avatar keeps every answer as it is given — the manual "Save details" is
retired and a quiet status says where it was kept. Paper, a hairline and the mood accent on the
left edge, like the scene label and the studio intro; it settles back after a few seconds. */
.ja-autosave{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;align-items:center;gap:11px;max-width:min(320px,calc(100vw - 44px));padding:11px 15px;background:#faf9f6f2;border:1px solid var(--j-line);border-left:2px solid var(--j-mood);backdrop-filter:blur(12px);box-shadow:0 3px 22px #1a181410;transition:opacity .4s ease,transform .28s ease,border-color .4s ease}
.ja-autosave[hidden]{display:none}
.ja-autosave[data-quiet=true]{opacity:.62}
.ja-autosave[data-state=error]{border-left-color:#9d4b4f}
.ja-autosave-mark{display:flex;align-items:center;justify-content:center;width:17px;flex:none;color:#7f7a70}
.ja-autosave[data-state=saved] .ja-autosave-mark{color:#5f7a5e}
.ja-autosave[data-state=error] .ja-autosave-mark{color:#9d4b4f}
.ja-autosave-mark iconify-icon{width:15px;height:15px;font-size:15px}
.ja-autosave-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.ja-autosave-copy strong{font:500 11px/1.35 var(--j-sans);letter-spacing:.005em;color:var(--j-ink)}
.ja-autosave-copy small{font-size:9px;line-height:1.5;color:var(--j-muted)}
@keyframes ja-autosave-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ja-autosave[data-state=saving],.ja-autosave[data-state=saved],.ja-autosave[data-state=error]{animation:ja-autosave-in .28s ease both}
@media(max-width:700px){.ja-autosave{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:none}}
@media(prefers-reduced-motion:reduce){.ja-autosave,.ja-autosave[data-state=saving],.ja-autosave[data-state=saved],.ja-autosave[data-state=error]{animation:none;transition:none}}
/* 2026-09-09 (LOOK_PACKAGE.md §6.3) · the frame engine's canvas layer. It sits inside the
same framing element as the portrait, so every focus transform, the wide crop and the
beauty zoom apply to it unchanged. It is invisible until the engine has a pair of frames
(data-frame-engine), and it gives way to the clip with the same fade the portrait uses. */
.j-frame-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .42s ease;pointer-events:none;z-index:1}
.j-scene[data-frame-engine=true] .j-frame-canvas{opacity:1}
.j-scene[data-frame-engine=true] .j-portrait{opacity:0}
.j-scene[data-frame-engine=behind] .j-frame-canvas{opacity:0}
@media(prefers-reduced-motion:reduce){.j-frame-canvas{transition:none}}
/* 2026-09-09 (LOOK_PACKAGE.md §4.5) · onboarding: the studio's own voice. One card on the
account page and one strip in the atelier, both in the existing language — no new colours,
no new type, and nothing that moves unless something is actually happening. */
.jo-slot{grid-column:1/-1;margin-top:18px}
.jo-card{border:1px solid var(--j-line,#e4ded6);border-radius:18px;padding:22px;background:var(--j-card,#fff)}
.jo-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--j-muted)}
.jo-card h2{font-size:22px;line-height:1.2;margin:0 0 6px}
.jo-card>p{margin:0 0 14px;color:var(--j-muted);font-size:13px}
.jo-bar{height:4px;border-radius:2px;background:var(--j-line,#e4ded6);overflow:hidden}
.jo-bar i{display:block;height:100%;background:var(--j-mood,#ee784c);transition:width .5s ease}
.jo-count{margin:8px 0 14px;font-size:12px;color:var(--j-muted)}
.jo-detail{margin:-8px 0 14px;font-size:11px;color:var(--j-muted);opacity:.8}
.jo-stages{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px}
.jo-stages li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--j-muted)}
.jo-stages li[data-state=done]{color:inherit}
.jo-stages li[data-state=running]{color:inherit;font-weight:500}
.jo-notify{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer;line-height:1.35}
.jo-notify input{flex:0 0 auto;width:15px;height:15px;margin:0;accent-color:var(--j-ink,#1e1814)}
.jo-notify span{flex:1;min-width:0}
/* Showing her around: a hole in a dimmed page, a card in our own type. No library brings its
own visual language in here (owner: never a second visual system). */
.jt-root{position:fixed;inset:0;z-index:70;pointer-events:none}
.jt-hole{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(30,24,20,.62);transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease;pointer-events:none}
.jt-card{position:fixed;width:min(340px,calc(100vw - 24px));background:var(--j-paper,#faf9f6);border:1px solid var(--j-line,#e7e1d8);border-radius:16px;padding:16px 18px 14px;box-shadow:0 30px 60px -20px rgba(30,24,20,.35);pointer-events:auto}
.jt-card h2{font-size:17px;line-height:1.2;margin:2px 0 6px}
.jt-card p{font-size:13px;line-height:1.5;color:var(--j-muted);margin:0}
.jt-count{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--j-muted);margin:0 0 2px}
.jt-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.jt-actions [data-jt=skip]{font-size:12px;color:var(--j-muted);background:none;border:0;cursor:pointer;padding:6px 2px}
.jt-offer{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:69;display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:min(640px,calc(100vw - 24px));background:var(--j-paper,#faf9f6);border:1px solid var(--j-line,#e7e1d8);border-radius:999px;padding:10px 12px 10px 20px;box-shadow:0 20px 40px -18px rgba(30,24,20,.4)}
.jt-offer p{margin:0;font-size:13px;line-height:1.35}
.jt-offer div{display:flex;align-items:center;gap:10px;margin-left:auto}
.jt-offer [data-jt-offer=no]{font-size:12px;color:var(--j-muted);background:none;border:0;cursor:pointer;padding:6px}
@media (max-width:560px){.jt-offer{border-radius:16px;left:12px;right:12px;transform:none;max-width:none}.jt-offer div{width:100%}}
/* What is worth adding: quiet, under the card, never a gate. */
.jo-thin{margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--j-line,#e7e1d8)}
.jo-thin ul{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:8px}
.jo-thin li{display:grid;gap:2px;font-size:13px;line-height:1.35}
.jo-thin li span{font-size:12px;color:var(--j-muted)}
.jo-history{margin-top:14px;font-size:12px;color:var(--j-muted)}
.jo-history ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.jo-history li{display:flex;gap:10px;align-items:baseline}
.jo-history strong{font-weight:500}
.jo-strip{position:absolute;left:14px;right:14px;top:96px;z-index:4;display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(9px);box-shadow:0 6px 24px rgba(30,24,20,.14);font-size:13px}
.jo-strip-actions{display:flex;align-items:center;gap:8px;flex:none}
.jo-strip p{margin:0;flex:1;min-width:0}
.jo-strip .j-button{padding:7px 13px;font-size:12px}
@media(max-width:700px){/* The phone is the main site, and the photograph fills it.
2026-09-11 gave the box the frame's own proportions so that nothing was trimmed. 2026-09-17
reverses that, on the owner's phone screenshot: "Фотографии должны быть полностью на весь
экран, но без порчи геометрии и пропорций. Пускай копируются. Но не должно быть серых
пустых мест с какой либо стороны экрана." So the box is the stage, exactly, and the
photograph is cropped by it — the crop lives in the engine (`stageFit`, 31-frame-engine.js),
which keeps the frame's proportions and never stretches it. The aspect-ratio box also could
not hold on a short screen: at 390x844 `min-height` already overrode it, and on a landscape
phone it made a box 1244 tall that `.j-scene` then clipped, so the frame was cropped twice. */
.j-hero .j-scene .j-framing{inset:0;width:100%;height:100%;margin:0}
.jo-strip{flex-wrap:wrap;left:12px;right:12px;top:110px;gap:8px;font-size:12px}.jo-strip p{flex-basis:100%}.jo-strip-actions{flex:1 0 100%;justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.jo-bar i{transition:none}}
/* The calendar ring says which month it is, only where the month turns over, and names the
day when it is a feast — `M.holiday` has always known them and nothing ever drew them
(owner, 2026-09-10). Both sit outside the numbers so an ordinary day is unchanged. */
.j-cal-month{font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;fill:#9c9384;font-weight:700}
.j-cal-month-rule{stroke:#cbc5b8;stroke-width:1;fill:none}
.j-cal-feast{font-size:6.5px;letter-spacing:.04em;fill:var(--j-mood);font-weight:600}
/* Today, when it has scrolled out of the window: which way it went, and the way back. */
.j-cal-today-way circle{fill:#ac454b}
.j-cal-today-way text{fill:#fff;font-size:11px;font-weight:700}
.j-cal-today-way .j-cal-today-word{fill:#ac454b;font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
/* The caption is a fixed lockup, not a row that resizes as the numbers under it change: the
date and the temperature both change width while a ring turns, and letting the flex row
re-measure made the whole block shift under her hand (owner, 2026-09-10). */
.j-location{justify-content:flex-start}
.j-caption-date{min-width:5.6em;text-align:left;font-variant-numeric:tabular-nums}
#j-weather-small{min-width:3.4em;text-align:right;font-variant-numeric:tabular-nums}
.j-scene-top{contain:layout}
/* The lens over the chosen element: one piece of glass for the whole instrument, sliding to
whichever ring is being read. It replaces the dashed reading line and needle of the look
dial and the three needle dots of the beauty dial — two ways of saying the same thing
(owner, 2026-09-10). */
.j-lens{pointer-events:none}
/* The glass has a pane of its own, laid over the dial and stacked above the mode bar, whose
arc of paper is opaque and used to cover the top of it. The dial itself cannot simply be
raised: that would put the rings over the bar too (owner, 2026-09-15). */
.j-lens-layer{position:absolute;pointer-events:none;z-index:6;overflow:visible}
.j-lens-contact{fill:#2b2622;opacity:.1;filter:blur(4px)}
.j-lens-dome{pointer-events:none}
.j-lens-rim{fill:none;stroke:#fffdf9;stroke-width:1.5;stroke-opacity:.9}
.j-lens-spark{fill:none;stroke:#ffffff;stroke-width:2;stroke-opacity:.55;stroke-linecap:round}
.j-lens,.j-lens-contact,.j-lens-dome,.j-lens-rim{transition:none}
@media(prefers-reduced-motion:reduce){.j-lens-spark{display:none}}
/* The demo persona, for a visitor with no account of her own.
*
* She sees every screen of the product filled in, and changes nothing: the controls that would
* edit, upload, replace, remove or export somebody else's file are not there for her (owner,
* 2026-09-11). The guard that matters is in the account module — a page is something anybody
* can re-run — and this is what keeps her from being offered the button in the first place. */
html[data-demo=on] [data-jp=edit-profile],
html[data-demo=on] [data-jp=preferences],
html[data-demo=on] [data-jp=measurements],
html[data-demo=on] [data-jp=privacy],
html[data-demo=on] .jp-camera,
html[data-demo=on] [data-ja=remove-photo],
html[data-demo=on] [data-ja=clear-appearance],
html[data-demo=on] [data-ja=units],
html[data-demo=on] [data-ja=appearance],
html[data-demo=on] [data-ja=prepare],
html[data-demo=on] .j-upload,
html[data-demo=on] #account-avatar-cta{display:none!important}
/* The photograph lives *inside* the button that would replace it, so hiding the button hid
the picture: the demo's avatar page showed three empty frames with her photographs sitting
right there in the profile (owner, 2026-09-11). The button stays and stops being a button —
what goes is the invitation to add one, which is the part that is not hers to accept. */
html[data-demo=on] [data-ja=pick-photo]{pointer-events:none;cursor:default}
/* The wardrobe is part of what the demo shows — the whole instrument, including the modules
she does not have yet. It is hers to look at and not to change. */
html[data-demo=on] [data-jw=add],
html[data-demo=on] [data-jw=remove],
html[data-demo=on] [data-jw=edit],
html[data-demo=on] .jw-card-heart,
html[data-demo=on] .jw-add{pointer-events:none}
html[data-demo=on] .ja-photo-prompt,
html[data-demo=on] [data-ja=pick-photo] .ja-silhouette{display:none!important}
/* Every field on the personal pages reads as a record rather than a form. */
html[data-demo=on] .jp-page input,
html[data-demo=on] .jp-page select,
html[data-demo=on] .jp-page textarea,
html[data-demo=on] .ja-page input,
html[data-demo=on] .ja-page select,
html[data-demo=on] .ja-page textarea{pointer-events:none;opacity:.75}
/* My avatar, for a visitor looking at the demo: the photographs, the sizes and the colouring
are all there to read, and the buttons that would change them are not. */
html[data-demo=on] .ja-actions,
html[data-demo=on] .ja-autosave{display:none!important}
html[data-demo=on] .ja-appearance-grid button,
html[data-demo=on] .ja-appearance-grid [role=radio]{pointer-events:none}
.j-demo-note{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding:14px 18px;background:#f0e9e1;font-size:11px;line-height:1.7;color:#5e574f}
.j-demo-note strong{display:block;font-size:12px}
html:not([data-demo=on]) .j-demo-note{display:none}
/* The moment after a deliberate flick. Everything here is opacity and transform, so it
composites on the GPU and cannot make the rings stutter — and nothing has a blend mode or a
filter, because the one thing a surprise may never do is change how the photograph reads
(owner, 2026-09-11). */
.j-surprise-layer{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.j-surprise-trace{position:fixed;inset:auto;z-index:40;pointer-events:none}
.j-surprise-trace svg{width:100%;height:100%;display:block;overflow:visible}
.j-butterfly{position:absolute;top:0;left:0;display:block;transform-origin:50% 50%;will-change:transform,opacity}
.j-butterfly .j-wing{position:absolute;top:0;width:50%;height:100%;color:var(--j-mood,#ee784c);opacity:.92;transform-origin:100% 50%;animation:j-wing-beat var(--j-beat,220ms) ease-in-out infinite alternate}
.j-butterfly .j-wing-left{left:0}
.j-butterfly .j-wing-right{left:50%;transform-origin:0 50%;transform:scaleX(-1);animation-name:j-wing-beat-right}
@keyframes j-wing-beat{from{transform:rotateY(0deg)}to{transform:rotateY(58deg)}}
@keyframes j-wing-beat-right{from{transform:scaleX(-1) rotateY(0deg)}to{transform:scaleX(-1) rotateY(58deg)}}
@media(prefers-reduced-motion:reduce){.j-surprise-layer{display:none}}
/* A piece with no photograph of its own: named, not illustrated. The sprite sheet it used to
borrow from was a photograph of a different woman's clothes (owner, 2026-09-12). */
.jd-product-blank{background:#f2f1ed}
/* ===== style block 54 ===== */
/* 2026-09-16 (owner): the stage was grey, often and for long, while the photographs loaded.
A preloader in the rings' own vocabulary — three concentric bands in the dial's proportions
(band : gap = 40 : 6), paper on the outside, the mood colour in the middle, muted paper
inside — centred on the stage box, under the caption and over the grey. Two of the bands
turn against each other with a soft ease; one line under them in the studio's voice. It is
its own composited layer (opacity + transform only), so nothing repaints the photograph,
and it cross-fades out the moment a frame is on the stage (`.j-scene[data-loading]`,
27-app.js `paintStageLoading`). Under reduced motion nothing turns: it only fades. */
.j-preloader{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 24px 12svh;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.j-scene:is([data-loading=full],[data-loading=inline]) .j-preloader{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
/* 2026-09-17 · the drawing moved to block 62 and js/25-loader.js; only where it sits, how
large it is and when it is allowed to be still belong to the stage. */
.j-preloader .j-rings{width:96px;height:96px}
.j-scene:not([data-loading=full]):not([data-loading=inline]) .j-preloader .j-rings-band{animation-play-state:paused}
.j-preloader-line{margin:0;font:400 11px/1.4 var(--j-sans);letter-spacing:.04em;text-align:center;color:var(--j-ink);opacity:.66}
.j-preloader-line span{display:none}
.j-preloader[data-kind=opening] [data-preloader=opening],.j-preloader[data-kind=building] [data-preloader=building]{display:inline}
@media(min-width:701px){.j-preloader .j-rings{width:120px;height:120px}.j-preloader{gap:18px;padding-bottom:calc(40px + var(--j-disc-height,230px))}.j-preloader-line{font-size:12px}}
/* ===== style block 55 ===== */
/* 2026-09-16 (owner): every screen checked for layout, logic and use of space on a phone, a
tablet and a desktop — "сделай правильно, логично и ровно". Defects only, measured before
and after; nothing redesigned, no new visual system. */
/* 2026-09-16 · the caption's city/weather line is a 38px button on phones: a 44px hit area
through a pseudo-element, the lockup itself unmoved (390: 38 → 44; tablets too). */
@media(max-width:1000px){.j-hero .j-editorial-caption .j-location{position:relative}.j-hero .j-editorial-caption .j-location::before{content:'';position:absolute;left:0;right:0;top:-6px;bottom:0}}
/* 2026-09-16 · a fifth piece sat alone in the left column with half the screen empty beside it
(390: a 166×330 hole). An odd last card takes the whole row on phones, its packshot in a
wider, shorter frame so the garment stays about the same size; the browse stage follows.
(The grid ends with the hidden finishing card, so "last card" is the odd card no card follows.) */
@media(max-width:700px){.jd-item-grid>.jd-item-card:nth-child(odd):not(:has(~.jd-item-card)){grid-column:1/-1}.jd-item-grid>.jd-item-card:nth-child(odd):not(:has(~.jd-item-card))>.jd-item-image>.jd-product-art,.jd-item-grid>.jd-item-card:nth-child(odd):not(:has(~.jd-item-card)) .jd-alt-stage{aspect-ratio:16/10}}
/* 2026-09-16 · type under 9px was unreadable on a phone (6.5–7px tags and eyebrows, 8px hints,
categories, prices, progress and card labels): a 9px floor on phones, case and tracking as
they were. */
@media(max-width:700px){.jd-source-tag,.jd-category,.jd-eyebrow,.jd-finishing-card .jd-eyebrow,.jd-refine-brief,.jd-price-line>span,.jew-eyebrow,.jew-tabs>button.jew-tab-final .jew-final-kicker,.jew-progress,.ja-eyebrow,.ja-brief .ja-eyebrow,.ja-slot-top>small,.ja-photo-reference,.ja-field-hint,.ja-section-number,.ja-completion,.jp-identity-copy .j-eyebrow,.jp-avatar-card small,.jp-completion,.jp-local-badge,.jp-card-link,.jw-card-label,.jw-card-meta,.jw-card-actions button,.jp-summary-card .j-eyebrow,.ja-photo-prompt span,.ja-swatch span,.ja-clear,.ja-consent small,.j-page-footer span{font-size:9px}.jd-item-actions .jd-text-button{font-size:9px!important}.ja-photo-spec,.ja-footer-note,.ja-clear,.ja-consent label small{font-size:9px!important}}
/* 2026-09-16 · the avatar-studio card on a phone put its headline in a 155px column beside the
copy, one word a line ("A / reference. / A / reflection."): under 600px the card stacks —
headline, copy, count, button, note — each full width. */
@media(max-width:600px){.jp-avatar-card{grid-template-columns:1fr}.jp-avatar-card h2{grid-column:auto;grid-row:auto;margin:10px 0 6px}.jp-avatar-card p{grid-column:auto;grid-row:auto;margin-top:0;max-width:none}.jp-completion{grid-column:auto;grid-row:auto}.jp-avatar-card>a{grid-column:auto;grid-row:auto}.jp-avatar-card small{grid-column:auto}}
/* 2026-09-16 · the building strip on phones spent its first row on the spinner alone (118px
tall): icon and text share a row, the two actions get 44px hit areas without growing it. */
@media(max-width:700px){.jo-strip p{flex:1 1 0%;min-width:0}.jo-strip-actions{flex:1 0 100%;gap:14px}.jo-strip-actions .j-text-button{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0}}
/* 2026-09-16 · the tour's "Skip" was 27px wide; a 44px hit area in the same place. */
.jt-actions [data-jt=skip]{min-width:44px;min-height:44px;padding:6px 8px;margin-left:-8px}
/* 2026-09-16 · the budget slider was a 32px strip on phones; 44px tall, the 2px track still
centred and the thumb where it was. */
@media(max-width:700px){.jd-budget-control input[type=range]{height:44px}}
/* 2026-09-16 · wardrobe titles at 21px Bodoni in a 147px column ran to four lines
("Clip croco- / embossed / clutch off- / white"): 17px on phones, two lines. */
@media(max-width:700px){.jw-card-copy>strong{font-size:17px;min-height:40px}}
/* ===== style block 56 ===== */
/* 2026-09-16 (owner): "если фотографии ещё нет, а пользователь на диске выбрал режим, в котором
её нет, то можно отображать наш лоадинг в тех местах, где они пока генерируются."
`inline` is the stage while a photograph of hers is on it and the position the rings are
asking for is at the camera this minute.
Rewritten 2026-09-17. It used to be a small white pill in the bottom-left corner holding a
22px mark, and that pill is what the owner photographed: "это совсем не правильный
загрузчик!! у нас конфликт! у нас есть загрзучик, котоырй крутится кольцами в центре! он
приавльный и должен везде исопльзвоаться." So it is now the same centred mark as `full`,
in the same place on the screen, only smaller: 64px on a phone, 80px on a desktop against
the full scope's 96 / 120. Smaller because the photograph under it is a real answer she is
meant to keep looking at — the bands have gaps and no plate behind them, so the frame reads
straight through the mark.
Where it lands matters and is not luck. Block 54 already lifts the centre with a 12svh
bottom padding, which puts the rings at about 44% of the stage; her face sits at 27%
(`FACE_AT`, js/31-frame-engine.js). The mark therefore turns over the clothes, and her face
is never behind it.
The sentence stays directly under the mark, which is where block 54 already puts it. It was
tried at the foot of the stage first, on the reasoning that type across a photograph buries
it — and on a desktop it landed inside the ring instrument, which is a full-width arc there
and reaches 300 pixels up the screen (measured 2026-09-17, 1440x900: the line at 620 against
the arc at 597). One line of 11px type under a 64px mark is not a band across a picture, and
keeping the two together is what makes them one object rather than two notices. What they
sit over is her clothes: the pair runs from 40% to 52% of the stage while her face is
composed at 27% (`FACE_AT`).
It is set the way the editorial caption is set over a photograph — white, with a shadow,
and the mark with it — because ink on a frame nobody has seen yet is ink nobody can read. */
.j-preloader[data-scope=inline] .j-rings{width:64px;height:64px;filter:drop-shadow(0 1px 6px rgba(20,20,24,.55))}
.j-preloader[data-scope=inline] .j-preloader-line{color:#fff;opacity:1;text-shadow:0 1px 6px rgba(20,20,24,.72)}
.j-preloader[data-scope=inline]{gap:12px}
/* The third thing the line can say: this position is at the camera right now. */
.j-preloader[data-kind=making] [data-preloader=making]{display:inline}
@media(min-width:701px){.j-preloader[data-scope=inline] .j-rings{width:80px;height:80px}.j-preloader[data-scope=inline]{gap:14px}}
/* ===== style block 57 ===== */
/* 2026-09-16 · the first run, step by step, in the one sheet (js/platform/wizard.js).
Owner: "в этом окне нужно встроить визард по шагам… важно выбрать правильные компоненты:
слайдеры, пикеры и т.д., что будет удобно и минималистично в стиле системы". So: the same
paper, the same hairlines, Bodoni in the sheet's own head and Manrope below it; the mood
colour only where something is chosen or in progress, as everywhere else. Nothing here is
wider than the sheet, and every thing a finger has to hit is at least 44px. */
/* The sheet is a panel of a fixed size, and every screen fits inside it: she is setting up an
account, not reading a page (owner, 2026-09-16: "Все данные в нем должны попадать на 1
скрин… каждый шаг должен умещаться… Это UI а не книга"). The head, the stepper and the
button are fixed; only the stage between them changes, and it is the stage that carries the
height of whatever is on it. --jfw-room is what is left for it once the rest has had its
share; a screen that somehow exceeds it scrolls inside the stage rather than pushing the
button off the bottom of the panel. */
/* `[open]`, and it is not a detail: a dialog the browser has closed is display:none by the
user agent's own stylesheet, and `display:flex` here overrode that. So the moment the
wizard's markup existed the sheet was painted whether or not it was open — after she
pressed Start, the closed panel stayed on the screen over her studio, asking again for
the portrait she had just given, while her package built behind it (found 2026-09-17,
walking the first run end to end on a local studio). */
.j-dialog[open]:has(#jfw){display:flex;flex-direction:column;max-height:min(92svh,880px);overflow:hidden}
.j-dialog[open]:has(#jfw) .j-dialog-head{flex:none;padding-bottom:12px}
.j-dialog[open]:has(#jfw) .j-dialog-body{flex:1;min-height:0;display:flex;padding-bottom:22px}
.jfw{display:flex;flex-direction:column;width:100%;min-height:0}
.jfw-stage{position:relative;max-height:var(--jfw-room,calc(92svh - 260px));overflow:auto;overscroll-behavior:contain}
.jfw-stage[data-sliding]{overflow:hidden}
.jfw-stage[data-sliding] .jfw-step{position:absolute;left:0;right:0;top:0}
.jfw-foot{flex:none}
/* The stepper: a numbered circle for each screen, a line between them that fills as she
passes. A circle behind her is a button; one ahead of her is not. */
.jfw-rail{list-style:none;display:flex;align-items:center;gap:0;margin:0 0 18px;padding:0}
.jfw-rail li{display:flex;align-items:center;flex:1;min-width:0}
.jfw-rail li:last-child{flex:none}
.jfw-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:1.5px solid var(--j-line,#dfdfd9);border-radius:50%;background:var(--j-paper);font-size:11px;font-variant-numeric:tabular-nums;color:var(--j-muted);transition:border-color .25s ease,background .25s ease,color .25s ease}
button.jfw-mark{cursor:pointer;min-height:28px}
.jfw-rail li>i{display:block;flex:1;height:1.5px;margin:0 6px;background:var(--j-line,#dfdfd9);position:relative;overflow:hidden}
.jfw-rail li>i:after{content:'';position:absolute;inset:0;background:var(--j-ink);transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.16,.84,.44,1)}
.jfw-rail li[data-state=done]>i:after{transform:scaleX(1)}
.jfw-rail li[data-state=done] .jfw-mark{background:var(--j-ink);border-color:var(--j-ink);color:var(--j-paper)}
.jfw-rail li[data-state=done] .jfw-mark iconify-icon{width:13px;height:13px;font-size:13px}
.jfw-rail li[data-state=now] .jfw-mark{border-color:var(--j-mood);color:var(--j-ink);font-weight:600;box-shadow:0 0 0 4px color-mix(in srgb,var(--j-mood) 16%,transparent)}
.jfw-lead{margin:0 0 4px;font-size:13px;line-height:1.55;color:var(--j-muted)}
.jfw-note{margin:8px 0 0;font-size:11px;line-height:1.55;color:var(--j-muted)}
.jfw-error{margin:8px 0 0;font-size:12px;line-height:1.45;color:#a1504f}
.jfw .jp-field{margin:16px 0 0;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--j-muted)}
.jfw .jp-field>input{font-weight:400;letter-spacing:0;text-transform:none;color:var(--j-ink,#232324)}
/* The sign-up's own city search, reused whole (js/platform/auth.js): one city a row, 44px. */
.jfw .eh-city-results{display:grid;margin-top:-1px;border:1px solid #dad3c7;border-top:0;background:#fff}
.jfw .eh-city-results:empty{display:none}
.jfw .eh-city-results .j-note{margin:0;padding:10px 12px}
.jfw .eh-city-option{display:block;width:100%;min-height:44px;text-align:left;border:0;border-top:1px solid var(--j-line,#e7e1d8);background:none;padding:10px 12px;font:inherit;font-size:12px;color:var(--j-ink,#232324);cursor:pointer}
.jfw .eh-city-option:first-child{border-top:0}
.jfw .eh-city-option:hover,.jfw .eh-city-option:focus-visible{background:#f2efe8;outline:none}
.jfw .j-note{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--j-muted)}
.jfw .j-note:empty{display:none}
.jfw .eh-auth-status{margin:14px 0 0}
.jfw .eh-auth-status:empty{display:none}
/* Her portrait: one calm area, as large as the sheet allows, that is also the preview. */
.jfw-drop{position:relative;margin-top:16px}
.jfw-drop-hit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;aspect-ratio:3/4;max-height:38svh;margin:0 auto;border:1px dashed #c9c2b6;background:#fff;padding:18px;text-align:center;color:var(--j-muted)}
.jfw-drop-hit:hover,.jfw-drop-hit:focus-visible{border-color:var(--j-ink);color:var(--j-ink)}
.jfw-drop[data-has=yes] .jfw-drop-hit{border-style:solid;border-color:var(--j-line,#dfdfd9);padding:0;overflow:hidden}
.jfw-drop-hit img{width:100%;height:100%;object-fit:cover}
.jfw-drop-mark iconify-icon{width:26px;height:26px;font-size:26px}
.jfw-drop-label{font-size:13px;color:var(--j-ink)}
.jfw-drop-hint{font-size:11px}
.jfw-drop-remove{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(255,255,255,.92);border:1px solid var(--j-line,#dfdfd9);border-radius:50%}
.jfw-drop-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(250,249,246,.72)}
.jfw-camera{margin-top:10px}
/* The film: portrait, 720 x 1280, so it is given a height and takes its width from that.
Nothing around it — a caption under a film is a caption nobody reads. */
.jfw-film{display:flex;justify-content:center;margin-top:14px}
.jfw-film video{display:block;height:min(58svh,520px);width:auto;max-width:100%;aspect-ratio:9/16;background:#e6e3db;border:1px solid var(--j-line,#dfdfd9)}
.jfw-consent{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding-top:16px;border-top:1px solid var(--j-line,#dfdfd9);cursor:pointer;min-height:44px}
.jfw-consent input{flex:none;width:17px;height:17px;min-height:17px;margin:3px 0 0;accent-color:var(--j-ink)}
.jfw-consent strong{display:block;font-size:13px;line-height:1.4;font-weight:600}
.jfw-consent small{display:block;margin-top:5px;font-size:11px;line-height:1.55;color:var(--j-muted)}
/* Her measurements: a row each — the name, the number, the slider under both. A slider is
the right instrument here because none of these is a fact she looks up; it is a place she
settles on, and the number beside it says exactly where she settled. */
.jfw-units{display:inline-flex;margin:12px 0 2px;border:1px solid var(--j-line,#dfdfd9)}
.jfw-units button{min-width:54px;min-height:40px;padding:0 14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--j-muted)}
.jfw-units button[aria-pressed=true]{background:var(--j-ink);color:var(--j-paper)}
/* Two columns wherever the sheet is wide enough, because six rows of a name, a number and a
slider is the tallest thing in the wizard and it was being scrolled: on a laptop window
747px tall the shoe size fell off the bottom of the panel, which is the one thing this
sheet may not do (owner, 2026-09-17, asking for the whole journey to be walked again).
A narrow phone keeps one column and has the height for it. */
.jfw-measures{margin-top:4px;display:grid;grid-template-columns:1fr;column-gap:20px}
.jfw-measure{display:grid;grid-template-columns:1fr auto 36px;align-items:center;column-gap:8px;padding:2px 0 0;border-top:1px solid var(--j-line,#dfdfd9)}
.jfw-measure label{font-size:12px;min-width:0}
.jfw-measure output{font-size:13px;font-variant-numeric:tabular-nums;color:var(--j-muted)}
.jfw-measure[data-set=yes] output{color:var(--j-ink);font-weight:600}
.jfw-measure input[type=range]{grid-column:1/-1;width:100%;min-height:38px;height:38px;appearance:none;-webkit-appearance:none;margin:0;background:transparent;cursor:ew-resize}
.jfw-measure input[type=range]::-webkit-slider-runnable-track{height:2px;background:#c8c5c0}
.jfw-measure input[type=range]::-moz-range-track{height:2px;background:#c8c5c0}
.jfw-measure input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border:4px solid #fff;border-radius:50%;background:#bdb8ae;box-shadow:0 0 0 1px #c8c5c0}
.jfw-measure input[type=range]::-moz-range-thumb{width:12px;height:12px;border:4px solid #fff;border-radius:50%;background:#bdb8ae;box-shadow:0 0 0 1px #c8c5c0}
.jfw-measure[data-set=yes] input[type=range]::-webkit-slider-thumb{background:var(--j-mood);box-shadow:0 0 0 1px #00000026}
.jfw-measure[data-set=yes] input[type=range]::-moz-range-thumb{background:var(--j-mood);box-shadow:0 0 0 1px #00000026}
.jfw-clear{display:inline-flex;align-items:center;justify-content:center;width:36px;height:38px;margin-right:-6px;color:var(--j-muted)}
.jfw-clear[hidden]{display:none}
.jfw-clear iconify-icon{width:14px;height:14px;font-size:14px}
/* Her colouring: real colour in a circle with its name under it, never a select. Hair length
is drawn rather than tinted — the same circle, one ink stroke growing. */
.jfw-swatches{border:0;margin:14px 0 0;padding:0}
.jfw-swatches legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:0;margin-bottom:7px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--j-muted)}
.jfw-swatches legend span{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--j-ink)}
.jfw-swatches>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px 4px}
.jfw-swatch{display:grid;justify-items:center;gap:5px;min-height:44px;padding:2px;font-size:9px;line-height:1.25;text-align:center;color:var(--j-muted)}
.jfw-swatch i{display:block;width:30px;height:30px;border-radius:50%;border:1px solid #00000014;box-shadow:0 0 0 0 var(--j-ink);transition:box-shadow .16s ease}
.jfw-swatch.jfw-on i{box-shadow:0 0 0 2px var(--j-paper),0 0 0 4px var(--j-ink)}
.jfw-swatch.jfw-on{color:var(--j-ink);font-weight:600}
.jfw-swatch i.jfw-length{background:#fff}
.jfw-swatch i.jfw-length svg{width:100%;height:100%;fill:none;stroke:var(--j-ink);stroke-width:1.4;stroke-linecap:round}
/* The last screen: two ways of getting the same two views, one of which is chosen. Both have
to be comfortable and both have to fit (owner, 2026-09-16), so the tiles only appear under
the card she picked — two cards and four boxes at once fits nothing. */
.jfw-choice{display:grid;gap:8px;margin-top:14px}
.jfw-choice button{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;text-align:left;border:1px solid var(--j-line,#dfdfd9);background:#fff;padding:13px 14px;min-height:44px}
.jfw-choice iconify-icon{grid-row:1/3;width:18px;height:18px;font-size:18px;color:var(--j-muted)}
.jfw-choice strong{font-size:13px;font-weight:600;line-height:1.3}
.jfw-choice small{font-size:11px;line-height:1.45;color:var(--j-muted);margin-top:2px}
.jfw-choice button[aria-pressed=true]{border-color:var(--j-ink);box-shadow:inset 0 0 0 1px var(--j-ink)}
.jfw-choice button[aria-pressed=true] iconify-icon{color:var(--j-mood)}
.jfw-view-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.jfw-view-tiles .jfw-drop{margin-top:0}
.jfw-view-tiles .jfw-drop-hit{aspect-ratio:3/4;max-height:26svh;padding:10px}
.jfw-view-tiles .jfw-drop-label{font-size:11px}
.jfw-view-tiles .jfw-drop-hint{font-size:9px}
/* The way on, and the way back. */
.jfw-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.jfw-nav .j-button{flex:0 1 auto;margin-top:0;min-height:46px}
.jfw-back{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 4px;font-size:11px;color:var(--j-muted)}
.jfw-back iconify-icon{width:14px;height:14px;font-size:14px}
.jfw-step:focus{outline:none}
@media(min-width:520px){.jfw-measures{grid-template-columns:1fr 1fr}.jfw-measure:nth-child(2){border-top:1px solid var(--j-line,#dfdfd9)}}
@media(min-width:601px){.jfw-choice{grid-template-columns:1fr 1fr}.jfw-choice button{grid-template-rows:auto 1fr}}
@media(max-width:700px){.j-dialog[open]:has(#jfw){max-height:94svh}.jfw-stage{--jfw-room:calc(94svh - 232px)}.jfw-film video{height:min(50svh,460px)}}
@media(max-width:400px){.jfw-mark{width:25px;height:25px;font-size:10px}.jfw-swatches>div{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}}
@media(prefers-reduced-motion:reduce){.jfw-swatch i,.jfw-mark,.jfw-rail li>i:after{transition:none}}
/* ===== style block 58 ===== */
/* 2026-09-16 · a band that carries one position.
Owner, with a screenshot of his own finished package: "Кольца должны полностью соответствовать
.../package-shape, всем настройкам, которые тут!" A studio paying for one makeup palette leaves
that ring with a single value, and `JoyfulRingDial` now draws such a band as what it is: one
word under the glass, no repeats around the ring, no turn, no detent click. All this adds is the
quiet — the band keeps its paper but stops asking to be held, and the word itself stays at full
strength, because the word is the answer. */
.j-disc[data-hover-locked=true]{cursor:default}
.j-hero .j-disc[data-hover-locked=true]{cursor:default;--j-hover-outer:0;--j-hover-middle:0;--j-hover-inner:0}
.j-disc .j-band[data-locked=true] .j-ring-track{stroke-opacity:.72}
/* The row above the dial is the keyboard's way in, and it must not promise a turn either. */
.j-axis-tabs button[data-locked=true]{opacity:.6}
/* ===== style block 59 ===== */
/* My avatar shows what the studio photographed (2026-09-16).
Her portrait is the whole requirement; the standing frame and the profile are taken from it
at the start of every build, and this page had no way to show them — so it went on asking for
photographs that already existed (owner: "В профиле пользователя в аватаре нет фотографий
сгенерированных, система просит их добавить. Но они же уже запущенные."). Two quiet marks
and nothing else: a badge that says whose frame it is, and the studio's own slow pulse over a
slot being photographed right now. No new visual system — the badge is `.ja-photo-reference`
with an icon, and the pulse is the paper the empty slot already has. */
.ja-photo-reference.ja-photo-studio{display:inline-flex;align-items:center;gap:5px}
.ja-photo-reference.ja-photo-studio iconify-icon{width:9px;height:9px;font-size:9px}
.ja-photo-window.ja-photo-making{animation:ja-photographing 3.4s ease-in-out infinite}
.ja-photo-window.ja-photo-making .ja-photo-prompt{color:#6f6659}
@keyframes ja-photographing{0%,100%{background:#f0ece4}50%{background:#e9e3d7}}
@media(prefers-reduced-motion:reduce){
.ja-photo-window.ja-photo-making{animation:none}
.ja-photo-window.ja-photo-making{background:#e9e3d7}
}
/* ===== style block 60 ===== */
/* The stage says whose photographs these are (2026-09-16).
Owner: "когда уже сгенерированно достаточное приемлимое клочество фоток, то можно уже начать
показывать девушке ее фотографии вместо демо данных, а в тех местах где фотографии еще
продолжают генерироваться, пускай крутиться наш загрузчик." Until her first look is
photographed the stage carries the demo, and nothing on it said so: the corner mark was
switched off while the package was somebody else's, and the studio strip — the only other
voice — can be put away with "Not now". The fourth thing the line can say, in the pill block
56 already draws, is that these frames are prepared and hers are at the camera. */
.j-preloader[data-kind=demo] [data-preloader=demo]{display:inline}
/* ===== style block 61 ===== */
/* The way out, where a person looks for it (2026-09-17).
Owner: "сейчас очень не интуитивно и не понятно сделан выход из аккаунта… при нажатии на
иконку аккаунта выдвать меню с ваозможностью выдти или зайти в деатили или в аватар…
Возможно то что у нас отркывается из трех точек в верхнем правом углу, нужно объединить с
аккаунотом и иконкой аватара." The second button in the header is gone; what it held hangs
off the account control as one sheet of paper unrolling from the masthead. It is the
atelier's own chrome and nothing else: paper, one hairline between groups, Bodoni for the
name and Manrope under it, and the mood colour on the single row that marks where she
already is — the one thing here that is a choice in progress. */
.j-account-menu{position:absolute;top:100%;right:0;z-index:12;width:min(330px,calc(100vw - 24px));margin-top:9px;background:var(--j-paper);border:1px solid var(--j-line);box-shadow:0 20px 60px #2323240f;text-align:left;overflow:hidden}
.j-account-menu[hidden]{display:none}
.j-account-who{display:flex;align-items:center;gap:13px;padding:17px 18px 15px;border-bottom:1px solid var(--j-line)}
.j-account-who>img{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;background:#eeece6}
.j-account-who>iconify-icon{width:21px;height:21px;font-size:21px;color:var(--j-muted)}
.j-account-who>div{min-width:0}
.j-account-who strong{display:block;font:400 22px/1.12 var(--j-serif);letter-spacing:-.025em;font-weight:400;overflow-wrap:anywhere}
/* A shade darker than the atelier's usual quiet grey. These lines say what signing out costs
and whose file this is, at 9px, so they have to clear 4.5:1 against the paper; `--j-muted`
reaches 4.33 (WCAG 2.2, 1.4.3). */
.j-account-who span{display:block;margin-top:5px;font-size:9px;line-height:1.6;color:#6f6a62;overflow-wrap:anywhere}
.j-account-door{padding:15px 18px;border-bottom:1px solid var(--j-line)}
.j-account-door .j-button{font-size:11px}
.j-account-quiet{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:4px;font-size:10px;color:#6f6a62;text-decoration:underline;text-underline-offset:5px}
.j-account-group{padding:5px 0;border-bottom:1px solid var(--j-line)}
.j-account-group:last-child{border-bottom:0}
.j-account-row{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 18px;font-size:11px;line-height:1.5;text-align:left;color:inherit;background:none;border:0;border-left:2px solid transparent}
.j-account-row>iconify-icon{width:15px;height:15px;font-size:15px;flex:none;color:#9a9288}
.j-account-row:hover{background:#f2f0ea}
/* Where she already is. The only colour in the panel, and it means the same thing it means on
the rings: this one is chosen. */
.j-account-row[aria-current=page]{border-left-color:var(--j-mood,var(--j-ink))}
.j-account-row[aria-current=page]>span{font-weight:600}
/* The expensive press, alone under its own rule and in the colour the product keeps for
"delete my account". Leaving the demo sits in the same slot in plain ink, because it costs
nothing — that difference is the whole point of them looking different. */
.j-account-exit .j-account-row[data-eh=signout],.j-account-exit .j-account-row[data-eh=signout]>iconify-icon{color:#9d4b4f}
.j-account-note{padding:2px 18px 12px;margin:0;font-size:9px;line-height:1.7;color:#6f6a62}
.j-account-entry[aria-expanded=true]{background:#00000008}
@media(max-width:700px){
.j-account-menu{width:min(320px,calc(100vw - 20px));margin-top:7px}
.j-account-who{padding:15px 16px 13px}
.j-account-who strong{font-size:20px}
.j-account-row{padding-inline:16px;font-size:10px}
.j-account-door,.j-account-note{padding-inline:16px}
}
/* ===== style block 62 ===== */
/* 2026-09-17. Which chapter she is in.
*
* The owner, three times in one morning. First: "пользователю совершенно не понтяно про вот эти
* 1 2 3 шага и про кнопку журнала. нужно приудмать ка кэфектно сделтаь так что бы было видно
* когда они выбранны каждый из шагов." Then: "просто не понятн окогда он выбран, или другие
* разделы. нужно придумать ка кбудет рабоать ховр и опдсветка выбранного раздела." And, after
* one more look: "я гвоорю что сейчас не видно что именно выбранно. и цвет почти не меняется."
*
* He was right every time, and measurably so. The selected chapter was #f0e9e6 on #faf9f6 paper
* — a difference of about two per cent of lightness — and hover was #f2edeb, which is the same
* two per cent again, so the hovered chapter and the selected chapter were to the eye the same
* colour. The 2px gradient meant to carry the state sat at bottom:-1px inset 24px, along the one
* edge the full-width dark band covers: on a desktop screen a sliver of it survived. It was
* decoration that read as nothing. It is gone.
*
* The failure was tuning a tint instead of changing the size of the difference, so the selected
* chapter is now inverted. Inversion is the one large device this product already owns, and it
* is exactly why the dark finale band is the thing on that strip nobody misreads. The ground is
* ink stained with --j-mood — the colour on the ring, which is this product's existing sentence
* for "this is the one": it paints "Her" in the wordmark, the name in the personal space, and
* "You" in the finale lockup. Selected against resting is now 98% → 23% lightness instead of
* 98% → 96%, and turning the ring restains it, so the colour does change.
*
* One mark carries the state everywhere, on paper and on the dark band alike: the hairline along
* a tab's top edge, which is .jew-tab-line moved from the bottom (occluded, inset) to the top
* (free, full bleed). Resting it is the strip's own --jew-line. Hovered it is 3px of the mood at
* 60%. Pressed — the only feedback a phone gets, since -webkit-tap-highlight-color is
* transparent — it is 3px of the mood at full strength over a deeper ground. Selected it is 5px
* of the mood over the inverted block. Hover is a small rehearsal of selected rather than a
* separate idea, and selected-and-hovered is the same block one shade warmer, not a fifth thing.
*
* Resting has its own answer, because "can this be pressed" is a different question from "is
* this the one": the name is ink rather than muted, and every tab carries its kind above the
* number, since "01 02 03" alone never said what the three of them were.
*
* The dark band keeps its weight, its treatment and its place in the centre — the owner confirmed
* all three are deliberate ("поэтмоу он как бы в центре и это хорошо") — and answers the same two
* questions in the same language, on dark.
*/
.jew-tabs{
--jew-mood:var(--j-mood,#ee784c);
--jew-hover:color-mix(in srgb,var(--jew-mood) 18%,var(--jew-paper));
--jew-press:color-mix(in srgb,var(--jew-mood) 30%,var(--jew-paper));
--jew-on:color-mix(in srgb,var(--jew-mood) 27%,#201d1f);
--jew-on-hover:color-mix(in srgb,var(--jew-mood) 36%,#201d1f);
--jew-on-dark:color-mix(in srgb,var(--jew-mood) 36%,#201d1f);
--jew-on-dark-hover:color-mix(in srgb,var(--jew-mood) 46%,#201d1f);
--jew-rail-soft:color-mix(in srgb,var(--jew-mood) 60%,transparent);
--jew-bright:color-mix(in srgb,var(--jew-mood) 70%,#fff);
}
/* The rail: one element, four heights, along the edge nothing covers. */
.jew-tabs>button .jew-tab-line,.jew-tabs>button.jew-tab-final .jew-tab-line{
top:-1px;bottom:auto;left:0;right:0;height:0;background:var(--jew-rail-soft);
transition:height .16s ease,background .16s ease;
}
.jew-tabs>button{transition:background .18s ease,color .18s ease}
/* The kind of thing this tab is, and — when it is the open one — that she is standing in it.
Two sentences, two elements, so the language layer translates both and CSS chooses. */
.jew-tab-kind{display:block;min-width:0;font:600 8.5px/1.45 var(--jew-sans);letter-spacing:.15em;text-transform:uppercase}
.jew-kind-idle{color:#9a8f8b}
.jew-kind-here{color:#fff}
.jew-tabs>button:not([aria-selected=true]) .jew-kind-here{display:none}
.jew-tabs>button[aria-selected=true] .jew-kind-idle{display:none}
.jew-tabs>button[aria-selected=true] .jew-final-kicker{display:none}
/* ---- the three chapters, on paper ---- */
.jew-tabs>button:not(.jew-tab-final){
display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;align-items:center;
gap:3px 15px;padding:14px 24px;min-height:84px;
}
.jew-tabs>button:not(.jew-tab-final) .jew-tab-kind{grid-column:1/-1;grid-row:1}
.jew-tabs>button:not(.jew-tab-final) .jew-step-number{grid-column:1;grid-row:2}
.jew-tabs>button:not(.jew-tab-final) .jew-step-name{grid-column:2;grid-row:2}
/* 1 · resting, and visibly one of a set that can be pressed. */
.jew-tabs>button:not(.jew-tab-final)[aria-selected=false]{background:var(--jew-paper)}
.jew-tabs>button:not(.jew-tab-final)[aria-selected=false] .jew-step-name{color:var(--jew-ink);font-weight:500}
.jew-tabs>button:not(.jew-tab-final)[aria-selected=false] .jew-step-number{color:#ab9d98}
/* 2 · hovered — a small rehearsal of what pressing would do. */
@media(hover:hover){
.jew-tabs>button:not(.jew-tab-final)[aria-selected=false]:hover{background:var(--jew-hover)}
.jew-tabs>button:not(.jew-tab-final)[aria-selected=false]:hover .jew-tab-line{height:3px}
.jew-tabs>button:not(.jew-tab-final)[aria-selected=false]:hover .jew-step-name{font-weight:600}
}
/* 3 · pressed — the whole of a phone's feedback. */
.jew-tabs>button:not(.jew-tab-final)[aria-selected=false]:active{background:var(--jew-press)}
.jew-tabs>button:not(.jew-tab-final)[aria-selected=false]:active .jew-tab-line{height:3px;background:var(--jew-mood)}
/* 4 · selected — inverted, stained with the colour on the ring. */
.jew-tabs>button:not(.jew-tab-final)[aria-selected=true]{background:var(--jew-on);border-left-color:transparent}
.jew-tabs>button:not(.jew-tab-final)[aria-selected=true] .jew-tab-line{height:5px;background:var(--jew-mood)}
.jew-tabs>button:not(.jew-tab-final)[aria-selected=true] .jew-step-number{color:var(--jew-bright)}
.jew-tabs>button:not(.jew-tab-final)[aria-selected=true] .jew-step-name{color:#fff;font-weight:600}
.jew-tabs>button:not(.jew-tab-final)[aria-selected=true] .jew-kind-here{color:#ffffffd1}
/* 5 · selected and hovered — the same block, one shade warmer. */
@media(hover:hover){.jew-tabs>button:not(.jew-tab-final)[aria-selected=true]:hover{background:var(--jew-on-hover)}}
/* 6 · focused from the keyboard is the outline style block 14 already draws, untouched. */
/* ---- the finale, on dark. Its weight, its treatment and its centre stay; only the state
language and the words are new. ---- */
.jew-tabs>button.jew-tab-final .jew-final-kicker{color:#ffffffd1}
.jew-tabs>button.jew-tab-final .jew-kind-here{color:#fff}
.jew-tabs>button.jew-tab-final[aria-selected=false]{background:#262626}
@media(hover:hover){
.jew-tabs>button.jew-tab-final[aria-selected=false]:hover{background:color-mix(in srgb,var(--jew-mood) 13%,#262626)}
.jew-tabs>button.jew-tab-final[aria-selected=false]:hover .jew-tab-line{height:3px}
}
.jew-tabs>button.jew-tab-final[aria-selected=false]:active{background:color-mix(in srgb,var(--jew-mood) 22%,#262626)}
.jew-tabs>button.jew-tab-final[aria-selected=false]:active .jew-tab-line{height:3px;background:var(--jew-mood)}
.jew-tabs>button.jew-tab-final[aria-selected=true]{background:var(--jew-on-dark)}
.jew-tabs>button.jew-tab-final[aria-selected=true] .jew-tab-line{height:5px;background:var(--jew-mood)}
@media(hover:hover){.jew-tabs>button.jew-tab-final[aria-selected=true]:hover{background:var(--jew-on-dark-hover)}}
/* ---- the phone: the tabs still stack, and the kind sits above the number ---- */
@media(max-width:700px){
.jew-tabs>button:not(.jew-tab-final){
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:5px;padding:11px 5px;min-height:88px;text-align:center;
}
.jew-tab-kind{font-size:7.5px;letter-spacing:.09em;text-align:center}
}
@media(max-width:350px){
.jew-tabs>button:not(.jew-tab-final){padding-inline:4px;gap:4px}
.jew-tab-kind{font-size:7px;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){
.jew-tabs>button,.jew-tabs>button .jew-tab-line{transition:none}
}
/* ===== style block 63 ===== */
/* One waiting mark, drawn in one place (2026-09-17).
Owner, on a screenshot of a small white capsule in the corner of the stage: "это совсем не
правильный загрузчик!! у нас конфликт! у нас есть загрзучик, котоырй крутится кольцами в
центре! он приавльный и должен везде исопльзвоаться."
There were three. The stage drew the rings (block 54); block 56 shrank the same rings into a
corner pill; and `lucide:loader` turned on `jo-spin` in the studio card's stage list, in the
building strip and in the wizard's photograph tile — a different mark with a different
motion, which is how a product ends up saying "wait" in three accents. The iconify spinner
and `jo-spin` are gone.
`js/25-loader.js` writes the only markup; this is the only rule set that turns anything. A
place asks for a size and a tone and gets the rings. The bands are the dial's own: outer,
middle (the mood colour — the one place colour is allowed), inner, turning against each
other. `currentColor` carries the tone so a size change never drags a palette with it. */
.j-rings{display:block;flex:0 0 auto;overflow:visible;transform:rotate(-90deg);color:var(--j-ink)}
.j-rings-track circle{fill:none;stroke:currentColor;stroke-width:28;opacity:.12}
.j-rings-band{fill:none;stroke:currentColor;stroke-width:28;stroke-linecap:butt;transform-origin:50% 50%;transform-box:fill-box;animation:j-rings-turn 5.6s cubic-bezier(.45,.05,.55,.95) infinite}
.j-rings-band[data-band=outer]{stroke-dasharray:.62 .38;opacity:.38}
.j-rings-band[data-band=middle]{stroke:var(--j-mood);stroke-dasharray:.46 .54;animation-name:j-rings-turn-back;animation-duration:4.4s;transition:stroke .5s ease}
.j-rings-band[data-band=inner]{stroke-dasharray:.72 .28;opacity:.2;animation-duration:7.2s}
/* Over a photograph or the grey stage, the same instrument in paper. */
.j-rings[data-tone=paper]{color:var(--j-paper)}
.j-rings[data-tone=paper] .j-rings-track circle{opacity:.14}
.j-rings[data-tone=paper] .j-rings-band[data-band=outer]{opacity:.92}
.j-rings[data-tone=paper] .j-rings-band[data-band=inner]{opacity:.5}
@keyframes j-rings-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes j-rings-turn-back{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
/* Nothing turns; the mark is still the mark, and every sentence beside it is untouched. */
@media(prefers-reduced-motion:reduce){.j-rings-band{animation:none}}
/* The three places that used to hold a spinner. Each keeps its own hit area, its own row and
its own words; only the drawing between them changed. The stage sets its own sizes in
blocks 54 and 56, because they follow the viewport. */
.jo-stages .j-rings{width:15px;height:15px}
.jo-strip .j-rings{width:18px;height:18px}
.jfw-drop-busy .j-rings{width:34px;height:34px}
/* And two the sweep turned up in My avatar: a `lucide:aperture` blinking over a slot that is at
the camera, and a 7px dot pulsing while the sheet saved. Both sat at the size of the icons
beside them, and both keep it. */
.ja-photo-prompt .j-rings{width:13px;height:13px}
.ja-autosave-mark .j-rings{width:15px;height:15px}