:root{--ink:#19251f;--muted:#657067;--paper:#f7f8f2;--lime:#e8ff59;--border:#d8ddd4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #527aef;outline-offset:5px}header{max-width:1440px;margin:auto;min-height:110px;padding:28px 5%;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--border)}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;font-size:12px;font-weight:800;line-height:1.4;letter-spacing:.06em}.logo{font-family:'Space Grotesk',sans-serif;background:var(--lime);width:54px;height:54px;display:flex;align-items:center;justify-content:center;font-size:30px;letter-spacing:-.08em;border:1px solid var(--ink);border-radius:9px;position:relative}.logo span{font-size:9px;position:absolute;right:5px;top:6px;letter-spacing:0}.header-note,.edition,.eyebrow,.section-label,.document-number,.translation>span,.aside-note>span,.bottom-strip{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.075em;font-weight:600}.header-note{color:var(--muted)}.edition{border:1px solid var(--border);border-radius:30px;padding:9px 13px}main{max-width:1440px;padding:0 5%;margin:auto}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:48px 0 38px;gap:24px}.eyebrow{display:flex;align-items:center;gap:10px;margin:0}.line{width:22px;height:2px;background:var(--ink)}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,4.9vw,70px);line-height:1.06;letter-spacing:-.055em;margin:19px 0 0;font-weight:600}h1 span{background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 93%,transparent 93%)}.intro-copy{font-size:16px;line-height:1.7;color:var(--muted);margin:0 4px 5px 0}.workspace{display:grid;grid-template-columns:320px 1fr;border:1px solid var(--ink);border-radius:16px;overflow:hidden;background:#fff}aside{padding:28px;background:#edf0e8;border-right:1px solid var(--border)}.section-label{display:flex;justify-content:space-between;color:var(--muted)}h2{font-family:'Space Grotesk',sans-serif;font-size:25px;line-height:1.2;letter-spacing:-.035em;margin:24px 0}.situations{display:flex;flex-direction:column;gap:7px}.situation{padding:13px 12px;text-align:left;border:1px solid transparent;border-radius:7px;background:transparent;display:flex;gap:10px;align-items:center;font-size:14px;color:#48534c;line-height:1.4}.situation .symbol{font-size:17px;width:21px;text-align:center}.situation:hover{background:#e0e5d8}.situation[aria-pressed=true]{background:var(--ink);color:#fff}.situation[aria-pressed=true]::after{content:'•';margin-left:auto;color:var(--lime)}.aside-note{margin-top:32px}.aside-note>span{font-size:11px;border:1px solid #a2ada2;padding:4px 6px;display:inline-block;transform:rotate(-3deg)}.aside-note p{font-size:12px;color:var(--muted);margin:10px 0 0}.output-panel{padding:30px 36px 19px;min-width:0;display:flex;flex-direction:column}.output-top{display:flex;justify-content:space-between;gap:15px;color:var(--muted)}.document-number{white-space:nowrap;font-size:11px}.quote-area{position:relative;flex:1;padding:41px 0 47px;min-height:268px}.quote-mark{position:absolute;left:-5px;top:12px;font:70px Georgia,serif;color:#c0c9b9;line-height:1}#phrase{position:relative;z-index:1;font-family:'Space Grotesk',sans-serif;font-size:clamp(23px,2.3vw,34px);letter-spacing:-.025em;line-height:1.35;margin:0;max-width:790px}.stamp{position:absolute;right:0;bottom:7px;transform:rotate(-12deg);border:2px solid #dce3d3;border-radius:50%;width:65px;height:65px;display:flex;align-items:center;justify-content:center;text-align:center;color:#b6c1ab;font-size:10px;font-weight:bold;letter-spacing:.06em}.translation{border-top:1px solid var(--border);padding:20px 0;display:flex;gap:22px;align-items:flex-start}.translation>span{font-size:11px;white-space:nowrap;color:var(--muted);padding-top:4px}.translation p{margin:0;font-size:15px;line-height:1.6;color:#687167}.actions{display:flex;gap:12px}.primary,.secondary{height:55px;border-radius:7px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:15px}.primary{background:var(--lime);flex:1;color:var(--ink);box-shadow:0 3px 0 var(--ink)}.primary:hover{background:#ddf745;transform:translateY(-1px)}.primary:active{transform:translateY(2px);box-shadow:none}.spark{font-size:25px}.key{font-size:11px;border:1px solid #839635;border-radius:4px;padding:2px 5px;margin-left:auto;font-weight:500}.primary{padding:0 18px}.secondary{background:#fff;padding:0 18px;color:var(--ink)}.secondary:hover{background:var(--paper)}.secondary svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.6}.status{text-align:center;font-size:12px;color:var(--muted);margin:17px 0 0;min-height:18px}.bottom-strip{padding:23px 0;display:flex;justify-content:space-between;gap:25px;color:var(--muted);font-size:10px}.bottom-strip>span:last-child{display:flex;gap:20px;align-items:center}.bottom-strip>span:last-child span{color:var(--ink);font-size:25px;line-height:.7}footer{max-width:1440px;margin:22px auto 0;border-top:1px solid var(--border);padding:24px 5%;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}@media(min-width:1500px){.intro{padding-top:65px}.workspace{min-height:530px}}@media(max-width:950px){.header-note{display:none}.workspace{grid-template-columns:270px 1fr}aside{padding:24px 18px}.output-panel{padding:28px 24px 20px}.intro-copy{font-size:14px}.actions{flex-wrap:wrap}.primary{min-width:100%}.secondary{width:100%;height:45px}.document-number{display:none}.quote-area{padding-top:35px}.bottom-strip{font-size:9px}footer span:nth-child(2){display:none}}@media(max-width:640px){header{min-height:85px;padding:20px 5%}.logo{width:44px;height:44px;font-size:27px}.edition{font-size:9px;padding:7px}.brand{font-size:10px;gap:9px}.intro{padding:32px 0 28px;display:block}.intro-copy{margin-top:20px}.intro-copy br{display:none}.eyebrow{font-size:10px}.workspace{grid-template-columns:1fr}aside{padding:21px;border-right:0;border-bottom:1px solid var(--border)}h2{font-size:20px;margin:13px 0 17px}h2 br{display:none}.situations{display:grid;grid-template-columns:1fr 1fr;gap:6px}.situation{font-size:12px;min-height:52px;padding:9px 7px;border-color:#d7ded0}.situation .symbol{font-size:14px;width:16px;flex-shrink:0}.situation[aria-pressed=true]::after{display:none}.aside-note{display:none}.output-panel{padding:25px 21px 17px}.quote-area{min-height:240px;padding-bottom:55px}#phrase{font-size:25px}.translation{gap:16px}.translation p{font-size:14px}.bottom-strip>span:last-child{display:none}.bottom-strip{font-size:10px;line-height:1.6}footer{margin-top:10px;line-height:1.6;font-size:11px}footer span:last-child{text-align:right}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,transform .15s}.refresh{animation:appear .25s ease}@keyframes appear{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}

/* Static explanatory content remains readable with or without JavaScript. */
h1 .heading-name{display:block;background:none;font-size:14px;line-height:1.5;letter-spacing:.025em;margin-bottom:12px;font-weight:600}.guide{border-top:1px solid var(--border);padding:40px 0 16px}.guide-intro{max-width:760px}.guide h2{font-size:clamp(25px,3vw,36px);line-height:1.2;margin:14px 0 20px}.guide p{font-size:16px;line-height:1.75;color:var(--muted)}.examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;margin-top:25px}.examples article{padding:24px 0;border-top:1px solid var(--border)}.examples h3{font-family:'Space Grotesk',sans-serif;font-size:20px;line-height:1.35;margin:0}.examples blockquote{font-family:'Space Grotesk',sans-serif;margin:18px 0;font-size:19px;line-height:1.55}.examples .plain{font-size:14px}.questions{max-width:850px;margin:24px 0}.questions details{border-bottom:1px solid var(--border);padding:18px 0}.questions summary{font-size:16px;font-weight:600;cursor:pointer;line-height:1.5}.questions summary:focus-visible{outline:3px solid #527aef;outline-offset:5px}.questions details p{margin-bottom:0}@media(max-width:950px){.examples{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.examples{grid-template-columns:1fr}.guide{padding-top:28px}h1 .heading-name{font-size:14px}}