:root { --mist:#e5efe9; --paper:#fffaf0; --ink:#263e43; --muted:#68766e; --green:#527b68; --berry:#a85345; --gold:#d69a4a; --line:rgba(38,62,67,.16); }
body.expression-world { min-height:100vh; background:linear-gradient(180deg,#d9e8df 0,#f4ecd8 52%,#e2ead9 100%); color:var(--ink); }
.expression-world::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.09; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.expression-masthead { background:rgba(236,244,236,.72); backdrop-filter:blur(14px); }
.expression-shell { position:relative; width:min(1080px,calc(100% - 32px)); margin:auto; padding:clamp(70px,10vw,130px) 0 100px; }
.expression-hero { max-width:800px; margin-bottom:52px; }
.eyebrow { margin:0 0 12px; color:var(--green); font-size:.76rem; letter-spacing:.17em; text-transform:uppercase; }
.expression-hero h1 { margin:0; font-size:clamp(3rem,7vw,6.2rem); font-weight:400; font-style:italic; line-height:1; letter-spacing:-.04em; }
.expression-hero h1 em { color:var(--berry); font-style:normal; }
.expression-hero>p:last-child { max-width:620px; margin:25px 0 0; color:var(--muted); font-size:1.05rem; line-height:1.9; }
.training-card,.analysis-panel,.history-section { border:1px solid rgba(71,84,65,.16); border-radius:30px; background:rgba(255,250,240,.9); box-shadow:0 24px 70px rgba(48,72,60,.12); }
.training-card { padding:clamp(22px,5vw,50px); }
.step-line { display:flex; gap:7px; overflow:auto; margin-bottom:34px; }
.step-line span { padding:9px 16px; border-radius:999px; background:#eee4ca; color:var(--muted); font-size:.78rem; white-space:nowrap; }
.step-line .active { background:var(--green); color:white; }
.training-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.span-2 { grid-column:1/-1; }
.field { display:grid; gap:8px; color:var(--muted); font-size:.82rem; }
.field input,.field select { width:100%; padding:13px 2px; border:0; border-bottom:1px solid rgba(38,62,67,.28); outline:0; background:transparent; color:var(--ink); font:inherit; font-size:1rem; }
.field input:focus,.field select:focus { border-color:var(--berry); }
.upload-zone { display:grid; place-items:center; min-height:190px; padding:30px; border:1.5px dashed rgba(82,123,104,.5); border-radius:20px; background:rgba(226,238,224,.5); text-align:center; cursor:pointer; }
.upload-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.upload-zone strong { font-size:1.18rem; font-weight:500; }
.upload-zone span { margin-top:8px; color:var(--muted); font-size:.8rem; }
.recording-zone { padding:24px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.32); }
.recording-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.record-button,.stop-button { border:1px solid rgba(82,123,104,.34); border-radius:999px; padding:11px 18px; background:#e7efe3; color:var(--ink); font:inherit; cursor:pointer; }
.record-button:disabled { opacity:.45; cursor:not-allowed; }
.stop-button { border-color:var(--berry); background:var(--berry); color:white; }
.record-timer { margin-left:auto; color:var(--berry); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.recording-zone>p { margin:14px 0 0; color:var(--muted); font-size:.8rem; line-height:1.6; }
.recording-zone video,.recording-zone audio { width:100%; max-height:420px; margin-top:18px; border-radius:14px; background:#1f302e; }
.privacy-note { display:flex; gap:13px; align-items:flex-start; padding-top:19px; color:var(--muted); font-size:.76rem; line-height:1.6; }
.privacy-note strong { flex:0 0 auto; color:var(--green); }
.form-actions { display:flex; align-items:center; gap:18px; margin-top:30px; }
.primary-action { border:0; border-radius:999px; padding:14px 24px; background:var(--berry); color:white; font:inherit; cursor:pointer; }
.primary-action:disabled { opacity:.55; cursor:wait; }
.save-note { color:var(--muted); font-size:.78rem; line-height:1.5; }
.analysis-panel { margin-top:34px; padding:clamp(24px,5vw,52px); scroll-margin-top:20px; }
.result-kicker { color:var(--green); font-size:.76rem; letter-spacing:.08em; }
.analysis-panel>h2 { max-width:800px; margin:12px 0 28px; font-size:clamp(1.7rem,4vw,3.2rem); font-weight:400; line-height:1.35; }
.score-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; border:1px solid var(--line); background:var(--line); }
.score { position:relative; display:grid; gap:5px; padding:17px; background:var(--paper); overflow:hidden; }
.score span { color:var(--muted); font-size:.72rem; }.score strong { font-size:1.7rem; font-weight:400; }.score i { position:absolute; inset:auto 0 0; height:3px; width:calc(var(--score) * 10%); background:var(--gold); }
.single-change { display:grid; gap:9px; margin:30px 0; padding:24px 26px; border-left:4px solid var(--berry); background:#f5e8cf; }
.single-change span { color:var(--berry); font-size:.75rem; letter-spacing:.1em; }.single-change strong { font-size:1.25rem; font-weight:500; line-height:1.65; }
.analysis-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.analysis-grid article,.expression-card { padding:24px; border:1px solid var(--line); background:rgba(255,255,255,.34); }
.analysis-grid h3,.expression-card h3 { margin:0 0 13px; font-size:1rem; font-weight:500; }
.analysis-grid ul,.expression-card ul { margin:0; padding-left:1.2em; color:var(--muted); line-height:1.8; }
.muted { color:var(--muted); }.expression-card { margin-top:16px; background:#e7efe3; }.expression-card h3 { font-size:1.25rem; line-height:1.6; }.expression-card p { line-height:1.7; }
details { margin-top:20px; border-top:1px solid var(--line); padding-top:18px; } summary { cursor:pointer; color:var(--green); }.transcript { white-space:pre-wrap; color:var(--muted); line-height:1.8; }.uncertainty { color:var(--berry); font-size:.8rem; }
.history-section { margin-top:34px; padding:clamp(24px,5vw,46px); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }.section-heading h2 { margin:0; font-size:2rem; font-weight:400; }.quiet-button { border:1px solid var(--line); border-radius:999px; padding:9px 15px; background:transparent; color:var(--green); cursor:pointer; }
.history-list { display:grid; gap:10px; margin-top:26px; }.history-item { display:grid; grid-template-columns:140px minmax(180px,1fr) 1.5fr; gap:18px; align-items:center; padding:17px 0; border:0; border-top:1px solid var(--line); background:transparent; color:inherit; text-align:left; cursor:pointer; }.history-item time,.history-item span { color:var(--muted); font-size:.78rem; line-height:1.6; }.history-item strong { font-weight:500; }.empty-state { color:var(--muted); }
@media(max-width:760px){.training-grid,.analysis-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.score-grid{grid-template-columns:repeat(3,1fr)}.access-field{grid-column:auto}.privacy-note{padding-top:0}.form-actions{align-items:flex-start;flex-direction:column}.history-item{grid-template-columns:1fr;gap:6px}.expression-shell{padding-top:55px}.expression-hero h1{font-size:3.2rem}.record-timer{width:100%;margin-left:0}.record-button,.stop-button{flex:1}}