:root{color-scheme:dark;--paper:#faf7ee;--ink:#f5f1e7;--closed-scale:1.25}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 42%,#2b405a 0%,#172638 47%,#101b2a 100%);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;min-height:100svh;display:flex;flex-direction:column}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #efb87c;outline-offset:5px}button[hidden],[hidden]{display:none!important}button:disabled{cursor:default}header,footer{display:flex;justify-content:space-between;align-items:center;padding:28px 5vw}.brand{font-family:"Yu Mincho",serif;font-size:18px;letter-spacing:.16em}.brand-en{display:block;font:10px/2.6 sans-serif;letter-spacing:.25em;color:#aab9c9}#reset{background:transparent;border:1px solid #73839866;border-radius:30px;color:#e5e9ef;padding:10px 18px;font-size:14px}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:560px;padding:8px 0 20px}.intro{text-align:center;z-index:2}.eyebrow{font-size:12px;letter-spacing:.22em;color:#b9c9da}h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:400;font-size:clamp(22px,3vw,32px);letter-spacing:.13em;margin:18px 0 14px}p{font-size:14px;color:#bac8d7;line-height:1.8;margin:0;min-height:26px}.stage{width:100%;height:clamp(300px,43vw,490px);display:grid;place-items:center;margin:28px 0 12px}.letter{width:min(80vw,1060px);aspect-ratio:4200/1485;position:relative;perspective:2000px;transform-style:preserve-3d}.spread{position:absolute;inset:0;display:flex;visibility:hidden;transform-style:preserve-3d;box-shadow:0 28px 36px #0005,0 3px 4px #0004}.opened .spread{visibility:visible}.half{position:relative;width:50%;height:100%;transform-style:preserve-3d}.pair{display:flex;position:absolute;inset:0}.pair img{width:50%;height:100%;object-fit:contain;display:block}.pair:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 48%,#00000016 49.9%,#ffffff38 50.1%,transparent 52%)}.flap{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;z-index:2;will-change:transform}#left .flap{left:0;transform-origin:right center}#right .flap{right:0;transform-origin:left center}.face{position:absolute;inset:0;backface-visibility:hidden;background:var(--paper);overflow:hidden}.face img{width:100%;height:100%;object-fit:contain;display:block}.back{transform:rotateY(180deg)}.face:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 2px #0004;background:linear-gradient(90deg,#00000009,transparent 12%,transparent 94%,#00000010)}#left.peeled .flap{transform:rotateY(180deg)}#right.peeled .flap{transform:rotateY(-180deg)}.peeling .face{box-shadow:0 7px 14px #0003}
.cover{padding:0;border:0;position:absolute;width:25%;height:100%;left:calc(25% + 12.5% * var(--closed-scale));top:0;background:transparent;transform:scale(var(--closed-scale));transform-origin:right center;transform-style:preserve-3d;z-index:8;color:#864b38}.cover-front,.cover-back{position:absolute;inset:0;background:var(--paper);backface-visibility:hidden;display:block;box-shadow:0 22px 32px #0005,2px 2px 0 #d3cfc4,4px 4px 0 #faf5e8}.cover-back{transform:rotateY(180deg);background:linear-gradient(90deg,#e5dfd1,#faf7ee 14%)}.cover img{width:100%;height:100%;display:block}.open-label{position:absolute;bottom:8%;left:10%;right:10%;font-size:clamp(9px,1vw,13px);display:flex;justify-content:space-between}.open-label b{font-weight:400}.unfold{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}.fold-root{position:absolute;left:calc(25% + 12.5% * var(--closed-scale));top:0;width:25%;height:100%;transform:scale(var(--closed-scale));transform-origin:right center;transform-style:preserve-3d}.fold-leaf{position:absolute;left:100%;top:0;width:100%;height:100%;transform-origin:left center;transform-style:preserve-3d;transform:rotateY(179.8deg)}.leaf4{transform:rotateY(-179.8deg)}.fold-face{position:absolute;inset:0;background:var(--paper);backface-visibility:hidden;box-shadow:0 9px 15px #0002}.fold-face img{width:100%;height:100%;display:block}.fold-face:after{content:"";position:absolute;inset:0;box-shadow:inset 2px 0 6px #0002}.fold-leaf:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e5dfd1,#faf7ee 14%);transform:rotateY(180deg);backface-visibility:hidden}
.peel{position:absolute;bottom:0;z-index:5;width:clamp(48px,7vw,82px);height:clamp(48px,7vw,82px);border:0;background:transparent;color:#183447;visibility:hidden;padding:0}.ready .peel{visibility:visible}.peel.left{left:0}.peel.right{right:0}.peel:before{content:"";position:absolute;bottom:0;left:0;width:13px;height:13px;background:linear-gradient(135deg,#fff8e9,#e2d5b8);filter:drop-shadow(1px -1px 1px #0002);clip-path:polygon(0 0,100% 100%,0 100%);transition:width .35s,height .35s,filter .35s;transform-origin:bottom left}.peel.right:before{left:auto;right:0;clip-path:polygon(100% 0,100% 100%,0 100%)}.peel span{position:absolute;bottom:-29px;left:0;white-space:nowrap;color:#ced9e3;font-size:12px;letter-spacing:.14em;opacity:0;transform:translateY(3px);transition:opacity .25s,transform .25s}.peel.right span{left:auto;right:0}.peel i{position:absolute;bottom:9px;left:9px;font-style:normal;font-size:20px;opacity:0;transition:opacity .25s}.peel.right i{left:auto;right:9px}.peel:focus-visible:before{width:48px;height:48px}.peel:focus-visible span,.peel:focus-visible i{opacity:1;transform:none}@media(hover:hover){.peel:hover:before{width:54px;height:54px;filter:drop-shadow(3px -3px 3px #0003)}.peel:hover span,.peel:hover i{opacity:1;transform:none}}@media(hover:none){.peel:before{width:24px;height:24px}.peel i{opacity:.6;font-size:14px;bottom:3px;left:3px}.peel.right i{left:auto;right:3px}}
.peeled .peel,.peeling .peel{visibility:hidden}.progress{display:flex;gap:0;margin-top:22px}.progress button{display:grid;place-items:center;background:none;border:0;width:44px;height:44px;padding:0;border-radius:50%}.progress button span{width:5px;height:5px;border-radius:50%;background:#9aabba;transition:width .3s,background .3s}.progress button.active span{width:24px;border-radius:10px;background:#ebdfc8}.progress button:disabled span{background:#526377}.progress button:not(:disabled):hover{background:#ffffff0a}footer{font-size:12px;color:#8b9eb2;letter-spacing:.1em;padding-top:16px;padding-bottom:24px}@media(max-width:600px){:root{--closed-scale:2.15}header{padding:23px 6vw}.brand{font-size:16px}.brand-en{font-size:9px}main{min-height:480px}.stage{height:310px;margin:24px 0 0}.letter{width:90vw;perspective:1100px}.intro{padding:0 20px}p{font-size:13px}footer{font-size:10px}.open-label{font-size:8px}.progress{margin-top:5px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition-duration:.01ms!important}}
.progress button span{transition:none}

/* Revealed sheets: full-sheet click targets, with a discreet hover hint. */
.zoom-actions{position:absolute;inset:0;display:flex;z-index:6}
.zoom-page{position:relative;width:50%;height:100%;background:transparent;border:0;padding:0;cursor:zoom-in;color:#263a43}
.zoom-page span{position:absolute;top:10px;right:10px;width:28px;height:28px;display:grid;place-items:center;border:1px solid #263a4340;border-radius:50%;background:#fff9e9bb;font-size:19px;opacity:0;transition:opacity .2s}
.zoom-page:hover span,.zoom-page:focus-visible span{opacity:1}
.zoom-page:focus-visible{outline-offset:-5px}
/* A paper sheet floating in the same dark-blue setting. */
.reader{border:0;padding:72px 24px 30px;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--ink);overflow:auto;overscroll-behavior:contain}
.reader[open]{display:flex;align-items:center;justify-content:center}
.reader::backdrop{background:#0a1623dc;backdrop-filter:blur(8px)}
.reader-paper{display:flex;flex-direction:column;align-items:center;gap:22px;flex:none;max-width:100%}
#reader-image{display:block;width:auto;height:auto;max-width:min(82vw,780px);max-height:calc(100dvh - 170px);object-fit:contain;background:var(--paper);box-shadow:0 28px 60px #0007,2px 2px 0 #e3dece}
.reader-close{position:fixed;top:max(20px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));width:48px;height:48px;display:grid;place-items:center;padding:0;line-height:1;border:1px solid #c4d1dc55;border-radius:50%;background:#18293be6;color:#f5f1e7;font-size:30px;font-weight:300;z-index:2;transition:background .2s}
.reader-close:hover{background:#31485c}
.reader-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 28px;border:1px solid #e6dcc5a0;background:#f5edda;color:#213547;text-decoration:none;border-radius:999px;font-size:14px;letter-spacing:.08em;box-shadow:0 5px 14px #0002}
.reader-link:hover{background:#fff9ed}.reader-link:focus-visible{outline:2px solid #efb87c;outline-offset:5px}
@media(max-width:600px){.reader{padding:76px 16px 28px}.reader-paper{gap:20px}#reader-image{max-width:88vw;max-height:calc(100dvh - 180px)}.reader-close{right:16px;top:max(16px,env(safe-area-inset-top))}}
@media(prefers-reduced-motion:reduce){.reader-paper{animation:none}.zoom-page span{transition:none}}

.peel-paper{position:absolute;left:-8%;top:-14.141414%;width:116%;height:128.282828%;z-index:4;pointer-events:none}

/* Header destinations and the restart action in the lower-right corner. */
.header-links{display:flex;align-items:center;gap:10px}
.header-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:76px;padding:10px 20px;border:1px solid #73839866;border-radius:999px;background:transparent;color:#e5e9ef;font-size:14px;text-decoration:none;transition:background .2s,border-color .2s}
.header-link:hover{background:#ffffff0a;border-color:#a6b7ca99}
.header-link:focus-visible{outline:2px solid #efb87c;outline-offset:5px}
footer #reset{min-height:44px;white-space:nowrap;border-radius:999px}
@media(max-width:600px){.header-links{gap:7px}.header-link{min-width:60px;min-height:42px;padding:9px 12px;font-size:13px}footer{gap:14px}footer #reset{font-size:12px;padding:9px 12px}}

/* Composition reference: warm neutral surfaces, fine lines, compact sans type. */
:root{color-scheme:light;--bg:#efede7;--paper:#fbfaf7;--ink:#151515;--muted:#777168;--line:#d5d0c6;--soft:#e7e3da;--accent:#2453db}
body{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.005em;padding:0 24px}
header,footer{width:100%;max-width:1180px;margin:0 auto;padding:24px 2px;gap:16px}
.brand{font-family:inherit;font-size:18px;font-weight:650;letter-spacing:.03em}
.brand-en{font-size:10px;font-weight:400;color:var(--muted);letter-spacing:.18em}
.header-link,#reset{border-color:var(--line);color:#55524d;background:transparent;box-shadow:none;font-size:13px}
.header-link:hover,#reset:hover{background:rgba(100,100,100,.045);border-color:#bbb8b1}
main{width:100%;max-width:1180px;margin:0 auto;border:1px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:0 8px 28px #00000005;padding:30px 0 22px;min-height:600px}
h1{font-family:inherit;font-weight:550;font-size:clamp(20px,2.2vw,26px);letter-spacing:.035em;margin:14px 0 10px}
.eyebrow{color:var(--muted);letter-spacing:.14em;font-variant-numeric:tabular-nums;font-size:12px}
p{color:#706b63;font-size:14px}
.letter{width:min(76vw,1000px)}
.stage{margin-top:20px;margin-bottom:12px}
.spread{box-shadow:0 18px 28px #00000013,0 2px 3px #0000000a}
.cover-front{box-shadow:0 18px 32px #00000017,2px 2px 0 #ddd9cf,4px 4px 0 #faf8f2}
.fold-face{box-shadow:0 7px 13px #00000012}
footer{color:var(--muted);font-size:12px;letter-spacing:.03em;padding-top:18px;padding-bottom:18px}
.progress{margin-top:18px}.progress button span{background:#a6a198}.progress button.active span{background:#68635c}.progress button:disabled span{background:#d8d3ca}.progress button:not(:disabled):hover{background:#7777770a}
button:focus-visible,.header-link:focus-visible,.reader-link:focus-visible{outline:2px solid #777168;outline-offset:5px}
/* The image itself stays free of UI text. Hint is just outside the paper. */
.open-hint{position:absolute;left:0;right:0;top:calc(50% + 50% * var(--closed-scale) + 18px);text-align:center;font-size:13px;color:#777168;letter-spacing:.07em;line-height:1.6;pointer-events:none;opacity:0;transform:translateY(-2px);transition:opacity .2s,transform .2s}
.cover:focus-visible + .open-hint{opacity:1;transform:none}
.cover[hidden] + .open-hint{display:none}
.cover:disabled + .open-hint{opacity:0}
@media(hover:hover){.cover:not(:disabled):hover + .open-hint{opacity:1;transform:none}}
/* Neutral, translucent corners; generous invisible hit areas remain. */
.peel{color:rgba(70,70,70,.48)}
.peel:before{width:10px;height:10px;background:rgba(115,115,115,.10);filter:none;transition:width .25s,height .25s,background .25s}
.peel i{font-size:15px;bottom:7px;left:7px;color:rgba(65,65,65,.46)}
.peel.right i{left:auto;right:7px}
.peel span{color:#777168;font-size:12px;letter-spacing:.05em;bottom:-27px}
.peel:focus-visible:before{width:36px;height:36px;background:rgba(115,115,115,.12);filter:none}
@media(hover:hover){.peel:hover:before{width:36px;height:36px;background:rgba(115,115,115,.12);filter:none}.peel:hover i{opacity:1}}
.zoom-page{color:#777168}.zoom-page span{width:24px;height:24px;font-size:16px;color:#666666a6;border:1px solid #77777726;background:#8080800a}
.zoom-page:hover span{opacity:.65}.zoom-page:focus-visible span{opacity:1}
.reader{color:var(--ink)}.reader::backdrop{background:rgba(239,237,231,.88);backdrop-filter:blur(9px)}
#reader-image{box-shadow:0 22px 50px #00000020,2px 2px 0 #ddd9cf}
.reader-close{border-color:var(--line);background:#fbfaf7dc;color:#777168;font-size:26px}.reader-close:hover{background:#e7e3dae6}
.reader-link{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 3px 10px #2453db18;font-size:14px;font-weight:550;letter-spacing:.025em;border-radius:999px}.reader-link:hover{background:#234dca}
@media(hover:none){.open-hint{opacity:1;transform:none}.peel:before{width:22px;height:22px;background:#77777712}.peel i{opacity:.75;font-size:12px;bottom:3px;left:3px}.peel.right i{left:auto;right:3px}}
@media(max-width:600px){body{padding:0 14px}header,footer{padding:20px 2px;gap:10px}.brand{font-size:16px}.brand-en{font-size:9px}.header-link{min-width:56px;padding:8px 10px;font-size:12px}main{border-radius:16px;min-height:500px;padding:26px 0 18px}.intro{padding:0 16px}.letter{width:82vw}.stage{height:300px;margin-top:20px}.open-hint{font-size:12px;top:calc(50% + 50% * var(--closed-scale) + 18px)}footer{font-size:10px}footer #reset{font-size:11px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.open-hint{transition:none}}

/* A single continuous background, with no inner white panel. */
main{background:transparent;border-color:transparent;box-shadow:none}
.profile-dialog[open]{align-items:flex-start}
.profile-sheet{width:min(100%,640px);margin:auto;padding:20px 20px 36px}
.profile-kicker{font-size:11px;letter-spacing:.18em;color:var(--muted);margin:0 0 20px;min-height:0}
.profile-sheet h2{font-size:32px;font-weight:550;letter-spacing:.12em;line-height:1.4;margin:0 0 9px}
.profile-name-en{font-size:16px;letter-spacing:.045em;color:var(--muted);margin:0 0 36px;min-height:0}
.profile-section{border-top:1px solid var(--line);padding:21px 0 4px;margin-top:22px}
.profile-section h3{font-size:12px;letter-spacing:.08em;font-weight:500;color:var(--muted);margin:0 0 17px}
.profile-history{margin:0;font-size:15px;line-height:1.8}
.profile-history>div{display:grid;grid-template-columns:110px 1fr;gap:18px;margin:9px 0}
.profile-history dt{color:var(--muted);font-variant-numeric:tabular-nums}.profile-history dd{margin:0;color:var(--ink)}
.profile-work-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:16px;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:#77716866}
.profile-work-link:hover{text-decoration-color:var(--ink)}.profile-work-link:focus-visible{outline:2px solid var(--muted);outline-offset:5px}
.profile-skills{font-size:15px;line-height:1.9;color:var(--ink);margin:0;overflow-wrap:anywhere}
@media(max-width:600px){.profile-sheet{padding:8px 6px 24px}.profile-sheet h2{font-size:27px}.profile-name-en{margin-bottom:28px}.profile-history>div{grid-template-columns:90px 1fr;gap:12px;margin:13px 0}.profile-history{font-size:14px}.profile-skills{font-size:14px}.profile-section{margin-top:20px;padding-top:18px}}

/* Each page reserves the top-right corner for zoom; lower corners only peel. */
.zoom-actions{display:block;pointer-events:none}
.zoom-page{position:absolute;top:0;right:0;width:48px;height:min(48px,40%);pointer-events:auto;border-radius:0;cursor:zoom-in}
.zoom-page:first-child{right:50%}
.zoom-page span{top:8px;right:8px;width:24px;height:24px;pointer-events:none}
.peel{height:min(clamp(48px,7vw,82px),40%)}
@media(hover:none){.zoom-page span{opacity:.48}}
@media(max-width:600px){.zoom-page span{top:5px;right:5px;width:22px;height:22px;font-size:15px}}