:root{color-scheme:dark;--cream:#f5f0e4;--muted:#d3d5d9;--ink:#12264b;--coral:#ef795b}
/* Reuse the app's ChallengePeelPaper master and its 1.18 scale, -15deg
   rotation, 9.5% inset ring, curl occlusion and two shadow proportions. */
.hero-heading{position:relative;width:min(430px,72vw)}
.hero-heading h1{width:100%}
.pack-sticker{--seal-size:136px;position:absolute;left:calc(100% - 48px);top:calc(22px - var(--seal-size));width:var(--seal-size);height:var(--seal-size);transform:rotate(-15deg);display:block;color:#14213a;text-align:center;z-index:2}
.seal-surface{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(1.3px 2.6px 2.08px #0000003d) drop-shadow(3.38px 7.02px 7.8px #0003)}
.seal-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:1.2%;gap:calc(var(--seal-size)*.014);font-size:calc(var(--seal-size)*.082);font-weight:900;line-height:1.18;text-shadow:-.3px -.4px .25px #0003,.3px .4px .25px #fff6}
.seal-stars{width:23%;height:9.5%;overflow:visible}
#pack-sticker-title{white-space:pre-line}#pack-sticker-title::first-line{color:#d56c52}
.seal-representative{position:absolute;left:36.5%;top:65%;width:27%;height:23%}
.seal-representative img{position:absolute;width:66%;height:66%;object-fit:contain;left:17%;top:17%;filter:drop-shadow(.5px 1px .8px #0003)}
.seal-representative img:nth-child(1){transform:translate(-43%,-18%) rotate(-12deg)}
.seal-representative img:nth-child(2){transform:translate(0,16%) rotate(4deg)}
.seal-representative img:nth-child(3){transform:translate(46%,-18%) rotate(14deg)}
@media(max-width:600px){.hero-heading{width:min(280px,68vw)}.pack-sticker{--seal-size:92px;left:calc(100% - 44px);top:calc(15px - var(--seal-size))}.seal-surface{filter:drop-shadow(.7px 1.4px 1.12px #0000003d) drop-shadow(1.82px 3.78px 4.2px #0003)}}
*{box-sizing:border-box}
html{background:#081630;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;position:relative;isolation:isolate;color:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif;
background:radial-gradient(ellipse at 40% 20%,#162b53 0%,#0c1d3b 68%,#08162e 100%)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('/paper-navy.png') repeat;background-size:420px 420px;mix-blend-mode:soft-light;opacity:.9}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(125deg,#ffffff08,transparent 38%,#0000001c)}
a{color:inherit;text-decoration:none}
a:focus-visible,select:focus-visible{outline:3px solid var(--coral);outline-offset:5px}

.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
padding:max(0px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}

header{display:flex;align-items:center;justify-content:space-between;gap:20px;
width:100%;max-width:1320px;margin:0 auto;min-height:56px;padding:6px 10px}
.brand{font-size:10.5px;font-weight:500;letter-spacing:.16em;color:rgba(245,240,228,.72);
display:inline-flex;align-items:center;min-height:44px;text-shadow:.5px 1px 1px #0009}
select{appearance:none;-webkit-appearance:none;color:rgba(245,240,228,.82);background:transparent;
border:1px solid rgba(245,240,228,.24);border-radius:8px;padding:8px 26px 8px 11px;
font:500 11px/1 inherit;min-height:44px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23f5f0e4' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 10px center;background-size:9px 5px}
select option{color:#12264b;background:#f5f0e4}

main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:28px 0 34px;gap:0}

.icon{width:clamp(88px,9.5vw,104px);height:auto;border-radius:25%;margin:0 0 26px;
box-shadow:1px 2px 2px #0007,4px 9px 9px #0004,12px 24px 32px #0003}

h1{margin:0;width:min(430px,72vw);font-size:0}
.wordmark{position:relative;display:block;width:100%;aspect-ratio:666.5/208;
-webkit-mask:url('/wordmark.svg') center/100% 100% no-repeat;mask:url('/wordmark.svg') center/100% 100% no-repeat;
background:linear-gradient(145deg,#fffbed,#e5dbc3);
filter:drop-shadow(0 .8px .35px #fff3) drop-shadow(1px 3px 1px #0009) drop-shadow(3px 6px 4px #0006)}
.paper-face{position:absolute;inset:0;background:url('/paper-cream.png') repeat;background-size:380px;mix-blend-mode:multiply;opacity:.52}

.rule{width:44px;height:3px;border-radius:2px;margin:22px 0 16px;
background:linear-gradient(135deg,#fa9d7c,#e96d4e);box-shadow:1px 2px 1px #0007}

.intro{margin:0 0 26px;max-width:430px;font-size:clamp(14px,1.25vw,15px);font-weight:500;
line-height:1.7;color:var(--muted);word-break:keep-all;text-shadow:0 1px 1px #0008}

.download{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:11px;
min-height:52px;padding:0 17px;border-radius:13px;color:var(--ink);
background:linear-gradient(140deg,#fff9e9,#e8dfca);border:1px solid #ffffff73;
box-shadow:1px 2px 1px #0009,3px 6px 8px #0004;overflow:hidden}
.download::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:url('/paper-cream.png') repeat;background-size:260px;mix-blend-mode:multiply;opacity:.42}
.download .apple-mark{width:18px;height:22px;flex:0 0 18px}
.download-copy{display:flex;flex-direction:column;gap:2px;text-align:left}
.download-label{font-size:10.5px;font-weight:550;opacity:.72}
.download-action{font-size:15px;font-weight:750;letter-spacing:-.3px}
.download-arrow{margin-left:5px;font-size:14px;opacity:.55}
.download:hover{background:linear-gradient(140deg,#fffdf5,#f0e6d0)}
.download:active{transform:translateY(1px);box-shadow:1px 2px 2px #0008,2px 4px 5px #0004}

footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
width:100%;max-width:1320px;margin:0 auto;min-height:50px;padding:6px 10px;
font-size:10.5px;font-weight:500;color:rgba(245,240,228,.72);text-shadow:.5px 1px 1px #0009}
footer nav{display:flex;gap:18px}
footer a{display:inline-flex;align-items:center;min-height:38px}
footer a:hover{color:#fff}
footer p{margin:0}

@media(max-height:660px){
 main{padding:16px 0 20px}
 .icon{width:clamp(72px,8vw,84px);margin-bottom:18px}
 h1{width:min(360px,64vw)}
 .rule{margin:16px 0 12px}
 .intro{margin-bottom:20px}
}
@media(max-width:600px){
 body::before{background-size:320px 320px;opacity:.85}
 .paper-face{background-size:280px;opacity:.48}
 main{padding:20px 0 26px}
 .icon{margin-bottom:22px}
 h1{width:min(280px,80vw)}
 .rule{margin:20px 0 14px}
 footer{justify-content:center;text-align:center;gap:8px}
}

/* Shared accessible reading layout. */
.document main{display:block;text-align:left;width:100%;max-width:800px;margin:auto;padding:28px 20px 60px;line-height:1.85;font-size:16px;overflow-wrap:anywhere}
.document h1{font-size:clamp(28px,5vw,40px);width:auto;margin:12px 0 26px;color:var(--cream)}
.document h2{font-size:20px;line-height:1.5;margin:32px 0 12px;color:var(--cream)}
.document p,.document li{color:var(--cream)}
.document main a{text-decoration:underline;text-underline-offset:4px}
.document code{font-family:inherit;padding:1px 4px;background:#f5f0e412;border-radius:4px}
.document ul{padding-left:24px}
.panel{display:none}.panel.active{display:block}
footer a{min-height:44px}footer nav{flex-wrap:wrap;justify-content:center}
@media(max-width:600px){.document main{padding:20px 4px 40px;font-size:15px}.document h2{font-size:18px}header{padding-left:0;padding-right:0}.intro{max-width:300px}}