/* Scoped addition: retains the parent website's palette and backdrop. */
.qstory { --qs-mint: #98ead9; --qs-ink: #edf4f6; --qs-muted: #b7c9d1; --qs-line: rgba(174,216,213,.22); --qs-amber: #f6cb80; color: var(--qs-ink); scroll-margin-top: 110px; }
.qstory *, .qstory *::before, .qstory *::after { box-sizing: border-box; }
.qstory [hidden] { display: none !important; }
.qstory-header { max-width: 850px; margin: 0 0 2.2rem; }
.qstory-header > h2 { font-size: clamp(2.1rem,4.2vw,3.8rem); line-height: 1.08; letter-spacing: -.035em; margin: .6rem 0 1rem; }
.qstory-header > p { font-size: 1.08rem; line-height: 1.6; color: var(--qs-muted); }
.qstory-small-label { font-size: .78rem; line-height: 1.5; font-weight: 700; letter-spacing: .14em; color: var(--qs-mint); margin: 0 0 .75rem; }
.qstory-navigation { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .55rem; margin: 0 0 1.25rem; }
.qstory-step-link { display: flex; flex-direction: column; justify-content: flex-start; min-height: 84px; padding: .8rem .85rem; border: 1px solid var(--qs-line); border-radius: 14px; background: rgba(14,33,48,.63); color: var(--qs-muted); text-decoration: none; font-size: .9rem; line-height: 1.3; transition: background .16s,border-color .16s,color .16s; }
.qstory-step-link > span:first-child { font-size: .7rem; letter-spacing: .13em; margin-bottom: .5rem; color: var(--qs-mint); }
.qstory-step-link:hover, .qstory-step-link[aria-current="step"] { border-color: rgba(152,234,217,.76); background: rgba(38,78,85,.63); color: var(--qs-ink); }
.qstory-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(235px, .36fr); border: 1px solid var(--qs-line); border-radius: 26px; background: linear-gradient(135deg,rgba(21,45,62,.88),rgba(8,27,41,.8)); box-shadow: 0 20px 60px rgba(0,0,0,.14); overflow: hidden; }
.qstory-main { min-width: 0; padding: clamp(1.3rem,3vw,2.4rem); }
.qstory-step-count { color: var(--qs-mint); font-size: .75rem; font-weight: 700; letter-spacing: .13em; margin: 0 0 .85rem; }
.qstory-title { font-size: clamp(1.7rem,3.2vw,2.6rem); line-height: 1.15; letter-spacing: -.026em; margin: 0 0 .8rem; }
.qstory-question { color: var(--qs-ink); font-size: 1.12rem; font-weight: 600; margin: 0 0 .7rem; line-height: 1.5; }
.qstory-body { font-size: 1.04rem; color: var(--qs-muted); line-height: 1.7; max-width: 65ch; margin: 0 0 1.5rem; }
.qstory-context { border-left: 1px solid var(--qs-line); padding: 1.75rem 1.5rem; background: rgba(4,22,35,.34); }
.qstory-context-list, .qstory-details-list, .qstory-file-roles { margin: 0; }
.qstory-definition + .qstory-definition { margin-top: 1rem; }
.qstory-definition > dt { font-size: .76rem; font-weight: 600; color: var(--qs-muted); line-height: 1.45; margin: 0 0 .25rem; }
.qstory-definition > dd { color: var(--qs-ink); font-size: .95rem; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.qstory-context-qualifier { font-size: .86rem; color: var(--qs-muted); line-height: 1.55; padding-top: 1rem; margin: 1rem 0 0; border-top: 1px solid var(--qs-line); }
.qstory-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin: 1.5rem 0; }
.qstory-fact { padding: 1rem 1.05rem; border: 1px solid var(--qs-line); border-radius: 15px; background: rgba(6,26,40,.34); }
.qstory-fact--attention { border-color: rgba(246,203,128,.32); background: rgba(91,66,31,.14); }
.qstory-fact--supported { border-color: rgba(152,234,217,.38); }
.qstory-fact-label { color: var(--qs-muted); font-size: .8rem; line-height: 1.45; margin: 0 0 .35rem; }
.qstory-fact-value { font-size: 1.12rem; line-height: 1.4; font-weight: 600; margin: 0; }
.qstory-fact--attention .qstory-fact-value { color: var(--qs-amber); }
.qstory-fact--supported .qstory-fact-value { color: var(--qs-mint); }
.qstory-attention-note { padding: .9rem 1rem; border-left: 2px solid var(--qs-amber); background: rgba(91,66,31,.11); color: var(--qs-muted); font-size: .9rem; line-height: 1.6; margin: 1rem 0 0; }
.qstory-details { margin-top: 1.6rem; border-top: 1px solid var(--qs-line); padding-top: 1rem; }
.qstory-details > summary { cursor: pointer; color: var(--qs-mint); font-size: .9rem; line-height: 1.5; min-height: 32px; padding: .2rem 0; }
.qstory-details-body { padding-top: 1rem; }
.qstory-details-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.qstory-details-list .qstory-definition + .qstory-definition { margin-top: 0; }
.qstory-details-body > p { font-size: .9rem; color: var(--qs-muted); line-height: 1.6; }
.qstory-variants { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 .7rem; }
.qstory-variant, .qstory-control { cursor: pointer; border: 1px solid var(--qs-line); border-radius: 11px; background: rgba(12,34,49,.8); color: var(--qs-ink); font: inherit; font-size: .92rem; min-height: 44px; padding: .65rem 1rem; }
.qstory-variant[aria-pressed="true"] { border-color: var(--qs-mint); background: rgba(54,100,101,.38); }
.qstory-disclosure-label { color: var(--qs-mint); font-size: .9rem; margin: .6rem 0; }
.qstory-file-roles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem; }
.qstory-file-roles > .qstory-definition { padding: .85rem 0; border-bottom: 1px solid var(--qs-line); margin: 0; }
.qstory-file-roles dt { color: var(--qs-mint); font-size: .88rem; }
.qstory-file-roles dd { color: var(--qs-muted); font-size: .91rem; }
.qstory-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; }
.qstory-control:hover:not(:disabled) { border-color: var(--qs-mint); background: rgba(38,78,85,.6); }
.qstory-control:disabled { opacity: .38; cursor: default; }
.qstory-return-links { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.6rem; }
.qstory-return-links > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--qs-mint); text-underline-offset: .25em; font-size: .97rem; }
.qstory :is(a,button,summary):focus-visible { outline: 3px solid #d0fff3; outline-offset: 4px; }
.qstory-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.qstory-fallback .qstory-card + .qstory-card { margin-top: 1.5rem; }
.qstory-fallback-variants { margin: 1.3rem 0; }
.qstory-fallback-variants > h4 { color: var(--qs-mint); font-size: 1.05rem; margin: 1.1rem 0 .65rem; }
.qstory-fallback-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.qstory-fallback-links a { color: var(--qs-mint); font-size: .95rem; text-underline-offset: .25em; }
@media (max-width: 900px) { .qstory-navigation { grid-template-columns: repeat(3,minmax(0,1fr)); } .qstory-card { grid-template-columns: minmax(0,1fr); } .qstory-context { border-left: 0; border-top: 1px solid var(--qs-line); padding: 1.3rem; } .qstory-context-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; } .qstory-context-list .qstory-definition + .qstory-definition { margin: 0; } }
@media (max-width: 540px) { .qstory-header { margin-bottom: 1.3rem; } .qstory-header > h2 { font-size: 2.1rem; } .qstory-step-link { font-size: .79rem; min-height: 80px; padding: .7rem .65rem; } .qstory-navigation { gap: .4rem; } .qstory-card { border-radius: 19px; } .qstory-main { padding: 1.3rem; } .qstory-title { font-size: 1.8rem; } .qstory-body { font-size: 1rem; } .qstory-facts, .qstory-details-list, .qstory-file-roles { grid-template-columns: minmax(0,1fr); } .qstory-facts { gap: .6rem; } .qstory-control { flex: 1; } .qstory-variant { flex: 1 1 100%; } .qstory-context-list { grid-template-columns: minmax(0,1fr); } .qstory-return-links { flex-direction: column; gap: .15rem; } }
@media (prefers-reduced-motion: reduce) { .qstory * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }