.chapter-title{font-family:var(--font)!important}
.app-screen{--pattern:color-mix(in srgb,var(--screen-text) calc(var(--texture) * 100%),transparent);background-size:18px 18px}
.verse-card:before{background-image:none}
.app-screen[data-environment=minimalist] .verse-card{border-color:#ddd;box-shadow:0 12px 40px #00000012}
.app-screen[data-environment=scribe]{background-image:repeating-linear-gradient(90deg,transparent 0 17px,var(--pattern) 17px 18px)}
.app-screen[data-environment=scribe] .verse-card{border-radius:3px;border-color:#bbb39d;box-shadow:-7px 9px 0 color-mix(in srgb,var(--card-bg) 90%,black),-12px 15px 0 color-mix(in srgb,var(--card-bg) 80%,black)}
.app-screen[data-environment=scribe] .verse-card:before{background-image:repeating-linear-gradient(0deg,transparent 0 12px,currentColor 12px 13px);background-size:auto}
.app-screen[data-environment=architect],.app-screen[data-environment=classicist]{background-image:linear-gradient(90deg,var(--pattern) 1px,transparent 1px),linear-gradient(var(--pattern) 1px,transparent 1px)}
.app-screen[data-environment=architect] .verse-card{border-radius:0;border:4px double #999;padding-top:30px}
.app-screen[data-environment=architect] .verse-card:after{content:'+';position:absolute;right:9px;top:1px;font:18px monospace;color:#999}
.app-screen[data-environment=classicist] .chapter-title{color:var(--screen-accent)}
.app-screen[data-environment=classicist] .verse-card{border-radius:3px;border:1px solid var(--accent);outline:1px solid color-mix(in srgb,var(--accent) 20%,transparent);outline-offset:6px}
.app-screen[data-environment=classicist] .verse-card:before{background-image:linear-gradient(90deg,currentColor 1px,transparent 1px),linear-gradient(currentColor 1px,transparent 1px);background-size:16px 16px}
.app-screen[data-environment=nocturne]{background-image:linear-gradient(var(--pattern) 1px,transparent 1px);background-size:100% 17px}
.app-screen[data-environment=default] .verse-card:before,.app-screen[data-environment=minimalist] .verse-card:before{background-image:radial-gradient(currentColor .7px,transparent .7px);background-size:4px 4px}
.environment-description{border-left:2px solid #6f88bf;padding-left:12px;color:#cbd2e0!important;min-height:42px}
.connections{position:sticky;bottom:120px;z-index:2;margin-left:auto;width:max-content;max-width:100%;color:var(--screen-text);background:var(--screen-bg);border:1px solid var(--screen-accent);border-radius:16px 0 0 16px;font:13px/1.5 Arial,sans-serif}
.connections summary{cursor:pointer;padding:14px;color:var(--screen-accent);letter-spacing:1px;list-style:none}
.connections summary:after{content:' +'}
.connections[open] summary:after{content:' −'}
.connections[open]{width:100%}
.connections>div{padding:0 16px 16px}
.connections p{color:inherit;font-size:14px;margin:10px 0 0}
