:root {color-scheme:light; --ink:#f0f4f8; --panel:#fff; --panel-strong:#f9f3fc; --line:#dbe2e8; --muted:#64717d; --text:#2c3e50; --accent:#8e44ad; --accent-deep:#8e44ad; --focus:#9b59b6; --danger:#b1372c; --shadow:0 10px 20px #0000000c;}
body {background:#f0f4f8; color:#2c3e50; font-family:'Helvetica Neue',Arial,'Hiragino Sans','Yu Gothic',sans-serif;}
.shell {width:min(700px,calc(100% - 2rem));}
.site-header {padding:22px 0 0;}
.header-row {align-items:center; flex-wrap:wrap; gap:10px;}
.brand {font-size:16px; color:#8e44ad;}
.brand-mark {border:0;}
main {padding:28px 0 40px;}
h1 {font-size:clamp(25px,6vw,36px); line-height:1.4; letter-spacing:-.035em; max-width:20ch; color:#8e44ad;}
.eyebrow {font-size:12px; letter-spacing:0;}
.lede {color:#2c3e50; font-size:15px;}
.note {background:#f9f3fc; border-color:#d7bde2; font-size:13px;}
.maker,.result {background:#fff; border:1px solid #e9edf1; border-radius:15px; margin-top:20px;}
.maker h2,.result h2 {color:#8e44ad;}
label {color:#2c3e50;}
textarea {background:white; color:#2c3e50; border:2px solid #e9edf1;}
textarea:focus {box-shadow:0 0 0 3px #9b59b61c;}
.example:hover {color:#8e44ad; background:#f9f3fc;}
.primary {background:#157e70; color:white; width:100%;}
.primary:hover {background:#106b60;}
.submit-row {display:block;}
.status {display:block; margin-top:8px;}
.answer {color:#2c3e50; font-size:15px; line-height:1.85;}
.answer h3 {font-size:16px; color:#8e44ad; white-space:normal; margin:20px 0 4px; border-left:4px solid #9b59b6; padding-left:10px;}
.privacy {font-size:11px;}
.result-head {flex-wrap:wrap;}
button:focus-visible,a:focus-visible {outline:3px solid #9b59b6; outline-offset:3px;}
@media(max-width:560px) {.shell {width:calc(100% - 20px);} .brand {font-size:14px;} main {padding-top:22px;}}
@media print {body {background:white;} .note,.lede,.eyebrow {display:none;} .shell {width:100%;} .result {border:0;} .answer h3 {break-after:avoid;}}