/* Shell only. The source pattern stylesheet is deliberately unchanged. */
@media(prefers-reduced-motion:reduce){.wrapper,.wrapper div{animation-play-state:paused}}
.study-key{position:fixed;z-index:10;left:25px;right:25px;bottom:18px;display:flex;align-items:center;gap:12px;color:#484848;font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.015em;pointer-events:none}.study-key span{margin-right:auto;max-width:calc(100% - 110px)}button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer;min-width:44px;min-height:44px;padding:10px;pointer-events:auto}.study-key button{background:#ffffffdd;border-radius:50%}button:focus-visible,a:focus-visible{outline:2px solid #555;outline-offset:3px}dialog{box-sizing:border-box;width:min(460px,calc(100vw - 36px));max-height:85svh;overflow:auto;padding:34px;border:0;background:#fff;color:#222;box-shadow:0 12px 80px #0002;font:17px/1.6 Georgia,serif}dialog::backdrop{background:#fff9;backdrop-filter:blur(5px)}dialog h1{font-size:34px;font-weight:400;line-height:1.1;letter-spacing:-.035em;margin:0 0 24px}dialog p{margin:0 0 20px}dialog .signature{margin-top:26px;font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}dialog a{color:inherit;text-underline-offset:.2em}dialog button{font:11px ui-monospace,SFMono-Regular,Consolas,monospace;padding-left:0;text-align:left}@media(max-width:500px){.study-key{left:16px;right:12px;bottom:12px;gap:3px;font-size:9px}dialog{padding:28px;font-size:16px}}@media(prefers-reduced-motion:reduce){dialog::backdrop{backdrop-filter:none}}

.study-key{justify-content:flex-end}

dialog .caption-close{position:absolute;right:10px;top:10px;font:24px/1 Arial,sans-serif;padding:6px;text-align:center}

/* Fit all eight circles and their stripe spacing on one common scale. */
body{margin:0}
#composition-frame{position:fixed;left:50%;top:calc((100svh - 72px)/2);width:calc(600px * var(--composition-scale,1));height:calc(600px * var(--composition-scale,1));transform:translate(-50%,-50%)}
#composition-frame>.wrapper{margin:0;width:100%;height:100%;box-shadow:0 0 calc(30px * var(--composition-scale,1)) calc(10px * var(--composition-scale,1)) #00000059}
#composition-frame .wrapper,#composition-frame .wrapper div{background-image:repeating-linear-gradient(transparent,transparent calc(5px * var(--composition-scale,1)),black calc(5px * var(--composition-scale,1)),black calc(7px * var(--composition-scale,1)))}