/* Hazumi · the download site's stylesheet: Claude Design's download.css (design_handoff_download,
 * October 18), served same-origin as /assets/download.css. Values are the prototype's (Download Page
 * v2) and Hazumi Shared tokens. No font smoothing anywhere (family rule): it makes a browser draw SF
 * about 15% lighter than the native app.
 *
 * MD-12's changes from the handoff, each because the Worker's pages differ from the prototype:
 * - the prototype's ?appearance and ?motion overrides are gone (SPEC §9: the build drops them); the
 *   system's prefers-color-scheme and prefers-reduced-motion are the only switches;
 * - the sun's rays take their index from :nth-of-type here, not from a style attribute, so the pages
 *   carry no inline style at all and the CSP's style-src is 'self' without 'unsafe-inline';
 * - row 1's refusal is one sentence per reason, chosen by data-reason (Raph's D5, spec §9, overrides
 *   the design's single "never say why" sentence);
 * - the paused page's notice card, which the design has no state for, is the phone card's look;
 * - without script, a touch-only device stands in for the server's user-agent check (see the end). */
:root{color-scheme:light dark;--canvas:#F7F8FB;--surface:#FFFFFF;--ink:#171A24;--title:#2B2F3D;--body:#3D4152;--meta:#5F6479;--faint:#8A8FA6;--rule:rgba(23,26,36,.12);--link:#1F6DB5;--warn:#AF422E;--focus:#3E8FD8;--gold:#E8A825;--edge-wash:rgba(232,168,37,.07);--lamp-mid:#C9A24C;--lift:0 0 0 1px rgba(23,26,36,.08),0 12px 32px rgba(23,26,36,.10);--navy:#1B2A4A;--swift:cubic-bezier(.22,.9,.24,1);--standard:cubic-bezier(.4,0,.2,1);}
@media (prefers-color-scheme:dark){:root{--canvas:#1D1F24;--surface:#24262C;--ink:#ECEDEF;--title:#DCDEE3;--body:#C9CCD5;--meta:#9DA1A9;--faint:#7E838E;--rule:rgba(236,237,239,.12);--link:#5BA6EA;--warn:#E3876B;--focus:#5BA6EA;--gold:#F2BC42;--edge-wash:rgba(242,188,66,.07);--lamp-mid:#F2BC42;--lift:0 0 0 1px rgba(236,237,239,.12);}}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}
body{background:var(--canvas);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,system-ui;display:flex;flex-direction:column;align-items:center;min-height:100vh;}
a{color:var(--link);} a:hover{color:var(--link);opacity:.85;}
input,button{font-family:inherit;}
.band{width:100%;background:var(--navy);padding:64px 32px 112px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
.band img{width:104px;height:104px;display:block;}
.band h1{margin:0;font-size:42px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#FFFFFF;}
.band p{margin:10px 0 0;max-width:560px;font-size:19px;line-height:1.35;color:#C8D1E3;text-wrap:balance;}
main{width:100%;max-width:560px;padding:0 20px;margin-top:-56px;display:flex;flex-direction:column;gap:28px;flex:1;}
.card{border-radius:16px;background:var(--surface);box-shadow:var(--lift);}
.phone-card,.notice-card{padding:20px;text-align:center;}
.phone-card{display:none;}
.phone-card p,.notice-card p{margin:0;}
.phone-card .lead,.notice-card .lead{font-size:17px;line-height:24px;font-weight:500;color:var(--ink);text-wrap:pretty;}
.phone-card .note,.notice-card .note{margin-top:6px;font-size:15px;line-height:21px;color:var(--meta);}
.list{margin:0;padding:8px;list-style:none;display:flex;flex-direction:column;}
.row{border-radius:10px;transition:background-color 200ms var(--standard);}
.row.is-edge{background:var(--edge-wash);}
.row form{margin:0;}
.row-line{appearance:none;background:none;border:0;margin:0;font:inherit;color:inherit;text-align:left;text-decoration:none;box-sizing:border-box;display:flex;align-items:flex-start;gap:12px;width:100%;min-height:48px;padding:12px 14px;border-radius:10px;cursor:default;-webkit-tap-highlight-color:transparent;}
.row-line:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
.box-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.box-input:focus-visible ~ .box{outline:2px solid var(--focus);outline-offset:2px;}
.box{position:relative;flex:none;width:20px;height:20px;margin-top:2px;border-radius:6px;box-shadow:inset 0 0 0 1.6px var(--faint);}
.row.is-edge .box{box-shadow:inset 0 0 0 1.6px var(--gold);}
.row.is-arriving .box{animation:hzEdgeSettle 240ms var(--swift);}
.row-line:active .box{transform:scale(.97);}
.fill{position:absolute;inset:0;border-radius:6px;background:#E8A825;display:flex;align-items:center;justify-content:center;opacity:0;}
.fill path{fill:none;stroke:#FFFFFF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;}
.row.is-done .fill,.box-input:checked + .box .fill{opacity:1;}
.row.is-fresh .fill,.box-input:checked + .box .fill{animation:hzBurstPop 360ms var(--swift) 160ms both;}
.row.is-fresh .fill path,.box-input:checked + .box .fill path{animation:hzTick 160ms ease-out 20ms both;}
.fx{position:absolute;inset:0;pointer-events:none;}
.fx b{position:absolute;left:50%;top:50%;border-radius:50%;opacity:0;}
.fx .ring{width:24px;height:24px;margin:-12px;box-shadow:0 0 0 2px rgba(232,168,37,.7);}
.m:nth-child(2){--dx:28.8px;--dy:8.3px;width:5px;height:5px;margin:-2.5px;background:#F5D47A;--d:190ms;}
.m:nth-child(3){--dx:12.9px;--dy:19.1px;width:4px;height:4px;margin:-2px;background:#E8A825;--d:220ms;}
.m:nth-child(4){--dx:-3.8px;--dy:35.8px;width:5px;height:5px;margin:-2.5px;background:#F5D47A;--d:250ms;}
.m:nth-child(5){--dx:-21.6px;--dy:20.8px;width:4px;height:4px;margin:-2px;background:#E8A825;--d:190ms;}
.m:nth-child(6){--dx:-22.9px;--dy:1.6px;width:5px;height:5px;margin:-2.5px;background:#F5D47A;--d:220ms;}
.m:nth-child(7){--dx:-29.1px;--dy:-21.2px;width:4px;height:4px;margin:-2px;background:#E8A825;--d:250ms;}
.m:nth-child(8){--dx:-7.3px;--dy:-29.1px;width:5px;height:5px;margin:-2.5px;background:#F5D47A;--d:190ms;}
.m:nth-child(9){--dx:10.1px;--dy:-20.7px;width:4px;height:4px;margin:-2px;background:#E8A825;--d:220ms;}
.m:nth-child(10){--dx:32.9px;--dy:-14.6px;width:5px;height:5px;margin:-2.5px;background:#F5D47A;--d:250ms;}
.row.is-fresh .fx .ring,.box-input:checked + .box .fx .ring{animation:hzBurstRing 520ms var(--swift) 180ms forwards;}
.row.is-fresh .fx .m,.box-input:checked + .box .fx .m{animation:hzBurstMote 640ms ease-out var(--d) forwards;}
.words{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.title{position:relative;display:block;font-size:17px;line-height:24px;color:var(--title);transition:color 200ms linear;}
.row.is-edge .title{font-weight:500;}
.row.is-done .title,.box-input:checked ~ .words .title{color:var(--body);font-weight:400;}
.title::before,.title::after{content:attr(data-text);position:absolute;inset:0;color:transparent;-webkit-background-clip:text;background-clip:text;pointer-events:none;opacity:0;}
.title::after{background-image:linear-gradient(100deg,transparent 38%,#F5D47A 47%,#FFFFFF 50%,#F5D47A 53%,transparent 62%);background-size:250% 100%;background-position:-20% 0;}
.row.is-fresh .title::after,.box-input:checked ~ .words .title::after{opacity:1;animation:hzGlintOnce 760ms var(--standard) 200ms both;}
.row.is-arriving .title::after{opacity:1;animation:hzGlintOnce 760ms var(--standard) both;}
.title::before{background-image:linear-gradient(100deg,transparent 38%,var(--lamp-mid) 47%,#F0D28A 50%,var(--lamp-mid) 53%,transparent 62%);background-size:300% 100%;background-position:var(--lamp-pos,100%) 0;}
.row.is-edge .title::before{opacity:var(--lamp-o,0);}
.meta{font-size:13px;line-height:18px;color:var(--meta);}
.again{display:none;margin:-10px 0 0;padding:0 14px 12px 46px;font-size:13px;line-height:18px;color:var(--meta);}
.row-download.is-done .meta{display:none;}
.row-download.is-done .again{display:block;animation:hzFadeIn 160ms linear;}
.fold{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows 200ms var(--swift),opacity 160ms linear;}
.row-code.is-done .fold{grid-template-rows:0fr;opacity:0;}
.fold-in{overflow:hidden;min-height:0;}
.field{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px 46px;}
.field input{height:44px;width:100%;border-radius:10px;border:0;outline:none;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--rule);padding:0 14px;font-size:17px;letter-spacing:1.5px;color:var(--ink);}
.field input:focus{box-shadow:inset 0 0 0 2px var(--focus);}
.refusal{display:none;margin:0;font-size:13px;line-height:18px;color:var(--warn);text-wrap:pretty;}
.row-code.is-refused[data-reason=unknown] .refusal[data-reason=unknown],.row-code.is-refused[data-reason=expired] .refusal[data-reason=expired],
.row-code.is-refused[data-reason=ended] .refusal[data-reason=ended],.row-code.is-refused[data-reason=used] .refusal[data-reason=used],
.row-code.is-refused[data-reason=malformed] .refusal[data-reason=malformed],.row-code.is-refused[data-reason=locked] .refusal[data-reason=locked],
.row-code.is-refused[data-reason=busy] .refusal[data-reason=busy],.row-code.is-refused[data-reason=paused] .refusal[data-reason=paused]{display:block;}
.row-code.is-refused .field input{box-shadow:inset 0 0 0 1.5px var(--warn);}
.row-gated .row-line{cursor:default;}
.closing{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 200ms var(--swift),opacity 160ms linear;}
.closing-in{overflow:hidden;min-height:0;}
.closing-block{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 14px 18px;}
.closing-block span{font-size:15px;line-height:21px;color:var(--meta);}
.sun{display:block;overflow:visible;}
.sun line{--i:0;stroke-dasharray:1;}
.sun line:nth-of-type(2){--i:1;}.sun line:nth-of-type(3){--i:2;}.sun line:nth-of-type(4){--i:3;}.sun line:nth-of-type(5){--i:4;}.sun line:nth-of-type(6){--i:5;}.sun line:nth-of-type(7){--i:6;}.sun line:nth-of-type(8){--i:7;}
.sun g{fill:none;stroke:var(--faint);stroke-width:1.0;stroke-linecap:round;stroke-linejoin:round;}
.list.is-all-done .closing,.list:has(.row-code.is-done):has(.row-download.is-done):has(.row-dmg :checked):has(.row-drag :checked):has(.row-open :checked) .closing{grid-template-rows:1fr;opacity:1;transition-delay:1100ms;}
.list.is-all-done .sun g,.list:has(.row-code.is-done):has(.row-download.is-done):has(.row-dmg :checked):has(.row-drag :checked):has(.row-open :checked) .sun g{animation:hzSunFade 2000ms var(--swift) 3700ms both;}
.list.is-all-done .sun circle,.list:has(.row-code.is-done):has(.row-download.is-done):has(.row-dmg :checked):has(.row-drag :checked):has(.row-open :checked) .sun circle{animation:hzSunRing 600ms var(--swift) 1100ms both;}
.list.is-all-done .sun line,.list:has(.row-code.is-done):has(.row-download.is-done):has(.row-dmg :checked):has(.row-drag :checked):has(.row-open :checked) .sun line{animation:hzSunRay 300ms var(--swift) calc(1700ms + var(--i) * 100ms) both;}
.testflight{margin:0;padding:0 4px;font-size:15px;line-height:21px;color:var(--body);text-align:center;text-wrap:pretty;}
footer{margin-top:auto;border-top:1px solid var(--rule);padding:16px 0 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;line-height:18px;color:var(--meta);}
footer a{text-decoration:none;}
html[data-device=iphone] .phone-card{display:block;}
html[data-device=iphone] .list,html[data-device=iphone] .testflight,html[data-device=iphone] .notice-card{display:none;}
/* SPEC §4 has the server choose the device from the user agent, but the pages are static apart from
 * the one download link, so the script chooses (download.js sets html[data-device]). Without script a
 * touch-only screen stands in: a phone then still gets the card, not a list it can't use. */
@media (hover:none) and (pointer:coarse){html:not([data-device]) .phone-card{display:block;}html:not([data-device]) .list,html:not([data-device]) .testflight,html:not([data-device]) .notice-card{display:none;}}
@media (max-width:600px){.band{padding:44px 24px 96px;}.band img{width:88px;height:88px;}.band h1{font-size:34px;}.band p{font-size:17px;}}
@keyframes hzBurstPop{0%{transform:scale(1);}35%{transform:scale(1.28);}70%{transform:scale(.94);}100%{transform:scale(1);}}
@keyframes hzBurstRing{0%{transform:scale(.6);opacity:.55;}100%{transform:scale(2.6);opacity:0;}}
@keyframes hzBurstMote{0%{transform:translate(0,0) scale(0);opacity:0;}15%{opacity:1;transform:translate(calc(var(--dx) * .25),calc(var(--dy) * .25)) scale(1);}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}}
@keyframes hzGlintOnce{0%{background-position:120% 0;}100%{background-position:-20% 0;}}
@keyframes hzEdgeSettle{0%{transform:scale(.92);}100%{transform:scale(1);}}
@keyframes hzTick{0%{stroke-dashoffset:14;}100%{stroke-dashoffset:0;}}
@keyframes hzFadeIn{0%{opacity:0;}100%{opacity:1;}}
@keyframes hzSunRing{0%{stroke-dashoffset:60;}100%{stroke-dashoffset:0;}}
@keyframes hzSunRay{0%{stroke-dashoffset:1;opacity:0;}1%{opacity:1;}100%{stroke-dashoffset:0;opacity:1;}}
@keyframes hzSunFade{0%{stroke:#E8A825;}100%{stroke:var(--faint);}}
/* Reduce Motion: every discrete transition cuts to its end frame (Shared §3.4); the press scale stays. */
@media (prefers-reduced-motion:reduce){.fx,.title::before,.title::after{display:none !important;}.fill,.fill path,.box,.sun g,.sun circle,.sun line,.again{animation:none !important;}.row,.fold,.closing,.title{transition:none !important;}}