@font-face{font-family:Selawik;src:url(../fonts/selawik-light.woff2)format("woff2");font-weight:300;font-display:swap}@font-face{font-family:Selawik;src:url(../fonts/selawik-regular.woff2)format("woff2");font-weight:400;font-display:swap}:root{--phone-accent-brush:#5f5;--phone-foreground-brush:#fff;--phone-background-brush:#000;--phone-subtle-brush:#8a8a8a;--phone-chrome-brush:#1a1a1a;--phone-font-family-semi-light:"Selawik", "Noto Sans TC", sans-serif;--phone-font-family-normal:"Noto Sans TC", sans-serif;--title-size:calc(clamp(96px, 20vh, 200px));--ease:cubic-bezier(.1, .9, .2, 1)}body,html{background:var(--phone-background-brush);height:100%;color:var(--phone-foreground-brush);overscroll-behavior:none;margin:0}body{font-family:var(--phone-font-family-semi-light);-webkit-tap-highlight-color:transparent;font-weight:300}a{color:inherit;text-decoration:none}img{-webkit-user-drag:none}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.backdrop{pointer-events:none;position:fixed;inset:0;overflow:hidden}.backdrop-layer{will-change:transform;background-image:linear-gradient(#151515 1px,#0000 0),linear-gradient(90deg,#151515 1px,#0000 0);background-size:48px 48px;position:absolute;top:0;bottom:0;left:0}.bg-mark{width:11px;height:11px;position:absolute}.bg-mark:after,.bg-mark:before{content:"";background:#55ff5540;position:absolute}.bg-mark:before{width:1px;height:11px;top:0;left:5px}.bg-mark:after{width:11px;height:1px;top:5px;left:0}.bg-label{white-space:nowrap;color:#fff3;font:400 10px/1 ui-monospace,Menlo,monospace;position:absolute}.bg-tile{width:180px;height:180px;transition:transform .8s var(--ease);position:absolute}.bg-tile.bg-wide{width:372px}.bg-face{background:#0d0d0d;position:absolute;inset:0}.bg-face:after{content:"";width:var(--label,40px);background:#1d1d1d;height:2px;position:absolute;bottom:12px;left:12px}.bg-back,.bg-back:after{display:none}.bg-avatar{-o-object-fit:cover;object-fit:cover;filter:saturate(.5);opacity:.28;width:100%;height:100%;position:absolute;top:0;left:0}.bg-live{transform-style:preserve-3d;transform:perspective(900px)rotateX(0)}.bg-live .bg-face{-webkit-backface-visibility:hidden;backface-visibility:hidden}.bg-live .bg-back{display:block;transform:rotateX(180deg)}.bg-live.bg-flipped{transform:perspective(900px)rotateX(180deg)}.bg-enter{animation:bg-turn-in .6s var(--ease) calc(var(--k) * 40ms) both;transform-origin:0}@keyframes bg-turn-in{0%{opacity:0;transform:perspective(900px)rotateY(-80deg)}to{opacity:1;transform:perspective(900px)rotateY(0)}}@media (prefers-reduced-motion:reduce){.bg-tile{transition:none}}html:not(.js) .backdrop{display:none}.icon-month{background:var(--phone-accent-brush);color:#000;flex-direction:column;justify-content:center;align-items:center;line-height:1;display:flex}.icon-month b{font-size:22px;font-weight:400}.icon-month small{font-size:10px;font-weight:400}.icon-month .icon-month-abbr{font-size:24px}.icon-month-abbr span{font-size:14px}.item{--media-w:min(var(--cw), var(--media-max,600px));--img-h:calc(var(--media-w) / 1.905);--row-b:64px;--row-f:calc(96px + var(--img-h));--pi:0;--thumb-w:calc(48px + (-48px + var(--media-w)) * var(--pi));--thumb-h:calc(48px + (-48px + var(--img-h)) * var(--pi));--t-drop-q:clamp(0, var(--pi) / .15, 1);--t-drop:calc(var(--t-drop-q) * var(--t-drop-q) * (3 - 2 * var(--t-drop-q)));--t-left:calc(var(--pi) * var(--pi) * (3 - 2 * var(--pi)));--t-x:calc(60px * (1 - var(--t-left)));--t-y:calc(9px * (1 - var(--t-drop)) + (10px + var(--thumb-h)) * var(--t-drop));--ox:calc(var(--ix) * var(--media-w));--oy:calc(var(--iy) * var(--img-h));--sc:calc(var(--s0) + (1 - var(--s0)) * var(--pi));height:max(var(--row-b) + (var(--row-f) - var(--row-b)) * var(--pi),6px + var(--t-y) + 1.25 * (22px + 4px * var(--pi)));display:block;position:relative}.item:focus-visible{outline:2px solid var(--phone-accent-brush);outline-offset:4px}.thumb{background:var(--phone-chrome-brush);transform-origin:50%;width:var(--thumb-w);height:var(--thumb-h);top:0;left:0;overflow:hidden}.i-sub,.i-title,.thumb,.thumb>*{position:absolute}.thumb>*{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;inset:0}.thumb .big{width:var(--media-w);height:var(--img-h);transform-origin:var(--ox) var(--oy);transform:translate(calc((-1 + var(--pi)) * var(--ox)),calc((-1 + var(--pi)) * var(--oy))) scale(var(--sc));opacity:clamp(0,var(--pi) / .2,1);inset:0 auto auto 0}.thumb .icon{transform-origin:0 0;width:48px;height:48px;transform:translate(calc(var(--pi) * var(--ox)),calc(var(--pi) * var(--oy))) scale(calc(var(--sc) / var(--s0)));opacity:clamp(0,2.5 * (.5 - var(--pi)),1);inset:0 auto auto 0}.icon-text{color:#4a2c17;background:#f3e7d6;justify-content:center;align-items:center;font-size:18px;font-weight:400;display:flex}.i-title{white-space:nowrap;text-overflow:ellipsis;transform:translate(var(--t-x),var(--t-y));width:max(0px,-28px + var(--w) - var(--t-x));font-weight:300;line-height:1.25;font-size:calc(22px + 4px * var(--pi));top:0;overflow:hidden}.i-sub,.i-title{font-family:var(--phone-font-family-normal);left:0}.i-sub{top:calc(48px + var(--img-h));width:var(--media-w);pointer-events:none;color:var(--phone-subtle-brush);opacity:calc(-1 + var(--pi) * 2);font-size:14px;font-weight:400;line-height:1.5}html:not(.js) .item{height:auto;min-height:48px;padding:8px 0 8px 60px}html:not(.js) .thumb{width:48px;height:48px;top:8px}html:not(.js) .thumb .big{display:none}html:not(.js) .thumb .icon{opacity:1;transform:none}html:not(.js) .i-title{white-space:normal;width:auto;position:static;transform:none}html:not(.js) .i-sub{opacity:1;width:auto;position:static}.item-static .i-sub{width:max(0px,-88px + var(--w));opacity:1;white-space:nowrap;text-overflow:ellipsis;top:36px;left:60px;overflow:hidden}html:not(.js) .item-static .i-sub{white-space:normal}.list{width:var(--cw)}.col{--p:0;will-change:transform;box-sizing:border-box;flex-direction:column;min-height:0;padding-right:28px;display:flex;position:absolute;top:0;bottom:0;left:0}.col-header{margin:0}.col-head{all:unset;cursor:pointer;font-family:var(--phone-font-family-normal);white-space:nowrap;color:color-mix(in srgb,var(--phone-foreground-brush) calc(var(--p) * 100%),#7a7a7a);align-self:flex-start;margin:0 0 18px;font-size:44px;font-weight:300;line-height:1.1}.col-head:focus-visible{outline:2px solid var(--phone-accent-brush);outline-offset:4px}.col-body{--bleed-left:24px;--bleed-top:18px;--bleed-right:28px;overscroll-behavior:contain;scrollbar-width:none;min-height:0;margin:calc(-1 * var(--bleed-top)) calc(-1 * var(--bleed-right)) 0 calc(-1 * var(--bleed-left));padding:var(--bleed-top) var(--bleed-right) calc(24px + env(safe-area-inset-bottom)) var(--bleed-left);flex:auto;overflow:hidden auto}.col-body::-webkit-scrollbar{display:none}.col-inner{min-height:calc(100% + 1px)}html:not(.js) .col{will-change:auto;max-width:600px;padding:0 24px 40px;display:block;position:static}html:not(.js) .col-head{cursor:default;color:var(--phone-foreground-brush);margin-bottom:12px}html:not(.js) .col-body{margin:0;padding:0;overflow:visible}html:not(.js) .col-inner{min-height:0}.long-list-group,.long-list-items{transition:transform var(--enter-ms) var(--ease) var(--enter-delay)}.long-list-group+.long-list-group{margin-top:8px}.js .col:not(.open) .long-list-group{transform:translateY(calc(var(--g) * var(--header-shrink,0px) * -1))}.js .col:not(.open) .long-list-items{transform:translateY(calc(var(--header-shrink,0px) * -1))}.shell{height:100vh;height:100dvh;position:fixed;top:0;left:0;right:0;overflow:hidden}.pano-title{top:calc(-.14em + env(safe-area-inset-top));font-size:var(--title-size);font-weight:inherit;letter-spacing:-.02em;white-space:nowrap;will-change:transform;pointer-events:none;margin:0;line-height:1;position:absolute;left:14px}.pano-title span{color:var(--phone-accent-brush)}.pano{top:calc(env(safe-area-inset-top) + var(--title-size) * .9);touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:none;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.pano:focus-visible{outline:2px solid var(--phone-accent-brush);outline-offset:-2px}.track{height:100%;position:relative}.js .pano:not([data-ready]){visibility:hidden}html:not(.js) .shell{height:auto;position:static;overflow:visible}html:not(.js) .pano-title{font-size:min(var(--title-size),18vw);will-change:auto;padding:0 0 16px 18px;position:static}html:not(.js) .pano{touch-action:auto;-webkit-user-select:auto;user-select:auto;position:static;overflow:visible}html:not(.js) .track{height:auto}.share-col .long-list{--header-shrink:82px}.year-tile{width:130px;height:130px;font:inherit;color:#000;margin:0 0 16px;position:relative}.year-tile:before{content:"";background:var(--phone-accent-brush);width:130px;height:130px;top:0;left:0}.year-tile b,.year-tile:before{transform-origin:0 0;position:absolute}.year-tile b{font-size:36px;font-weight:300;line-height:1;top:4px;left:10px}.year-tile span{transform-origin:-10px -106px;font-family:var(--phone-font-family-normal);font-size:12px;font-weight:400;line-height:16px;position:absolute;top:106px;left:10px}.year-tile b,.year-tile span,.year-tile:before{transition:transform var(--enter-ms) var(--ease) var(--enter-delay),opacity var(--enter-ms) var(--ease) var(--enter-delay),color var(--enter-ms) var(--ease) var(--enter-delay)}.js .col:not(.open) .year-tile:before{transform:scale(.369231)}.js .col:not(.open) .year-tile b{color:var(--phone-foreground-brush);transform:translate(50px,7.75px)scale(.611111)}.js .col:not(.open) .year-tile span{opacity:0;transform:scale(.369231)}.share-col .icon-month{background:var(--phone-chrome-brush);color:var(--phone-accent-brush)}.about-head{height:130px;margin:0 0 16px;position:relative}.about-avatar{-o-object-fit:cover;object-fit:cover;background:var(--phone-chrome-brush);width:130px;height:130px;left:0}.about-avatar,.about-punchline{transform-origin:0 0;position:absolute;top:0}.about-punchline{white-space:nowrap;font-family:var(--phone-font-family-normal);margin:0;left:142px}.about-punchline span{display:block}.about-punchline span:first-child{font-size:26px;font-weight:300;line-height:1.25}.about-avatar,.about-head+.list,.about-punchline{transition:transform var(--enter-ms) var(--ease) var(--enter-delay)}.about-punchline span:last-child{color:var(--phone-subtle-brush);transition:opacity var(--enter-ms) var(--ease) var(--enter-delay),visibility 0s;font-size:14px;font-weight:400;line-height:1.5}.js .col:not(.open) .about-avatar{transform:scale(.369231)}.js .col:not(.open) .about-punchline{transform:translate(-82px,9px)scale(.846154)}.js .col:not(.open) .about-head+.list{transform:translateY(-82px)}.js .col:not(.open) .about-punchline span:last-child{opacity:0;visibility:hidden;transition:opacity calc(var(--enter-delay) * .8) linear,visibility 0s linear var(--enter-delay)}