/* Another Sentence — ink, paper, and ten delightfully abstract personalities. */
:root{--ink:#221b35;--paper:#fffaf0;--pink:#ff8ca9;--yellow:#ffe76b;--blue:#4b59e5;--lime:#c7ed75;--green:#221b35;--muted:#50485c;--line:#c9bfd0;background:#fff8ec;color:var(--ink)}
body{background-image:radial-gradient(#d4c6b8 1px,transparent 1px);background-size:18px 18px}button,a,summary{touch-action:manipulation}:focus-visible{outline:3px solid #4b59e5;outline-offset:5px}.ambient{display:none}
.site-header{height:88px;max-width:1050px;padding:0 32px;border-bottom:2px solid var(--ink);background:#fff8ec}.brand{font-size:25px;letter-spacing:-1.2px;font-weight:900;gap:11px}.brand-mark{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:11px;transform:rotate(-7deg);font:900 27px/1 Arial,sans-serif;letter-spacing:-2px;width:38px;height:38px;padding:0}.brand-dot{color:#d6315d;font-size:33px}.word-box-open{color:var(--ink);background:white;border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);font-weight:700}.word-box-open:hover{background:var(--yellow)}.word-box-open>span{background:var(--pink);color:var(--ink);font-weight:800}
main{max-width:820px;margin:36px auto 0;padding:0 28px}.intro{position:relative;min-height:180px;padding:0 190px 0 0;margin:0 0 30px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#514057}.eyebrow>span{background:#d6315d;width:9px;height:9px;border-radius:0;transform:rotate(12deg)}h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(32px,5vw,48px);font-weight:900;letter-spacing:-2.3px;line-height:1.03;margin:17px 0 15px}h1>span{color:#4b3bc0}.intro>p{font-size:13px;font-weight:600;color:#514057;line-height:1.6}.character-card{position:absolute;right:0;top:0;width:170px;height:177px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--yellow);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:44% 44% 12px 12px;transform:rotate(5deg)}.character-stage{width:150px;height:135px;display:grid;place-items:center}.character-stage svg{width:100%;height:100%;overflow:visible;animation:character-arrive .36s ease-out both}.character-tag{font-size:8px;font-weight:900;letter-spacing:1.4px;margin-top:2px}@keyframes character-arrive{from{opacity:.5;transform:translateY(5px) rotate(-4deg) scale(.96)}to{opacity:1;transform:none}}
.practice{height:500px;border:3px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:8px 8px 0 var(--ink);padding:25px 30px 21px}.practice:before{display:none}.card-top{min-height:36px;flex-shrink:0}.direction-toggle{background:var(--lime);border:2px solid var(--ink);border-radius:7px;color:var(--ink);font-size:11px;font-weight:800;padding:6px 10px}.direction-toggle:hover{background:#daff99}.source-number{color:#625470;font-size:10px;font-weight:700}.sentence-area{padding:25px 0 15px;scrollbar-color:#b6a5d9 transparent}#english{color:var(--ink);font:800 clamp(27px,4vw,36px)/1.25 Arial,Helvetica,sans-serif;letter-spacing:-1px}.word{text-decoration-color:#b7a2d1;text-underline-offset:6px}.word:hover,.word[aria-expanded=true],.word:focus-visible{background:var(--yellow);text-decoration-color:var(--ink)}
.listen-row{display:flex;align-items:center;gap:12px;flex:none;min-height:44px;margin:2px 0 12px}.listen-button{flex:none;min-height:40px;min-width:95px;border:2px solid var(--ink);border-radius:25px;background:var(--pink);color:var(--ink);padding:8px 14px;font-size:12px;font-weight:800;box-shadow:2px 2px 0 var(--ink)}.listen-button:hover{background:#ffb0c2}.listen-button[aria-pressed=true]{background:var(--yellow)}#speech-status{font-size:10px;line-height:1.5;color:#61526c;max-width:380px}.translation-slot{border:2px dashed #b8a2ca;border-radius:10px;height:100px;min-height:100px;flex-basis:100px;margin:0 0 10px}.translation-placeholder{background:#f3eafb;border:0;color:#65516e;padding:17px 15px;font-size:11px}.translation-slot .translation{background:#f3eafb;border:0;padding:12px 15px}.translation-label{color:#714077;font-size:9px}.translation>p{color:var(--ink);font-size:18px;font-weight:600}.word-help{color:#65516e;font-size:10px;min-height:18px}.card-bottom{border-top:2px solid var(--ink);min-height:57px;margin-top:10px;padding-top:12px;gap:10px}.target-toggle{border:2px solid var(--ink);border-radius:8px;background:var(--yellow);color:var(--ink);font-weight:800;box-shadow:2px 2px 0 var(--ink)}.target-toggle:hover,.target-toggle[aria-expanded=true]{background:#ffda37}.next{background:var(--blue);border:2px solid var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink);color:#fff;font-weight:800}.next:hover{background:#3b43be}.next-dock{max-width:764px;background:#fff8ecf5;border:2px solid var(--ink);border-radius:13px;padding:8px;box-shadow:5px 5px 0 var(--ink);gap:10px;pointer-events:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--keyboard-offset,0px))}.fixed-target-toggle,.next-fixed{box-shadow:2px 2px 0 var(--ink);flex:1;min-width:0;min-height:49px;font-size:14px;padding:12px 18px}.next-fixed{width:auto}.journey{padding-top:29px}.journey-top,.journey>p{color:#51445d}.tiny-spark{color:#4b3bc0}.progress-track{height:9px;background:#eee1f3;border:1px solid var(--ink);border-radius:5px}.progress-track #progress-fill{background:#ff8ca9;border-radius:0;min-width:3px}.source-details{border-color:#b8a2ca}.source-details>summary,.about summary,.about p,#source-content,footer{color:#5e4e68}.footer-mark{color:#4b3bc0;font:800 15px/1.3 Arial,sans-serif;letter-spacing:-.5px}.about a{color:#4934a9}.word-popover,.word-popover.meaning-only{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:9px;box-shadow:4px 4px 0 var(--ink)}#word-meaning{font-weight:600}.word-box{background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:13px}.word-box h2,.saved-head h3{font-family:Arial,sans-serif;font-weight:800;color:var(--ink)}.word-box h2>span{color:#d6315d}.word-box-close{color:var(--ink)}.saved-word{border:1px solid #b8a2ca;background:#f8f1ff}.saved-meaning,.saved-label,.word-box-heading p,.word-box-storage,.saved-example{color:#59465f}.small-save,#word-save{background:var(--lime);border:1px solid var(--ink);color:var(--ink);font-weight:700}.word-toast{background:var(--ink);color:white;border-color:var(--ink)}#word-filter,#word-export{color:var(--ink);border-color:#9982aa;background:white}.word-extra,.word-source,.word-note-label{color:#5a425b}.word-popover-top{color:#5a425b}.word-remove{color:#7c2244;border-color:#c68ca1}
@media(min-width:1400px){main{margin-top:36px}}@media(max-width:540px){.site-header{height:76px;padding:0 20px}.brand{font-size:21px;gap:8px}.brand-mark{width:31px;height:33px;font-size:24px}.brand-dot{font-size:28px}.word-box-open{font-size:9px;padding:7px 8px;gap:6px}main{margin-top:27px;padding:0 20px}.intro{padding-right:105px;min-height:155px;margin-bottom:21px}.eyebrow{font-size:7px;letter-spacing:1px;gap:6px}h1{font-size:30px;letter-spacing:-1.3px;line-height:1.07;margin:14px 0 11px}.intro>p{font-size:10px;max-width:220px}.character-card{width:94px;height:116px;top:17px;right:0;box-shadow:3px 3px 0 var(--ink);border-radius:40% 40% 10px 10px}.character-stage{width:92px;height:85px}.character-tag{font-size:5px;letter-spacing:.7px;margin-top:1px}.practice{height:500px;padding:18px 18px 16px;box-shadow:5px 5px 0 var(--ink);border-radius:13px}.card-top{gap:6px}.direction-toggle{font-size:9px;gap:7px;padding:6px 8px}.source-number{font-size:8px;letter-spacing:0}.sentence-area{padding:20px 0 12px}#english{font-size:28px;line-height:1.25}.listen-row{gap:9px;margin-bottom:10px}.listen-button{font-size:11px;min-width:85px;padding:8px 11px}#speech-status{font-size:9px}.translation-slot{height:95px;min-height:95px;flex-basis:95px}.translation>p{font-size:16px}.word-help{font-size:9px;min-height:32px}.card-bottom{min-height:58px;margin-top:8px}.card-bottom>.target-toggle,.card-bottom>.next{font-size:12px;padding:9px 16px;min-height:42px}.next-dock{width:calc(100% - 32px);padding:7px;gap:8px}.fixed-target-toggle,.next-fixed{min-height:46px;font-size:13px;padding:11px 14px}.word-box{padding:20px 16px}.footer-mark{font-size:12px}footer{font-size:9px}}
@media(max-width:360px){.site-header{padding:0 16px}.brand{font-size:19px}main{padding:0 16px}.intro{padding-right:84px}h1{font-size:27px}.character-card{width:76px;height:103px}.character-stage{width:76px;height:73px}.character-tag{font-size:4px}.practice{height:505px;padding:17px 14px}#english{font-size:26px}.next-dock{width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.character-stage svg,.practice.animating #sentence-area{animation:none!important}.next:hover{transform:none}*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}