.expression-practice-page{--expression-ink:var(--theme-text-primary,#101828);--expression-muted:var(--theme-text-secondary,#475467);--expression-soft:var(--theme-text-tertiary,#667085);--expression-line:var(--theme-border,#e4e7ec);--expression-surface:var(--theme-card-bg,#fff);--expression-soft-surface:var(--theme-bg-secondary,#f8fafc);--expression-blue:#1677ff;--expression-purple:#7357e8;width:min(1040px,100% - 32px);color:var(--expression-ink);margin:0 auto;padding:32px 0 96px}.expression-hero,.expression-composer,.expression-loading,.expression-error-state,.expression-result{border:1px solid color-mix(in srgb, var(--expression-line) 82%, transparent);background:color-mix(in srgb, var(--expression-surface) 96%, transparent);box-shadow:0 20px 58px #10182814,inset 0 1px #fffc}.expression-hero{background:radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--expression-purple) 18%, transparent), transparent 32%), radial-gradient(circle at 8% 110%, color-mix(in srgb, var(--expression-blue) 10%, transparent), transparent 35%), color-mix(in srgb, var(--expression-surface) 97%, transparent);border-radius:28px;padding:31px 34px 34px;position:relative;overflow:hidden}.expression-hero:after{border:1px solid color-mix(in srgb, var(--expression-purple) 20%, transparent);content:"";pointer-events:none;border-radius:50%;width:280px;height:280px;position:absolute;bottom:-130px;right:6%}.expression-hero-topline,.expression-back-link,.expression-status-pill,.expression-flow,.expression-flow span,.expression-section-label,.expression-result-status,.expression-result-actions button,.expression-result-actions a,.expression-example-button,.expression-analyze-button,.expression-error-state button,.expression-exercise-check,.expression-error-heading,.expression-comparison,.expression-grammar-meta,.expression-why summary{align-items:center;display:flex}.expression-hero-topline{z-index:1;justify-content:space-between;gap:12px;position:relative}.expression-back-link{color:var(--expression-muted);gap:6px;font-size:13px;font-weight:750;text-decoration:none}.expression-back-link:hover{color:var(--expression-blue)}.expression-back-link .is-back{transform:rotate(180deg)}.expression-status-pill{color:#6848d6;background:#f6f3ff;border:1px solid #7357e833;border-radius:999px;gap:6px;min-height:30px;padding:0 11px;font-size:12px;font-weight:800}.expression-hero h1{z-index:1;letter-spacing:-.06em;text-wrap:balance;max-width:780px;margin:25px 0 12px;font-size:clamp(32px,5vw,58px);font-weight:860;line-height:1.04;position:relative}.expression-hero>p{z-index:1;max-width:680px;color:var(--expression-muted);margin:0;font-size:16px;line-height:1.7;position:relative}.expression-flow{z-index:1;flex-wrap:wrap;gap:8px;margin-top:24px;position:relative}.expression-flow span{border:1px solid color-mix(in srgb, var(--expression-line) 80%, transparent);background:color-mix(in srgb, var(--expression-surface) 90%, transparent);min-height:30px;color:var(--expression-muted);border-radius:999px;gap:6px;padding:0 10px;font-size:11px;font-weight:750}.expression-flow b{width:18px;height:18px;color:var(--expression-blue);background:#eef4ff;border-radius:6px;place-items:center;font-size:10px;display:grid}.expression-composer,.expression-result{border-radius:26px;margin-top:18px;padding:26px}.expression-section-heading h2,.expression-result-heading h2{color:var(--expression-ink);letter-spacing:-.045em;margin:8px 0 7px;font-size:clamp(22px,3vw,32px);font-weight:840;line-height:1.14}.expression-section-heading p{max-width:700px;color:var(--expression-muted);margin:0;font-size:13px;line-height:1.6}.expression-step-label{color:var(--expression-purple);letter-spacing:.12em;font-size:11px;font-weight:850}.expression-input-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:21px;display:grid}.expression-input-grid label{gap:8px;display:grid}.expression-input-grid label>span{color:var(--expression-muted);font-size:12px;font-weight:800}.expression-input-grid textarea{resize:vertical;border:1px solid var(--expression-line);background:var(--expression-soft-surface);width:100%;min-height:120px;color:var(--expression-ink);font:inherit;border-radius:14px;outline:none;padding:13px 14px;font-size:15px;line-height:1.65}.expression-input-grid textarea:focus{border-color:color-mix(in srgb, var(--expression-blue) 60%, var(--expression-line));box-shadow:0 0 0 4px color-mix(in srgb, var(--expression-blue) 10%, transparent)}.expression-input-grid label:last-child textarea{background:#fbfdff}.expression-composer-footer{justify-content:space-between;align-items:center;gap:12px;margin-top:14px;display:flex}.expression-example-button,.expression-analyze-button,.expression-error-state button,.expression-exercise-check{min-height:40px;font:inherit;cursor:pointer;border-radius:11px;gap:7px;padding:0 14px;font-size:13px;font-weight:800}.expression-example-button{border:1px solid var(--expression-line);background:var(--expression-soft-surface);color:var(--expression-muted)}.expression-example-button:hover{color:var(--expression-blue);border-color:#b8c8ec}.expression-analyze-button{border:1px solid var(--expression-blue);background:var(--expression-blue);color:#fff;box-shadow:0 9px 22px #1677ff33}.expression-analyze-button:hover:not(:disabled){background:#075dcc}.expression-analyze-button:disabled{cursor:not-allowed;opacity:.5}.expression-spin{animation:.85s linear infinite expression-spin}@keyframes expression-spin{to{transform:rotate(360deg)}}.expression-loading,.expression-error-state{text-align:center;border-radius:22px;justify-items:center;gap:9px;margin-top:18px;padding:30px;display:grid}.expression-loading>svg{color:var(--expression-blue)}.expression-loading strong,.expression-error-state strong{color:var(--expression-ink);font-size:15px}.expression-skeleton{gap:8px;width:min(430px,100%);margin-top:8px;display:grid}.expression-skeleton i{background:linear-gradient(90deg,#edf1f7,#dbe5f5,#edf1f7) 0 0/220% 100%;border-radius:999px;height:11px;animation:1.35s ease-in-out infinite expression-shimmer;display:block}.expression-skeleton i:nth-child(2){width:78%}.expression-skeleton i:nth-child(3){width:56%}@keyframes expression-shimmer{0%,to{background-position:100% 0}50%{background-position:0 0}}.expression-error-state>svg{color:#c2415a}.expression-error-state p{color:#b4233e;max-width:650px;margin:0;font-size:13px;line-height:1.6}.expression-error-state button{color:#b4233e;background:#fff6f7;border:1px solid #d9a3ae}.expression-error-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.expression-error-actions .expression-error-save{color:#075dcc;background:#f4f8ff;border-color:#1677ff40}.expression-error-actions .expression-error-save:hover{background:#eaf2ff;border-color:#1677ff73}.expression-error-actions .is-done{color:#16834a;background:#f0fcf4;border-color:#16834a40}.expression-result-heading{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.expression-result-heading h2{max-width:690px}.expression-result-status{color:#16834a;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:250px}.expression-result-status.is-fix{color:#b4233e}.expression-result-status strong{font-size:12px}.expression-result-status span{background:var(--expression-soft-surface);border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800}.expression-comparison{gap:10px;margin-top:19px}.expression-original-card,.expression-corrected-card{border-radius:15px;flex:1;min-width:0;padding:15px 16px}.expression-original-card{background:#fff7f8;border:1px solid #b4233e2e}.expression-corrected-card{background:#f3fcf6;border:1px solid #16834a33}.expression-original-card>span,.expression-corrected-card>span{font-size:11px;font-weight:850;display:block}.expression-original-card>span{color:#b4233e}.expression-corrected-card>span{color:#16834a}.expression-card-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.expression-card-heading>span{color:#16834a;font-size:11px;font-weight:850}.expression-card-audio{color:#16834a;min-height:27px;font:inherit;cursor:pointer;background:#ffffffb8;border:1px solid #16834a33;border-radius:999px;align-items:center;gap:5px;padding:0 8px;font-size:10px;font-weight:800;display:inline-flex}.expression-card-audio:hover{background:#fff;border-color:#16834a6b}.expression-card-audio.is-playing{color:#fff;background:#16834a}.expression-card-audio.is-error{color:#b4233e;border-color:#b4233e4d}.expression-original-card p,.expression-corrected-card p{color:var(--expression-ink);overflow-wrap:anywhere;margin:8px 0 0;font-size:16px;font-weight:760;line-height:1.55}.expression-comparison-arrow{color:var(--expression-soft);flex:none}.expression-translation{border-left:3px solid var(--expression-purple);background:#faf9ff;border-radius:0 14px 14px 0;gap:5px;margin-top:12px;padding:14px 16px;display:grid}.expression-translation span{color:#6848d6;font-size:11px;font-weight:850}.expression-translation strong{color:var(--expression-ink);font-size:16px;line-height:1.5}.expression-natural{color:var(--expression-muted);margin:11px 0 0;font-size:13px;line-height:1.6}.expression-natural strong{color:var(--expression-purple)}.expression-result-section{margin-top:24px}.expression-section-label{color:var(--expression-muted);gap:7px;font-size:12px;font-weight:850}.expression-section-label svg{color:var(--expression-blue)}.expression-structure{color:var(--expression-ink);margin:10px 0 0;font-size:14px;font-weight:700;line-height:1.6}.expression-pattern{color:#526174;background:#f1f5f9;border-radius:7px;margin-top:8px;padding:5px 8px;font-size:11px;display:inline-block}.expression-error-list{gap:9px;margin-top:12px;display:grid}.expression-error-block{background:#fffafb;border:1px solid #b4233e26;border-radius:14px;padding:13px 14px}.expression-error-heading{color:#b4233e;gap:8px;font-size:13px}.expression-error-heading>span{background:#ffe4e8;border-radius:6px;place-items:center;width:20px;height:20px;font-size:12px;font-weight:900;display:grid}.expression-error-compare{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-top:10px;display:grid}.expression-error-compare>div{gap:4px;min-width:0;display:grid}.expression-error-compare small{color:var(--expression-soft);font-size:10px;font-weight:800}.expression-error-compare code{color:var(--expression-ink);font:inherit;overflow-wrap:anywhere;font-size:13px;line-height:1.4}.expression-error-compare>svg{color:var(--expression-soft)}.expression-error-block p{color:var(--expression-muted);margin:9px 0 0;font-size:12px;line-height:1.6}.expression-syntax-sentence{border:1px solid color-mix(in srgb, var(--expression-blue) 16%, var(--expression-line));color:var(--expression-ink);background:#fbfdff;border-radius:14px;margin-top:13px;padding:14px 15px;font-size:18px;font-weight:760;line-height:1.8}.expression-syntax-inline{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:5px;padding:1px 3px}.expression-syntax-inline:hover,.expression-syntax-inline.is-active{color:#075dcc;background:#e8f1ff}.expression-syntax-strip{flex-wrap:wrap;gap:7px;margin-top:10px;display:flex}.expression-syntax-strip button{border:1px solid var(--expression-line);background:var(--expression-soft-surface);min-width:80px;color:var(--expression-muted);text-align:left;cursor:pointer;border-radius:10px;gap:3px;padding:8px 10px;display:grid}.expression-syntax-strip button:hover,.expression-syntax-strip button.is-active{color:#075dcc;background:#eef5ff;border-color:#9ec2ff}.expression-syntax-strip strong{font-size:13px}.expression-syntax-strip span{font-size:10px;font-weight:700}.expression-selected-syntax{border-left:3px solid var(--expression-blue);background:#f5f9ff;border-radius:0 13px 13px 0;grid-template-columns:auto auto;gap:5px 9px;margin-top:10px;padding:13px 14px;display:grid}.expression-selected-syntax strong{color:var(--expression-ink);font-size:14px}.expression-selected-syntax>span{color:var(--expression-blue);font-size:11px;font-weight:800}.expression-selected-syntax p{color:var(--expression-muted);grid-column:1/-1;margin:0;font-size:12px;line-height:1.6}.expression-grammar-list{gap:7px;margin-top:11px;display:grid}.expression-grammar-point{border:1px solid var(--expression-line);background:var(--expression-soft-surface);border-radius:12px}.expression-grammar-point summary{color:var(--expression-ink);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;font-size:13px;font-weight:800;list-style:none;display:flex}.expression-grammar-point summary::-webkit-details-marker{display:none}.expression-grammar-meta{color:var(--expression-soft);gap:5px}.expression-grammar-meta small{background:var(--expression-surface);border-radius:999px;padding:4px 6px;font-size:10px}.expression-grammar-point[open] summary>.expression-grammar-meta>svg,.expression-why[open] summary>svg:last-child{transform:rotate(180deg)}.expression-grammar-point>p{color:var(--expression-muted);margin:0;padding:0 13px 10px;font-size:12px;line-height:1.6}.expression-example{background:var(--expression-surface);border-radius:9px;gap:3px;margin:0 13px 12px;padding:9px 10px;display:grid}.expression-example span{color:var(--expression-ink);font-size:12px}.expression-example small{color:var(--expression-soft);font-size:11px}.expression-why{border-top:1px solid var(--expression-line);margin-top:17px}.expression-why summary{color:var(--expression-muted);cursor:pointer;gap:7px;padding:13px 2px 8px;font-size:12px;font-weight:800;list-style:none}.expression-why summary::-webkit-details-marker{display:none}.expression-why summary>svg:last-child{margin-left:auto}.expression-why p{color:var(--expression-muted);margin:0 0 2px;font-size:13px;line-height:1.7}.expression-exercise{background:#faf9ff;border:1px solid #7357e833;border-radius:17px;margin-top:22px;padding:17px}.expression-exercise h3{color:var(--expression-ink);margin:8px 0 11px;font-size:16px;line-height:1.45}.expression-exercise-sentence{background:var(--expression-surface);color:var(--expression-ink);border-radius:11px;margin:0;padding:12px;font-size:16px;font-weight:750;line-height:1.6}.expression-exercise-options{flex-wrap:wrap;gap:7px;margin-top:10px;display:flex}.expression-exercise-options button{border:1px solid var(--expression-line);background:var(--expression-surface);min-height:35px;color:var(--expression-muted);font:inherit;cursor:pointer;border-radius:9px;padding:0 11px;font-size:12px;font-weight:750}.expression-exercise-options button:hover,.expression-exercise-options button.is-selected{color:#6848d6;background:#f0ebff;border-color:#9b87ef}.expression-exercise input{border:1px solid var(--expression-line);background:var(--expression-surface);width:100%;min-height:40px;color:var(--expression-ink);font:inherit;border-radius:9px;margin-top:10px;padding:0 11px}.expression-exercise-footer{flex-wrap:wrap;align-items:center;gap:10px;margin-top:11px;display:flex}.expression-exercise-check{color:#fff;background:#8067e6;border:1px solid #8067e6;min-height:35px}.expression-exercise-check:disabled{cursor:not-allowed;opacity:.5}.expression-exercise-footer>span{font-size:12px;font-weight:800}.expression-exercise-footer>span.is-correct{color:#16834a}.expression-exercise-footer>span.is-wrong{color:#b4233e}.expression-exercise-explanation{color:var(--expression-muted);margin:9px 0 0;font-size:12px;line-height:1.6}.expression-tcf-note{color:#744c12;background:#fffaf1;border-left:3px solid #f0a53c;border-radius:0 13px 13px 0;margin-top:17px;padding:13px 15px}.expression-tcf-note strong{font-size:12px}.expression-tcf-note ul{margin:7px 0 0;padding-left:18px;font-size:12px;line-height:1.6}.expression-result-actions{border-top:1px solid var(--expression-line);flex-wrap:wrap;gap:8px;margin-top:23px;padding-top:16px;display:flex}.expression-result-actions button,.expression-result-actions a{border:1px solid var(--expression-line);background:var(--expression-soft-surface);min-height:36px;color:var(--expression-muted);font:inherit;cursor:pointer;border-radius:10px;gap:6px;padding:0 11px;font-size:12px;font-weight:800;text-decoration:none}.expression-result-actions button:hover,.expression-result-actions a:hover{color:#075dcc;background:#f0f6ff;border-color:#a9c6f7}.expression-result-actions .is-primary{color:#075dcc;background:#eef5ff;border-color:#1677ff4d}.expression-result-actions .is-done{color:#16834a;background:#f0fcf4;border-color:#16834a40}@media (max-width:680px){.expression-practice-page{width:min(100% - 20px,1040px);padding-top:16px}.expression-hero{border-radius:23px;padding:24px 20px 25px}.expression-hero-topline{align-items:flex-start}.expression-status-pill{font-size:11px}.expression-hero h1{margin-top:22px;font-size:clamp(31px,11vw,47px)}.expression-hero>p{font-size:14px}.expression-composer,.expression-result{border-radius:22px;padding:18px}.expression-input-grid{grid-template-columns:1fr}.expression-composer-footer{flex-direction:column;align-items:stretch}.expression-example-button,.expression-analyze-button{justify-content:center;width:100%}.expression-result-heading{display:grid}.expression-result-status{justify-content:flex-start;max-width:none}.expression-comparison{display:grid}.expression-comparison-arrow{justify-self:center;transform:rotate(90deg)}.expression-error-compare{grid-template-columns:1fr}.expression-error-compare>svg{justify-self:center;transform:rotate(90deg)}.expression-result-actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.expression-result-actions button,.expression-result-actions a{justify-content:center;width:100%}}