/* Default ice-blue glass theme, shared by Chinese, English and Japanese pages. */
html.studio-demo {
    --ink: #17334e;
    --muted: #48647e;
    --paper: #e7f1fa;
    --card: #f3f8fd;
    --line: #b9cfe2;
    --accent: #2865a8;
    --accent-dark: #1a4e86;
    --accent-soft: #dcecfb;
    --warm: #2865a8;
    --shadow: none;
    background: var(--paper);
}
.studio-demo body { background: var(--paper); font-family: 'Helvetica Neue', 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
.studio-demo .app-shell { width: min(100%, 1320px); padding: 28px 40px 44px; }
.studio-demo .hero { display: grid; grid-template-columns: 1fr; padding: 0; }
.studio-demo .hero-top { grid-column: 1 / -1; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.studio-demo .brand { color: var(--ink); font-size: .78rem; letter-spacing: .04em; font-weight: 800; }
.studio-demo .brand span { background: var(--accent); width: 34px; height: 34px; border-radius: 7px; font-size: 1rem; }
.studio-demo .language-switcher { border: 1px solid var(--line); padding: 4px; background: transparent; }
.studio-demo .language-switcher a { width: 36px; height: 32px; color: var(--ink); font-weight: 600; }
.studio-demo .language-switcher a[aria-current='page'] { color: white; }
.studio-hero-copy { padding: 64px 0 52px; align-self: center; }
.studio-demo .scene-tag { margin: 0 0 24px !important; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: .83rem !important; font-weight: 500; color: var(--muted) !important; }
.studio-demo .hero h1 { font-family: inherit; font-size: clamp(3.2rem, 5.6vw, 5.6rem); line-height: 1.13; letter-spacing: -.065em; font-weight: 850; margin: 0 0 30px; }
html.studio-demo[lang='ja'] .hero h1 { font-family: inherit; }
.studio-demo .studio-hero-copy > p:not(.scene-tag) { max-width: 28rem; margin: 0; font-size: .97rem; line-height: 1.85; color: var(--muted); }
.studio-start { display: inline-flex; gap: 38px; align-items: center; min-height: 62px; padding: 0 26px; margin-top: 32px; background: var(--accent); color: white; text-decoration: none; border-radius: 8px; font-size: .93rem; font-weight: 650; transition: background 220ms ease; }
.studio-start > span:last-child { font-size: 1.5rem; transition: transform 220ms ease; }
.studio-start:hover { background: var(--accent-dark); }
.studio-start:hover > span:last-child { transform: translate(3px,3px); }
.studio-journey { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio-journey p { display: flex; gap: 18px; align-items: baseline; margin: 0; font-size: .82rem; color: var(--muted); }
.studio-journey span { font-size: 1rem; font-weight: 500; color: var(--accent); }
.studio-demo .progress-wrap { max-width: 1040px; margin: 66px auto 24px; padding: 18px 0 12px; background: rgba(242,243,245,.96); }
.studio-demo .progress-copy { margin-bottom: 15px; }
.studio-demo .progress-copy span { font-size: .76rem; }
.studio-demo .progress-copy strong { font-size: .94rem; font-weight: 600; }
.studio-demo .progress-track { height: 3px; background: #d9dbe2; border-radius: 0; }
.studio-demo .progress-track span { transition: width 550ms cubic-bezier(.22,1,.36,1); }
.studio-demo .notice, .studio-demo .wizard { max-width: 1040px; margin-left: auto; margin-right: auto; }
.studio-demo .wizard { scroll-margin-top: 86px; }
.studio-demo .step-panel { padding: 42px; background: #fff; border-color: #e0e2e9; border-radius: 12px; box-shadow: none; }
.studio-demo .step-heading { padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.studio-demo .step-heading > span { font-family: inherit; color: var(--accent); letter-spacing: .04em; font-weight: 550; }
.studio-demo .step-heading h2 { font-family: inherit; font-size: clamp(1.75rem,3.2vw,2.5rem); letter-spacing: -.045em; font-weight: 750; margin: 14px 0 12px; }
.studio-demo .step-heading p { font-size: .88rem; }
.studio-demo .current-hair-group legend { font-family: inherit; font-size: 1.05rem; font-weight: 650; }
.studio-demo .question-group legend { font-weight: 650; font-size: .94rem; margin-bottom: 17px; }
.studio-demo .question-group { padding-top: 25px; padding-bottom: 25px; }
.studio-demo .current-hair-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.studio-demo .option-card, .studio-demo .choice-chip { border-width: 1px; border-radius: 8px; box-shadow: none; transition: background 220ms, border-color 220ms, color 220ms; }
.studio-demo .current-hair-card { min-height: 116px; padding: 20px 18px; }
.studio-demo .current-hair-card strong { font-size: .94rem; font-weight: 650; }
.studio-demo .current-hair-card small { font-size: .76rem; }
.studio-demo .current-hair-card > i { top: 14px; right: 12px; }
.studio-demo .option-card:has(input:checked), .studio-demo .choice-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.studio-demo .option-card:has(input:checked) > i { color: white; border-color: var(--accent); background: var(--accent); }
.studio-demo .option-card:has(input:focus-visible), .studio-demo .choice-chip:has(input:focus-visible), .studio-demo .segmented-options label:has(input:focus-visible) { outline: 3px solid #263bcc66; outline-offset: 3px; }
.studio-demo .choice-chip { min-height: 56px; }
.studio-demo .choice-chip span { font-size: .85rem; font-weight: 550; }
.studio-demo .primary-button, .studio-demo .secondary-button { border-radius: 8px; min-height: 58px; font-size: .9rem; font-weight: 600; transition: background 220ms; box-shadow: none; }
.studio-demo .primary-button:hover:not(:disabled) { background: var(--accent-dark); }
.studio-demo .secondary-button { background: white; }
.studio-demo .secondary-button:hover:not(:disabled) { background: #e8eaf0; }
.studio-demo .wizard-actions { margin-top: 20px; gap: 16px; }
.studio-demo .privacy-note { max-width: 1040px; margin: 23px auto 0; text-align: left; line-height: 1.8; }
.studio-demo .preview-confirm { background: #f4f5fc; padding: 30px; border: 1px solid #d6dcfa; border-radius: 10px; box-shadow: none; }
.studio-demo .is-active .preview-confirm { animation: none; }
.studio-demo .preview-confirm h2, .studio-demo .preview-result h2 { font-family: inherit; font-size: 2rem; font-weight: 750; letter-spacing: -.04em; }
.studio-demo .preview-parameters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; }
.studio-demo .preview-parameters > div { border-color: #dce0ef; padding: 13px 0; }
.studio-demo .preview-prompt-panel { background: white; border-radius: 8px; padding: 18px; }
.studio-demo .preview-prompt-text { border-radius: 6px; }
.studio-demo .preview-generate { background: var(--accent); }
.studio-demo .preview-loading { background: #e6eafe; border-radius: 8px; }
.studio-demo .preview-shimmer { animation-duration: 2.8s; }
.studio-demo .preview-view-grid { gap: 18px; }
.studio-demo .preview-image { border-radius: 8px; background: #eef0f5; }
.studio-demo .preview-view-grid figcaption { text-align: left; font-weight: 600; }
.studio-demo .preview-result-status, .studio-demo .preview-error { border-radius: 8px; }
.studio-demo .sentence-card, .studio-demo .adjustment-result-card { background: var(--accent); border-radius: 10px; padding: 26px; }
.studio-demo .sentence-card > p, .studio-demo .adjustment-result-card > p { color: #fff; opacity: .8; }
.studio-demo .summary-list > div { grid-template-columns: 11rem minmax(0,1fr); }
.studio-demo .result-language-control { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-bottom: 26px; padding: 18px 20px; background: #edf7ff99; border: 1px solid #ffffffcc; border-radius: 16px; }
.studio-demo .result-language-control label { font-size: .94rem; font-weight: 650; }
.studio-demo .result-language-control select { font: inherit; color: var(--ink); background: #f5faff; border: 1px solid var(--line); border-radius: 9px; min-height: 44px; padding: 8px 12px; }
.studio-demo .result-language-control select:focus-visible { outline: 3px solid #7485ff; outline-offset: 3px; }
.studio-demo .result-language-control p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.studio-demo .fullscreen-mode { background: #f8f9fc; }
.studio-demo .barber-sentence { background: #edf0fa; border-radius: 10px; }
.studio-demo .barber-sentence > p { color: var(--accent); }
.studio-demo .photo-uploader label { background: #f4f5fc; border-color: #b5bde1; border-radius: 8px; }
.studio-demo a:focus-visible, .studio-demo button:focus-visible { outline: 3px solid #7485ff; outline-offset: 4px; }
/* Ice-blue glass: clear hair images, frosted UI surfaces and quiet highlights. */
.studio-demo body {
    background: radial-gradient(ellipse at 82% 14%, #a8c9e5 0, transparent 45%),
        radial-gradient(ellipse at 6% 60%, #bfd9ec 0, transparent 45%), linear-gradient(145deg, #eff6fd, #d2e5f4 60%, #e6f0fa);
}
.studio-demo body::before {
    content: ''; position: fixed; inset: -40px 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at 75% 32%, #83b7e36b, transparent 65%),
        linear-gradient(160deg, #f6fbff80, #c3dff15c);
    opacity: var(--scroll-wash, 0); transform: translateY(var(--scroll-drift, 0px));
}
.studio-demo .app-shell { position: relative; z-index: 1; }
.studio-demo .studio-reveal {
    opacity: .58; transform: translateY(16px);
    transition: opacity 650ms ease, transform 650ms cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
}
.studio-demo .studio-reveal.is-in-view { opacity: 1; transform: translateY(0); }
.studio-demo .studio-start:active, .studio-demo .primary-button:active:not(:disabled) { transform: translateY(1px); }
.studio-demo .hero-top { border-bottom-color: #ffffff99; }
.studio-demo .brand span { background: linear-gradient(145deg,#6898c8cc,#326fad); border: 1px solid #ffffff99; box-shadow: inset 0 1px 1px #ffffff80, 0 4px 12px #254e7720; }
.studio-demo .language-switcher, .studio-demo .studio-journey {
    background: #f2f8ff55; border: 1px solid #ffffffad;
    backdrop-filter: blur(14px) saturate(125%); -webkit-backdrop-filter: blur(14px) saturate(125%);
    box-shadow: inset 0 1px 0 #ffffff99;
}
.studio-demo .language-switcher a[aria-current='page'] { background: linear-gradient(145deg,#6797c7,#2c629b); }
.studio-journey { padding: 22px 28px; border-radius: 18px; }
.studio-start, .studio-demo .primary-button { background: linear-gradient(145deg,#5d91c3,#2865a8); border: 1px solid #ffffff80; box-shadow: inset 0 1px 0 #ffffff66, 0 8px 20px #315f8d26; }
.studio-start:hover, .studio-demo .primary-button:hover:not(:disabled) { background: linear-gradient(145deg,#497fb2,#1a4e86); }
.studio-demo .progress-wrap { background: #e8f3fcbd; border: 1px solid #ffffffc7; padding: 16px 20px 14px; border-radius: 16px;
    backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); box-shadow: 0 6px 22px #355d8212; }
.studio-demo .progress-track { background: #bad0e3; }
.studio-demo .progress-track span { background: linear-gradient(90deg,#80b0d7,#2865a8); }
.studio-demo .step-panel { border-color: #ffffffd9; border-radius: 26px; background: #f3f9ff8c; box-shadow: inset 0 1px 0 #fff, 0 20px 60px #355f8621;
    backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); }
.studio-demo .step-heading { border-bottom-color: #aac5dd99; }
.studio-demo .current-hair-card { overflow: hidden; padding: 10px; gap: 0; background: #eaf4fe8c; border: 1px solid #ffffffdb; border-radius: 18px; }
.studio-demo .current-hair-card > img { border-radius: 12px; aspect-ratio: 1; object-fit: contain; }
.studio-demo .current-hair-card > span { padding: 14px 4px 6px; }
.studio-demo .current-hair-card > i { top: 19px; right: 19px; width: 23px; height: 23px; background: #eef7ffb8; border-color: #ffffffdc; color: transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.studio-demo .current-hair-card:has(input:checked) { border-color: #326ba6; background: #dfedfae0; box-shadow: 0 0 0 2px #326ba635, 0 8px 24px #335a7e18; }
.studio-demo .choice-chip, .studio-demo .option-card:not(.current-hair-card) { background: #f2f8ff94; border-color: #aec7de; border-radius: 12px; box-shadow: inset 0 1px 0 #ffffffcc; }
.studio-demo .choice-chip:has(input:checked), .studio-demo .option-card:not(.current-hair-card):has(input:checked) { background: #cfe4f8d9; border-color: #326ba6; }
.studio-demo .choice-chip:hover, .studio-demo .option-card:hover { border-color: #6894bc; }
.studio-demo .option-card:has(input:focus-visible), .studio-demo .choice-chip:has(input:focus-visible), .studio-demo .segmented-options label:has(input:focus-visible) { outline-color: #2865a8; }
.studio-demo a:focus-visible, .studio-demo button:focus-visible { outline-color: #2865a8; }
.studio-demo .secondary-button { background: #f2f8ff85; border-color: #b0c8dc; box-shadow: inset 0 1px 0 #ffffffbb; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.studio-demo .secondary-button:hover:not(:disabled) { background: #dfedfa; }
.studio-demo .preview-confirm { background: #e4f0fbc7; border-color: #ffffffdd; border-radius: 20px; box-shadow: inset 0 1px 0 #ffffff, 0 8px 28px #315c8310; }
.studio-demo .preview-parameters > div { border-color: #afc9df80; }
.studio-demo .preview-prompt-panel, .studio-demo .preview-result-status { background: #f4f9ffad; border-color: #ffffffdd; border-radius: 14px; }
.studio-demo .preview-prompt-text { background: #f8fbffbf; border-color: #b9ccde; }
.studio-demo .preview-loading { background: #cde2f3; }
.studio-demo .preview-image { border-radius: 16px; background: #dbeaf5; }
.studio-demo .sentence-card, .studio-demo .adjustment-result-card { background: linear-gradient(145deg,#5487b8,#295e93); border: 1px solid #ffffff80; box-shadow: inset 0 1px 0 #ffffff66; }
.studio-demo .fullscreen-mode { background: linear-gradient(135deg,#eef6fd,#dcebf7); }
.studio-demo .barber-sentence { background: #f5faffb8; border: 1px solid #ffffffc7; }
.studio-demo .photo-uploader label { background: #eaf4fc85; border-color: #90b2cf; border-radius: 16px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .studio-demo .step-panel, .studio-demo .progress-wrap { background: #edf5fc; }
}
@media (hover: hover) {
    .studio-demo .option-card:hover, .studio-demo .choice-chip:hover { border-color: #8897e6; }
}
@media (max-width: 800px) {
    .studio-demo .app-shell { padding: 20px 24px 32px; }
    .studio-demo .hero { gap: 20px; }
    .studio-demo .hero h1 { font-size: 3.3rem; }
    .studio-hero-copy { padding: 45px 0; }
    .studio-demo .step-panel { padding: 28px; }
    .studio-demo .current-hair-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .studio-demo .summary-list > div { grid-template-columns: 8rem minmax(0,1fr); }
}
@media (max-width: 560px) {
    .studio-demo .app-shell { padding: 18px 18px 32px; }
    .studio-demo .hero { grid-template-columns: 1fr; gap: 0; }
    .studio-demo .hero-top { flex-wrap: wrap; gap: 12px; padding-bottom: 18px; }
    .studio-demo .brand { font-size: .67rem; }
    .studio-demo .brand span { width: 29px; height: 29px; }
    .studio-demo .language-switcher { margin-left: auto; }
    .studio-demo .language-switcher a { width: 30px; min-width: 28px; height: 28px; }
    .studio-hero-copy { padding: 36px 0 20px; }
    .studio-demo .scene-tag { margin-bottom: 20px !important; font-size: .75rem !important; }
    .studio-demo .hero h1 { font-size: clamp(2.7rem,12.2vw,4.1rem); line-height: 1.16; margin-bottom: 22px; }
    .studio-demo .studio-hero-copy > p:not(.scene-tag) { font-size: .87rem; }
    .studio-start { min-height: 54px; margin-top: 23px; padding: 0 22px; font-size: .85rem; }
    .studio-journey { gap: 12px; padding: 18px 14px; }
    .studio-journey p { display: block; font-size: .68rem; line-height: 1.65; }
    .studio-journey span { display: block; margin-bottom: 6px; font-size: .82rem; }
    .studio-demo .progress-wrap { margin-top: 30px; margin-bottom: 16px; }
    .studio-demo .progress-copy strong { font-size: .8rem; }
    .studio-demo .step-panel { padding: 24px 18px; }
    .studio-demo .step-heading h2 { font-size: 1.75rem; }
    .studio-demo .step-heading p { font-size: .8rem; }
    .studio-demo .current-hair-card { padding: 7px; min-height: 113px; border-radius: 14px; }
    .studio-demo .current-hair-card > span { padding: 12px 3px 5px; }
    .studio-demo .current-hair-card > i { top: 13px; right: 13px; }
    .studio-demo .current-hair-card strong { font-size: .82rem; }
    .studio-demo .current-hair-card small { font-size: .7rem; }
    .studio-demo .preview-confirm { padding: 22px 15px; }
    .studio-demo .preview-confirm h2, .studio-demo .preview-result h2 { font-size: 1.7rem; }
    .studio-demo .preview-parameters { grid-template-columns: 1fr; }
    .studio-demo .preview-view-grid { gap: 10px; }
    .studio-demo .summary-list > div { grid-template-columns: 6rem minmax(0,1fr); }
    .studio-demo .wizard-actions { gap: 10px; }
    .studio-demo .privacy-note { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
    .studio-demo *, .studio-demo *::before, .studio-demo *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .studio-demo .studio-reveal { opacity: 1; transform: none; }
    .studio-demo body::before { opacity: 0; transform: none; }
}