sumi-book{display:block;--sb-ink:#20201e;--sb-gold:#b89d6f;--sb-paper:#f8f6f2;color:var(--sb-ink)}
sumi-book *{box-sizing:border-box}
sumi-book .sb-section{background:var(--sb-paper);padding:64px 28px}
sumi-book .sb-inner{max-width:940px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
sumi-book .sb-copy{min-width:0;max-width:820px;margin:0 auto;text-align:center}
sumi-book .sb-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 20px;color:#756044}
sumi-book .sb-copy h2{font-family:var(--font-heading-family,Georgia,serif);font-size:clamp(28px,3.5vw,44px);font-weight:400;line-height:1.2;margin:0 0 22px;color:var(--sb-ink)}
sumi-book .sb-copy p{line-height:1.8;font-size:15px}
sumi-book .sb-reader{min-width:0;width:100%;max-width:820px;margin:0 auto;position:relative;outline:none}
sumi-book .sb-reader-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
sumi-book .sb-reader-scroll{display:flex;align-items:center;justify-content:center;padding:22px 14px 24px;overflow:hidden}
sumi-book .sb-stage{position:relative;perspective:1800px;display:flex;width:100%;aspect-ratio:1.44023;filter:drop-shadow(0 12px 12px #322f242b);touch-action:pan-y;isolation:isolate}
sumi-book .sb-page{width:50%;height:100%;background:var(--sb-paper);position:relative;overflow:hidden}
sumi-book .sb-page img,sumi-book .sb-flip img{display:block;width:100%;height:100%;object-fit:contain;background:var(--sb-paper);user-select:none;-webkit-user-drag:none}
sumi-book .sb-page-left:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 88%,#28251c20);pointer-events:none}
sumi-book .sb-page-right:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#28251c20,transparent 12%);pointer-events:none}
sumi-book .sb-stage[data-cover=true] .sb-page-left{visibility:hidden}
sumi-book .sb-stage[data-cover=true]{transform:translateX(-25%)}
sumi-book .sb-stage[data-cover=true] .sb-page-right{box-shadow:3px 0 0 #dbd5c9,5px 1px 0 #e8e3d9,7px 2px 0 #3a382f}
sumi-book .sb-flip{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left;transform-style:preserve-3d;z-index:4;pointer-events:none}
sumi-book .sb-flip-front,sumi-book .sb-flip-back{position:absolute;inset:0;backface-visibility:hidden;background:var(--sb-paper);overflow:hidden}
sumi-book .sb-flip-back{transform:rotateY(180deg)}
sumi-book .sb-flip-front:after,sumi-book .sb-flip-back:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#28251c30,transparent 15%,transparent 80%,#28251c15)}
sumi-book .sb-bottom{display:flex;gap:20px;align-items:center;justify-content:center;padding:10px 0 18px}
sumi-book .sb-tool{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;border:1px solid #b8a78e;border-radius:50%;background:transparent;color:var(--sb-ink);font:inherit;font-size:23px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
sumi-book .sb-tool:hover:not(:disabled){background:#eae4d9;border-color:#756044}
sumi-book .sb-tool:disabled{opacity:.3;cursor:default}
sumi-book .sb-status{font-size:12px;min-width:122px;text-align:center;letter-spacing:.03em}
sumi-book .sb-error{padding:10px;color:#8d321c;text-align:center;font-size:13px;line-height:1.5}
sumi-book .sb-mobile-hint{display:none}
sumi-book .sb-lock{position:absolute;inset:0 0 0 50%;display:flex;align-items:center;justify-content:center;z-index:6;padding:12px;background:#f8f6f225}
sumi-book .sb-lock[data-wide=true]{left:0}
sumi-book .sb-lock-card{max-width:340px;padding:18px 14px;text-align:center;background:#f8f6f2f2;border:1px solid #b79c7077;box-shadow:0 10px 28px #29251c16}
sumi-book .sb-lock-card h3{font-family:Georgia,serif;font-size:clamp(20px,2vw,27px);line-height:1.2;margin:10px 0;color:#242620}
sumi-book .sb-lock-card p{font-size:12px;line-height:1.5;margin:10px 0}
sumi-book .sb-open{display:inline-flex;align-items:center;justify-content:center;background:#22221f;color:#fff;border:1px solid #22221f;padding:12px 16px;font:inherit;font-size:12px;line-height:1.3;min-height:44px;cursor:pointer}
sumi-book .sb-open:hover{background:#413b31}
sumi-book .sb-lock-symbol{color:#8b724e}
sumi-book .sb-login{display:block;font-size:11px;color:#544b3d;text-underline-offset:4px;margin:12px 0 8px}
sumi-book .sb-lock-card small{display:block;font-size:10px;line-height:1.4;color:#766e61}
sumi-book .sb-page img[data-locked=true]{filter:blur(3px)}
sumi-book .sb-tool:focus-visible,sumi-book .sb-open:focus-visible,sumi-book .sb-contents select:focus-visible,sumi-book .sb-reader:focus-visible,sumi-book summary:focus-visible{outline:3px solid #aa8550;outline-offset:5px}
sumi-book [hidden]{display:none!important}
@media(max-width:749px){sumi-book .sb-section{padding:36px 18px} sumi-book .sb-inner{grid-template-columns:1fr;gap:28px;max-width:480px} sumi-book .sb-reader-scroll{padding:16px 12px 22px} sumi-book .sb-stage{max-width:340px;aspect-ratio:0.720115} sumi-book .sb-page-left{display:none} sumi-book .sb-page-right{width:100%} sumi-book .sb-stage[data-cover=true]{transform:none} sumi-book .sb-flip{left:0;width:100%} sumi-book .sb-bottom{gap:14px;padding:8px 0 16px} sumi-book .sb-copy{text-align:center} sumi-book .sb-mobile-hint{display:block;text-align:center;font-size:11px;color:#686455;margin:0 0 8px} sumi-book .sb-lock{left:0;padding:16px} sumi-book .sb-lock-card{padding:22px 18px} sumi-book .sb-lock-card h3{font-size:26px} sumi-book .sb-lock-card p{font-size:13px}}
@media(prefers-reduced-motion:reduce){sumi-book .sb-tool{transition:none}}

/* Optional page-turn sound, alongside the reader controls. */
sumi-book .sb-sound-row{text-align:center;margin:-5px 0 14px}
sumi-book .sb-sound{min-height:36px;padding:7px 12px;border:0;background:transparent;color:#665d51;font:inherit;font-size:11px;letter-spacing:.03em;text-decoration:underline;text-decoration-color:#b8a78e;text-underline-offset:4px;cursor:pointer}
sumi-book .sb-sound:hover{color:var(--sb-ink)}
sumi-book .sb-sound:focus-visible{outline:3px solid #aa8550;outline-offset:3px}