@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600&family=Barlow+Condensed:wght@500;600&family=IBM+Plex+Mono:wght@400&display=swap');
:root{color-scheme:dark;--cream:#eee9df;--navy:#203a4c;--orange:#e37c2c;--serif:'Noto Serif TC',serif;--mono:'IBM Plex Mono',monospace}*{box-sizing:border-box}body{margin:0;background:#11191f;color:var(--cream);font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,#334b5e55,transparent 68%);z-index:-1}button,input,textarea{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #eaa96d;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}.top{height:84px;padding:0 6%;position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;z-index:20}.logo-button{background:none;border:0;padding:8px 0}.logo-button img{display:block;width:134px;height:36px;object-fit:contain}.language{border:0;background:none;color:#e4e1d9;font-size:11px;padding:12px}.language span{color:#86939d}.cover{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:112px 22px 98px;overflow:hidden;position:relative}.cover-inner{text-align:center;width:min(460px,100%)}.eyebrow{font:8px var(--mono);letter-spacing:3px;color:#9ca8af;margin:0 0 61px}.envelope-scene{perspective:1300px;position:relative;padding:0 10px}.envelope{aspect-ratio:1.48;position:relative;width:100%;isolation:isolate;touch-action:none;user-select:none;transform:rotate(-3deg);transition:transform .25s,opacity .5s;filter:drop-shadow(0 20px 24px #0007)}.back-panel{position:absolute;inset:0;background:#142c3d;border:1px solid #62809566}.inner-letter{position:absolute;inset:7% 6% 3%;padding:20px;background:var(--cream);color:#2f424e;text-align:left;transform:translateY(calc(var(--pull)*-32%));transition:transform .35s;z-index:2}.inner-letter>span{font:10px var(--mono);letter-spacing:2px}.inner-letter>p{font:600 38px/.98 'Barlow Condensed',sans-serif;letter-spacing:-.5px;margin:20px 0 14px}.inner-letter>small{font:7px var(--mono);letter-spacing:1px}.flap{position:absolute;inset:0;background-color:#345268;background-image:linear-gradient(#a9c5d715 1px,transparent 1px),linear-gradient(90deg,#a9c5d715 1px,transparent 1px),linear-gradient(135deg,#3c5d74,#223f53);background-size:18px 18px,18px 18px,auto;clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;transform:rotateX(calc(var(--pull)*180deg));transition:transform .35s;z-index:7}.fold-left,.fold-right,.pocket{position:absolute;inset:0;z-index:4}.fold-left{background:linear-gradient(115deg,#2a485e,#1b3447);clip-path:polygon(0 0,55% 55%,0 100%)}.fold-right{background:linear-gradient(-115deg,#304e63,#1a3345);clip-path:polygon(100% 0,45% 55%,100% 100%)}.pocket{clip-path:polygon(0 100%,50% 43%,100% 100%);background-color:#27475d;background-image:linear-gradient(#a9c5d709 1px,transparent 1px),linear-gradient(90deg,#a9c5d709 1px,transparent 1px),linear-gradient(#34556b,#213e52);background-size:18px 18px,18px 18px,auto}.seal{position:absolute;z-index:8;left:calc(50% - 29px);top:calc(46% - 16px);width:58px;height:58px;border-radius:50%;border:1px solid #f5ecda99;background:conic-gradient(from 35deg,#87949a,#ecebe3,#a3afb4,#566b79,#d3d7d5,#8a999f,#dae0de);box-shadow:0 4px 7px #0008,inset 0 0 0 4px #dce1df66;color:#263c4c;opacity:calc(1 - var(--pull)*2.5);transform:translateY(calc(var(--pull)*-25px));transition:opacity .2s,transform .3s}.seal>span{font:bold italic 30px Georgia}.recipient{position:absolute;left:12%;right:12%;bottom:15%;text-align:left;z-index:5;transform:translateY(calc(var(--pull)*2px))}.recipient>span{display:block;font:7px var(--mono);color:#a2b5c1;margin-bottom:10px;letter-spacing:1px}.recipient strong{display:block;font:400 16px var(--serif);color:#e8e8e0;letter-spacing:2px}.dwg{position:absolute;right:6%;bottom:5%;z-index:5;font:6px var(--mono);color:#93aab8;letter-spacing:1px}.blueprint{position:absolute;z-index:8;left:8%;top:7%;width:24%;color:#b2c8d5;opacity:calc(.35 - var(--pull));pointer-events:none}.open-hint{margin:37px 0 0;background:none;border:0;display:inline-flex;align-items:center;gap:12px;color:#d7c8b2;padding:14px 20px;font-size:12px;letter-spacing:1px}.arrow{font-size:22px;animation:breathe 2.5s ease-in-out infinite}.tap-hint{font-size:10px;color:#7e8f9b;margin:2px 0 0;letter-spacing:1px}.cover-date{position:absolute;bottom:30px;left:6%;right:6%;display:flex;justify-content:space-between;font:7px var(--mono);letter-spacing:1px;color:#8294a2}.dragging .inner-letter,.dragging .flap,.dragging .seal{transition:none}.flap-behind .flap{z-index:1}.opening .envelope{animation:envelope-away .7s .4s forwards}.opening .inner-letter{transform:translateY(-65%)}.opening .flap{transition:transform .6s}.opening .open-hint,.opening .tap-hint{opacity:0;transition:opacity .2s}.cover[hidden],.paper-area[hidden],article[hidden],[hidden]{display:none!important}.paper-area{padding:102px 18px 30px;min-height:100svh}.paper{max-width:460px;margin:0 auto;padding:31px 30px 22px;background:var(--cream);color:#263d4c;box-shadow:0 20px 65px #0004;animation:paper-in .65s cubic-bezier(.2,.7,.2,1);transform-origin:50% 30%;color-scheme:light}.paper-top{display:flex;justify-content:space-between;font:7px var(--mono);letter-spacing:1px;color:#7f8b92;padding-bottom:20px;border-bottom:1px solid #26435524}.date-label{font:8px var(--mono);letter-spacing:2px;color:#9a784f;margin:29px 0 16px}h1{font:500 29px/1.6 var(--serif);margin:0 0 26px;letter-spacing:1px}.dear{font:12px var(--serif);margin:0 0 16px}.message{font:13px/2 var(--serif);color:#68747a;margin:0 0 23px}.teaser{height:105px;overflow:hidden;position:relative;background:#050708}.teaser>img{width:100%;height:100%;object-fit:cover;object-position:70% 48%;opacity:.7}.teaser>span{position:absolute;left:13px;bottom:12px;font:6px var(--mono);color:#a2abad;letter-spacing:1px}.event{display:flex;gap:16px;border-bottom:1px solid #26435524;padding-bottom:20px;margin:23px 0 18px}.event>div{flex:1}.event dt{font-size:10px;color:#8b9294;margin-bottom:9px}.event dd{margin:0;font:9px/1.8 var(--mono)}.event dd span{font-size:9px;color:#8b9294}.signature{font:13px var(--serif);margin:20px 0}.signature>span{display:block;font:6px var(--mono);letter-spacing:1.3px;margin-top:9px;color:#81909a}.primary{background:#28465d;border:0;color:#faf7ed;width:100%;min-height:49px;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.4px}.primary:hover{background:#355c76}.ticket-note{font-size:9px;line-height:1.8;color:#8a9394;margin:13px 0 0}.ticket-note a{color:#6c7f89;text-decoration:none}.reopen{display:block;margin:20px auto 0;border:0;background:none;color:#8395a0;font-size:10px;padding:12px;letter-spacing:1px}.back{border:0;background:none;color:#7c8c96;padding:4px 0;font-size:10px}.paper h2{font:500 28px/1.5 var(--serif);margin:15px 0 27px}form>label,details>label{display:block;font-size:12px;margin:20px 0 9px}label>span:only-child{color:inherit}form>label span{font-size:10px;color:#90999c;margin-left:8px}input:not([type=radio]),textarea{display:block;width:100%;padding:12px 10px;border:1px solid #b5bdbf;border-radius:0;color:#29404d;background:#f7f4ed;font-size:16px}input:focus,textarea:focus{outline:2px solid #6d8aa0;outline-offset:2px}fieldset{border:0;padding:0;margin:25px 0 20px}legend{font-size:12px;margin-bottom:12px}.choice{display:flex;gap:10px;align-items:center;border:1px solid #b5bdbf;padding:14px 12px;margin:10px 0;cursor:pointer;font-size:12px}.choice:has(input:checked){border-color:#345f7a;background:#355a7510}.choice>input{accent-color:#294b64;width:16px;height:16px}.choice i{margin-left:auto;font-style:normal;color:#83939c}details{border-top:1px solid #26435524;padding-top:17px;margin-bottom:23px}summary{font-size:11px;color:#7c8a91;cursor:pointer;line-height:1.7}details textarea{margin-bottom:10px}.privacy{font-size:10px;line-height:1.9;color:#8a969c;margin:22px 0 15px}.honey{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}#error{font-size:12px;color:#9b4435;line-height:1.8}#thanks{text-align:center;padding:12px 0 30px}.thank-symbol{font-size:40px;color:#997c57;margin:35px 0 23px}#thanks>h2{font-size:24px}#thanks-copy{font:14px/2 var(--serif);color:#6a7a84}#receipt{font:8px var(--mono);color:#89969e;margin:24px 0}#edit{margin-top:12px}.turning{animation:turn .28s ease-in forwards}.turned{animation:turned .32s ease-out}body[data-stage=cover]{overflow:hidden}html[lang=en] h1{font:500 36px/1.15 'Barlow Condensed',sans-serif;letter-spacing:0}html[lang=en] .message{font:13px/1.9 Arial,sans-serif}html[lang=en] h2{font:500 34px/1.2 'Barlow Condensed',sans-serif}html[lang=en] .recipient strong{font:14px Arial,sans-serif;letter-spacing:.4px}
@keyframes breathe{50%{transform:translateY(-6px)}}@keyframes envelope-away{to{transform:translateY(110px) scale(.9);opacity:0}}@keyframes paper-in{from{opacity:0;transform:translateY(35px) scale(.96)}to{opacity:1;transform:none}}@keyframes turn{to{opacity:0;transform:perspective(1200px) rotateY(30deg)}}@keyframes turned{from{opacity:0;transform:perspective(1200px) rotateY(-20deg)}to{opacity:1;transform:none}}
@media(min-width:700px){.paper-area{padding-top:110px;padding-bottom:40px}.cover-inner{transform:translateY(12px)}.recipient strong{font-size:19px}.top{padding:0 5%;height:93px}.logo-button img{width:152px}.cover-date{left:5%;right:5%;bottom:35px}}@media(max-width:390px){.eyebrow{margin-bottom:49px;letter-spacing:2.5px}.inner-letter>p{font-size:29px}.recipient strong{font-size:14px}.paper{padding:26px 23px 20px}h1{font-size:27px}.event dd{font-size:8px}.message{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.opening .envelope{opacity:0}}

@media(max-height:660px){.cover{padding-top:94px;padding-bottom:70px}.cover-inner{max-width:310px}.eyebrow{margin-bottom:31px}.open-hint{margin-top:22px}.cover-date{bottom:20px}.top{height:70px}}

/* Shark study: fluid surfaces, silver light, graphite */
:root{color-scheme:light;--cream:#eff2ef;--navy:#263b41;--orange:#7d9294}
body{background:#dce3e1 url('/shark-surface.png') center/cover fixed no-repeat;color:#263a40}
body:before{background:linear-gradient(100deg,#e8edeb55,#d8e1df12);z-index:-1}
.language{color:#263c42}.language span{color:#7d9094}.eyebrow{color:#657e83;letter-spacing:2.8px}
.cover:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#eff3ef33,transparent 38%,#d8e2e033);pointer-events:none;z-index:-1}
.cover-inner{isolation:isolate}
.envelope{filter:drop-shadow(0 20px 24px #233f4438);transform:rotate(-2deg)}
.back-panel{background:#263b40;border-color:#79939766}
.inner-letter{background:#eff2ef;color:#334b51}.inner-letter>span{color:#7d9296}.inner-letter>p{font-size:34px;line-height:1.05;letter-spacing:.2px}
.flap{background-color:#6a8084;background-image:url('/shark-surface.png');background-size:cover;background-position:65% 50%;background-blend-mode:multiply}
.fold-left{background:linear-gradient(118deg,#435c62,#2d464d)}
.fold-right{background:linear-gradient(-115deg,#3b555b,#2b4249)}
.pocket{background-color:#536b70;background-image:url('/shark-surface.png');background-size:cover;background-position:70% 55%;background-blend-mode:multiply}
.seal{width:52px;height:62px;left:calc(50% - 26px);top:calc(46% - 15px);border:0;border-radius:0;clip-path:polygon(10% 10%,26% 15%,50% 10%,74% 15%,90% 10%,84% 36%,50% 94%,16% 36%);background:linear-gradient(125deg,#cad4d1,#f2f4ef 33%,#9eb1b2 72%,#dbe2de);box-shadow:none;filter:drop-shadow(0 3px 2px #132b3255);color:#3d565d}
.seal>span{display:inline-block;font-size:20px;transform:translateY(-8px);opacity:.7}
.recipient{bottom:14%}.recipient>span{color:#b5c7c8;font-size:6px;letter-spacing:2px}.recipient strong{color:#eaf0eb;font-weight:400;letter-spacing:1.8px}
.dwg{display:none}.gill-mark{position:absolute;right:9%;top:14%;width:43px;height:50px;z-index:6;color:#c0cfce;opacity:calc(.26 - var(--pull)*.4);pointer-events:none}
.open-hint{color:#3e565d;font-size:12px}.tap-hint{color:#788d92}.cover-date{color:#637d83}
.paper{background:#f0f3ef;color:#263c43;box-shadow:0 20px 65px #2e505130}
.paper-top{color:#809496;border-color:#5d787c26}.date-label{color:#739096}.dear{color:#4b6268}.message{color:#6a7f83}
.teaser{height:115px;background:#c7d1cf}.teaser>img{opacity:1;object-position:90% 60%}.teaser>span{color:#4f696f;font-size:6px;letter-spacing:1.4px}
.event{border-color:#5d787c26}.event dt,.event dd span{color:#7b9499}.signature>span{color:#849b9e}
.primary{background:#314d55;color:#f1f5ef}.primary:hover{background:#3e6069}.ticket-note{color:#84989b}.ticket-note a{color:#68898f}
.reopen{color:#5d787e}.back{color:#6c878e}.choice{border-color:#bccacb}.choice:has(input:checked){border-color:#557981;background:#698e9510}.choice i{color:#8ba1a4}
input:not([type=radio]),textarea{background:#f7f9f4;border-color:#b8c9cb;color:#29434a}input:focus,textarea:focus{outline-color:#7a9ea3}
input[type=radio]{accent-color:#486a73}summary{color:#6c888e}details{border-color:#557b8326}.privacy{color:#84999c}.thank-symbol{color:#78979c}#thanks-copy{color:#667f86}#receipt{color:#879fa4}
@media(max-width:700px){body{background-position:63% center}.inner-letter>p{font-size:28px}.gill-mark{width:34px;height:43px;top:16%}.seal{width:48px;height:58px;left:calc(50% - 24px)}}

.cover-date{color:#49616a}.eyebrow{color:#526b73}.tap-hint{color:#536d76}.reopen{color:#4e6972}
.message{color:#4b626a}.date-label{color:#526f77}.event dt,.event dd span{color:#5a737b}.event dd{font-size:10px}.event dd span{font-size:10px}.privacy,.ticket-note{color:#607c84}.paper-top{color:#648089}

/* Page one material study */
body[data-design="page-one"]{background:rgb(34,24,20);color-scheme:dark;overflow:hidden}
body[data-design="page-one"]:before,body[data-design="page-one"] .cover:after{display:none!important}
body[data-design="page-one"] .top{display:none!important}
body[data-design="page-one"] .cover{min-height:100svh;height:100svh;padding:42px 24px;overflow:hidden;display:flex;align-items:center;justify-content:center}
body[data-design="page-one"] .cover-inner{--slot-w:min(64vw,270px);position:relative;width:var(--slot-w);max-width:none;height:calc(var(--slot-w)*1.37 + 62px);transform:none;isolation:isolate}
body[data-design="page-one"] .envelope-scene{position:absolute;left:0;right:0;top:62px;padding:0;margin:0;perspective:none;height:calc(var(--slot-w)*1.37)}
body[data-design="page-one"] .envelope{width:100%;height:100%;aspect-ratio:auto;transform:none;filter:none;isolation:isolate;touch-action:auto;transition:none}
body[data-design="page-one"] .back-panel{inset:-14px 0 0;background:rgb(61,69,66);border:0;border-radius:1px;clip-path:polygon(0 14px,7px 0,calc(100% - 7px) 0,100% 14px,100% 100%,0 100%);box-shadow:0 14px 30px #0005}
body[data-design="page-one"] .pocket{inset:0;clip-path:none;background:rgb(61,69,66);border:0;border-radius:0;box-shadow:0 -1px 0 #8c948c30,1px 1px 1px #151b1680,0 15px 28px #0004;z-index:5;pointer-events:none}
body[data-design="page-one"] .pocket:before,body[data-design="page-one"] .back-panel:before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23f)' opacity='.9' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:140px 140px;opacity:.17;mix-blend-mode:soft-light;pointer-events:none}
body[data-design="page-one"] .pocket:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#ffffff02,transparent 35%,#00000005),linear-gradient(0deg,#0000000a,transparent 45%);pointer-events:none}
body[data-design="page-one"] .inner-letter{display:block;appearance:none;position:absolute;left:8px;right:8px;bottom:9px;top:auto;width:calc(100% - 16px);height:calc(100% + 53px);margin:0;padding:0;border:1px solid #cad0c788;border-radius:4px 4px 2px 2px;z-index:2;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:translateY(calc(var(--lift,0px)*-1));transition:transform .36s cubic-bezier(.2,.75,.2,1);box-shadow:0 1px 2px #ffffff50 inset,0 2px 8px #0005;background-color:#aab0aa;background-image:repeating-linear-gradient(90deg,#ffffff40 0px,#ffffff10 .7px,#35403944 1.1px,#ffffff05 1.7px,#ffffff30 2.4px,#4e58534d 3px,#ffffff20 3.6px,#ffffff10 4.2px),repeating-linear-gradient(90deg,#e6eae550 0px,#a0aaa200 3px,#3b453b30 5px,#f5f7ef50 8px,#727b730d 11px),linear-gradient(90deg,#858e88 0%,#c3cac0 13%,#9ea89f 26%,#e1e6da 43%,#aeb8aa 58%,#ced5c7 76%,#879289 100%);background-size:auto;filter:none;overflow:hidden}
body[data-design="page-one"] .inner-letter:before{content:'';position:absolute;inset:0;background:linear-gradient(112deg,transparent 15%,#ffffff1a 40%,transparent 70%);pointer-events:none}
body[data-design="page-one"] .inner-letter:focus-visible{outline:1px solid #d7dfd1;outline-offset:4px}
body[data-design="page-one"] .dragging .inner-letter{transition:none;cursor:grabbing}
body[data-design="page-one"] .pocket,body[data-design="page-one"] .back-panel{transition:transform .86s cubic-bezier(.3,.05,.25,1),opacity .65s .12s}
body[data-design="page-one"] .extracting .pocket,body[data-design="page-one"] .extracted .pocket,body[data-design="page-one"] .extracting .back-panel,body[data-design="page-one"] .extracted .back-panel{transform:translateY(calc(100% + 110px));opacity:0}
body[data-design="page-one"] .extracting .inner-letter{transition:transform .86s cubic-bezier(.3,.05,.25,1)}
body[data-design="page-one"] .extracted .inner-letter{box-shadow:0 1px 2px #ffffff60 inset,0 14px 38px #0005;cursor:grab}
@media(max-height:650px){body[data-design="page-one"] .cover-inner{--slot-w:min(58vw,calc((100svh - 140px)/1.37),245px)}}


body[data-design="page-one"] .pocket{pointer-events:auto}
body[data-design="page-one"] .pocket:before,body[data-design="page-one"] .back-panel:before{opacity:.42;background-size:180px 180px;mix-blend-mode:soft-light}
body[data-design="page-one"] .inner-letter{background-color:#aeb1af;background-image:repeating-linear-gradient(90deg,#ffffff38 0px,#ffffff10 .7px,#30353440 1.1px,#ffffff05 1.7px,#ffffff28 2.4px,#484c4a40 3px,#ffffff18 3.6px,#ffffff10 4.2px),repeating-linear-gradient(90deg,#e6e8e650 0px,#a5a8a500 3px,#3b403b30 5px,#f5f6f250 8px,#7277730d 11px),linear-gradient(90deg,#878c89 0%,#c7ccc6 13%,#a2a7a3 26%,#e5e7df 43%,#b4b9b0 58%,#d4d8cf 76%,#8b928b 100%)}