.yla-connect { --yla-bg:#0b1224;--yla-surface:#141f36;--yla-ink:#f7f1e5;--yla-muted:#cbd4e5;--yla-line:#7183a3;--yla-accent:#e2bc72;--yla-button-ink:#111a2e;--yla-focus:#d4c3f5;box-sizing:border-box;isolation:isolate;position:relative;margin:32px 0;padding:clamp(24px,5vw,52px);border:1px solid var(--yla-line);border-radius:24px;background:var(--yla-bg);color:var(--yla-ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;line-height:1.65;text-align:start;color-scheme:dark; }
.yla-connect[data-theme=light]{--yla-bg:#fffcf7;--yla-surface:#f1eaf6;--yla-ink:#30213e;--yla-muted:#5d526b;--yla-line:#9a86ad;--yla-accent:#543268;--yla-button-ink:#fff;--yla-focus:#755197;color-scheme:light;}
.yla-connect *, .yla-connect *::before,.yla-connect *::after{box-sizing:border-box;}
.yla-connect [hidden]{display:none!important;}
/* Keep the chosen widget palette when a host theme loads dark-skin rules later. */
.yla-connect[data-theme] h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,3.6vw,48px);font-weight:600;line-height:1.15;letter-spacing:-.025em;color:var(--yla-ink);margin:26px 0 18px;padding:0;border:0;text-transform:none;overflow-wrap:anywhere;}
.yla-connect[data-theme] p,.yla-connect[data-theme] .yla-connect__content p{color:var(--yla-muted);font:inherit;margin:0 0 24px;max-width:68ch;}
.yla-connect[data-theme] .yla-connect__brand{display:inline-flex;align-items:center;gap:10px;max-width:100%;font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:bold;color:var(--yla-ink);text-decoration:none;box-shadow:none;}
.yla-connect__brand img{display:block;width:40px;height:48px;object-fit:contain;max-width:100%;}
.yla-connect .yla-connect__actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:12px 20px;margin:28px 0 0;}
.yla-connect .yla-connect__button{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:52px;max-width:100%;padding:12px 24px;border:1px solid transparent;border-radius:999px;background:var(--yla-accent);color:var(--yla-button-ink);font:700 16px/1.5 system-ui,sans-serif;text-align:center;text-decoration:none;box-shadow:none;cursor:pointer;white-space:normal;overflow-wrap:anywhere;transition:transform 160ms ease,box-shadow 160ms ease;}
.yla-connect .yla-connect__button--secondary{background:transparent;color:var(--yla-ink);border-color:var(--yla-line);}
.yla-connect .yla-connect__button:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0002;}
.yla-connect[data-theme] p.yla-connect__note{font-size:14px;margin:22px 0 0;}
.yla-connect :is(a,button,input,select):focus-visible{outline:3px solid var(--yla-focus);outline-offset:4px;}
.yla-connect__dialog.yla-connect{inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;z-index:2147483647;}
.yla-connect__dialog[open]{display:flex;flex-direction:column;animation:yla-panel-in 220ms ease-out;}
.yla-connect__dialog::backdrop{background:#070b14b3;}
.yla-connect .yla-connect__toolbar{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:12px;min-height:58px;padding:6px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--yla-line);background:var(--yla-surface);}
.yla-connect__toolbar strong{font-family:Georgia,serif;font-size:18px;flex:1;}
.yla-connect__dialog[data-page=example] .yla-connect__toolbar{min-height:54px;padding-block:6px;}
.yla-connect__dialog[data-page=example] .yla-connect__toolbar strong{font-size:18px;}
.yla-connect__dialog[data-page=example] .yla-connect__outside{display:none;}
.yla-connect .yla-connect__outside{display:inline-flex;align-items:center;gap:8px;color:var(--yla-ink);font-size:14px;text-decoration:underline;text-underline-offset:4px;padding:10px 4px;}
.yla-connect .yla-connect__close{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;min-height:44px;color:var(--yla-ink);border:1px solid var(--yla-line);border-radius:12px;background:transparent;font:600 15px/1.4 system-ui,sans-serif;cursor:pointer;}
.yla-connect__close>span:first-child{font-size:26px;font-weight:400;line-height:1;}
.yla-connect__dialog iframe{display:block;flex:1;min-height:0;width:100%;margin:0;border:0;background:var(--yla-bg);visibility:hidden;}
.yla-connect__dialog[data-state=ready] iframe{visibility:visible;}
.yla-connect .yla-connect__loading,.yla-connect .yla-connect__failure{position:absolute;inset:110px 24px 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:16px;}
.yla-connect .yla-connect__failure h2{font-size:32px;max-width:24ch;}
.yla-connect__spinner{width:36px;height:36px;border:3px solid var(--yla-line);border-top-color:var(--yla-accent);border-radius:50%;animation:yla-spin 1s linear infinite;}
.yla-connect .yla-connect__confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:clamp(24px,6vw,72px);background:var(--yla-bg);z-index:2;overflow:auto;}
.yla-connect__confirm h2{font-size:clamp(28px,4vw,42px);max-width:24ch;}
.yla-connect__confirm p{max-width:50ch;}
.yla-connect-settings__preview{max-width:760px;}
.yla-theme-option{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid #8c8f94;border-radius:8px;margin:0 12px 8px 0;}
.yla-theme-option:has(input:checked){outline:2px solid #2271b1;outline-offset:2px;}
@keyframes yla-panel-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes yla-spin{to{transform:rotate(360deg)}}
@media(max-width:520px){.yla-connect__actions>*{flex:1 1 100%;}.yla-connect__toolbar strong{font-size:18px;}.yla-connect .yla-connect__confirm{justify-content:safe center;}}
@media(prefers-reduced-motion:reduce){.yla-connect,.yla-connect *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}.yla-connect .yla-connect__button:hover{transform:none;}}
/* The widget responds to its WordPress column, not only the browser width. */
section.yla-connect{container-type:inline-size;}
.yla-connect__layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(180px,.8fr);align-items:center;gap:36px;}
.yla-connect__content{min-width:0;}
.yla-connect .yla-connect__visual{display:flex;justify-content:center;padding:22px 12px 16px;perspective:1000px;}
.yla-connect .yla-connect__book{position:relative;width:100%;max-width:238px;padding:23px 20px 26px;border:1px solid #c29b51;border-radius:5px 13px 13px 5px;background:var(--yla-surface);box-shadow:5px 3px 0 #eee4d2,8px 4px 0 #ae9170,14px 18px 32px #0004;transform:rotate(-6deg) rotateY(-10deg);text-align:center;transition:transform .35s ease;}
.yla-connect .yla-connect__book::before{content:"";position:absolute;inset:10px;border:1px solid #c29b5166;border-radius:2px 6px 6px 2px;pointer-events:none;}
.yla-connect .yla-connect__book img{display:block;width:100%;height:auto;margin:18px auto 10px;filter:drop-shadow(0 6px 12px #0002);}
.yla-connect__book-brand{font:600 12px/1.4 Georgia,serif;color:var(--yla-ink);}
.yla-connect__book-title{display:block;font:600 clamp(22px,3cqi,30px)/1.15 Georgia,serif;color:var(--yla-ink);overflow-wrap:anywhere;}
.yla-connect__book-caption{display:block;font-size:11px;line-height:1.5;margin-top:14px;color:var(--yla-muted);}
.yla-connect:has(.yla-connect__button:hover) .yla-connect__book{transform:rotate(-3deg) rotateY(0);}
@container (max-width:590px){.yla-connect__layout{grid-template-columns:1fr;gap:18px;}.yla-connect__visual{grid-row:auto;padding:12px 8px 0!important;}.yla-connect__book{max-width:160px!important;padding:16px 16px 20px!important;}.yla-connect__book img{margin:12px auto 8px!important;}.yla-connect__book-caption{display:none;}.yla-connect__book-title{font-size:20px;}.yla-connect__book-brand{font-size:10px;}.yla-connect[data-theme] .yla-connect__content h2{font-size:clamp(28px,8cqi,40px);margin-top:14px;}.yla-connect__actions>*{flex:1 1 100%;}}
.yla-connect-settings{max-width:1380px;margin-right:24px;}
.yla-settings-header{display:flex;gap:16px;align-items:center;padding:24px 0;}
.yla-settings-header img{flex:none;object-fit:contain;}
.yla-settings-header h1{font-weight:600;padding:0!important;}
.yla-settings-header p{max-width:70ch;color:#50575e;font-size:15px;}
.yla-settings-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);align-items:start;gap:32px;}
.yla-settings-form{background:#fff;border:1px solid #c3c4c7;border-radius:16px;padding:24px;}
.yla-settings-field{display:grid;gap:10px;margin:0 0 24px;min-width:0;}
.yla-settings-field>label,.yla-settings-field>legend{font-weight:600;font-size:15px;margin-bottom:8px;}
.yla-settings-field select,.yla-settings-field>input{width:100%;max-width:none;min-height:44px;}
.yla-theme-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.yla-theme-option{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:12px;border:1px solid #a7aaad;border-radius:10px;margin:0;cursor:pointer;}
.yla-theme-option input{margin:0;}
.yla-theme-option>span:last-child{grid-column:1/-1;font-weight:600;}
.yla-theme-swatch{display:grid;place-items:center;height:48px;border-radius:6px;font-size:26px;background:#0b1224;color:#e2bc72;border:1px solid #7183a3;}
.yla-theme-option[data-theme=light] .yla-theme-swatch{background:#fffcf7;color:#543268;}
.yla-settings-advanced{border-top:1px solid #dcdcde;padding-top:18px;}
.yla-settings-advanced summary{cursor:pointer;font-weight:600;padding:8px 0;}
.yla-settings-advanced[open] .yla-settings-field{margin-top:16px;}
.yla-settings-form .submit{padding-bottom:0;}
.yla-settings-form .button-primary{min-height:44px;padding:4px 20px;}
.yla-settings-preview h2{margin-top:0;}
.yla-connect-settings__preview{max-width:none;}
.yla-connect-settings__preview>section{margin:0;}
.yla-settings-install{border-top:1px solid #c3c4c7;padding:28px 0;margin-top:36px;max-width:900px;}
.yla-settings-install>p{font-size:14px;max-width:85ch;}
.yla-settings-shortcode{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0;}
.yla-settings-shortcode input{max-width:100%;width:250px;font-family:monospace;min-height:44px;}
.yla-settings-shortcode .button{min-height:44px;}
.yla-settings-copy-status{min-height:1.5em;}
@media(max-width:1080px){.yla-settings-layout{grid-template-columns:1fr;}.yla-settings-form{max-width:620px;}.yla-settings-preview{max-width:760px;}}
@media(prefers-reduced-motion:reduce){.yla-connect:has(.yla-connect__button:hover) .yla-connect__book{transform:rotate(-6deg) rotateY(-10deg);}}
/* Compact branding and cover for narrow article columns. */
.yla-connect[data-theme] .yla-connect__brand{font-size:clamp(17px,4.8cqi,24px);gap:8px;}
.yla-connect__brand img{flex:none;}
.yla-connect[data-theme] .yla-connect__content h2{font-size:clamp(28px,5.8cqi,44px);}
@container (min-width:501px) and (max-width:590px){.yla-connect__layout{grid-template-columns:minmax(0,1.35fr) minmax(160px,.8fr);gap:24px;}.yla-connect__visual{grid-row:auto;}.yla-connect__book{max-width:180px!important;}.yla-connect[data-theme] .yla-connect__content h2{font-size:34px;}}
@container (max-width:350px){.yla-connect__brand img{width:28px;height:36px;}.yla-connect__visual{padding:8px 8px 0!important;}.yla-connect__book{max-width:120px!important;padding:13px 12px 18px!important;}.yla-connect__book-title{font-size:17px;}.yla-connect__book-brand{font-size:8px;}}

.yla-connect-block-icon{object-fit:contain;}

/* One quiet toolbar; the reading itself supplies the progress and question. */
.yla-connect .yla-connect__outside { width:44px; min-height:44px; flex:none; justify-content:center; padding:8px; font-size:22px; text-decoration:none; }
.yla-connect__outside [data-yla-copy] { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }