.preferences-page{min-height:calc(100svh - 92px);display:grid;place-items:center;padding:32px 24px;background:linear-gradient(110deg,#102f37e8,#19353aaf),url('/assets/story/chapter-1.jpg') center/cover}
.preferences-card{width:min(560px,100%);padding:30px 36px;border:1px solid #d5bd8460;border-radius:18px;background:#fbf4e8;color:#233d42;box-shadow:0 15px 60px #071e3260}
.preferences-heading{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.preferences-heading h1{font-size:30px;margin:0}.settings-symbol{font-size:30px;color:#907044}
.preferences-fields{display:grid;gap:26px}.preference-row{display:grid;gap:12px;font-weight:650;font-size:16px}.volume-control{display:flex;align-items:center;gap:18px}.volume-control input{width:100%;min-width:0;accent-color:#256568;cursor:pointer;min-height:30px}.volume-control output{min-width:44px;text-align:right;font-variant-numeric:tabular-nums;color:#665f50}.language-row{grid-template-columns:1fr 150px;align-items:center}.language-row select{height:44px;border:1px solid #c4b99e;border-radius:7px;padding:0 12px;background:#fffaf0;font:inherit;color:inherit}.preferences-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:32px}.preferences-actions button{min-height:44px;padding-inline:20px}
html[data-layout="phone"] .preferences-page{height:calc(var(--phone-height,100dvh) - 38px);min-height:0;padding:8px max(16px,env(safe-area-inset-left)) 8px max(16px,env(safe-area-inset-right));overflow:auto}
html[data-layout="phone"] .preferences-card{width:min(590px,100%);padding:12px 22px;border-radius:12px}
html[data-layout="phone"] .preferences-heading{margin-bottom:12px;gap:8px}html[data-layout="phone"] .preferences-heading h1{font-size:23px}html[data-layout="phone"] .settings-symbol{font-size:23px}
html[data-layout="phone"] .preferences-fields{gap:7px}html[data-layout="phone"] .preference-row{grid-template-columns:130px 1fr;align-items:center;gap:12px;font-size:13px}html[data-layout="phone"] .volume-control{gap:12px}html[data-layout="phone"] .language-row select{height:34px;font-size:16px}html[data-layout="phone"] .preferences-actions{margin-top:12px;gap:10px}html[data-layout="phone"] .preferences-actions button{min-height:36px;font-size:13px}