@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}}:root{--ink:#143c52;--sky:#5ce;--blue:#2588e8;--pink:#ff5f86;--yellow:#ffd64a;--mint:#3cc797;--cream:#fffaf0;--paper:#fffef9;--line:#143c522b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:#eaf9ff;margin:0;font-family:Arial Rounded MT Bold,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif}main{background:radial-gradient(circle at 7% 10%,#fff 0 5px,#0000 6px),linear-gradient(145deg,#e7f9ff 0%,#fffdf4 48%,#fff0f6 100%);overflow:hidden}.kicker{color:#087ba7;letter-spacing:.13em;margin:0;font-size:12px;font-weight:1000}.cover{grid-template-columns:.78fr 1.22fr;align-items:center;gap:46px;max-width:1280px;min-height:680px;margin:auto;padding:72px 42px 60px;display:grid}.cover-copy h1{letter-spacing:-.08em;margin:14px 0 25px;font-size:clamp(82px,9vw,142px);line-height:.82}.cover-copy h1 em{color:var(--pink);text-shadow:5px 5px 0 white, 8px 8px 0 var(--ink);font-style:normal}.cover-lead{max-width:440px;font-size:18px;font-weight:800;line-height:1.7}.meta{flex-wrap:wrap;gap:8px;margin-top:25px;display:flex}.meta span{border:2px solid var(--ink);background:#fff;border-radius:99px;padding:8px 12px;font-size:10px;font-weight:900}.cover-image{outline:3px solid var(--ink);background:#fff;border:5px solid #fff;border-radius:34px;margin:0;position:relative;overflow:hidden;transform:rotate(1.3deg);box-shadow:12px 14px #143c5225}.cover-image img{aspect-ratio:3/2;object-fit:cover;width:100%;display:block}.cover-image figcaption{background:var(--yellow);border:2px solid var(--ink);border-radius:99px;padding:8px 12px;font-size:9px;font-weight:1000;position:absolute;bottom:16px;right:16px}.before-start{border:3px solid var(--ink);max-width:1160px;box-shadow:6px 7px 0 var(--ink);background:#fff;border-radius:24px;grid-template-columns:1.1fr .9fr;margin:0 auto 80px;display:grid;overflow:hidden}.before-start>div{flex-wrap:wrap;align-items:center;gap:18px;padding:22px 28px;display:flex}.before-start b{color:#0b769a;font-size:12px}.before-start span{font-size:13px;font-weight:900}.before-start .safety{border-left:3px solid var(--ink);background:#fff1c5;display:block}.before-start .safety b{color:#a95400}.before-start p{margin:6px 0 0;font-size:10px;font-weight:800;line-height:1.6}.steps{max-width:1240px;margin:auto;padding:10px 42px 70px 92px;position:relative}.density-spine{outline:3px solid var(--ink);background:#fff;border:4px solid #fff;border-radius:99px;flex-direction:column;width:28px;display:flex;position:absolute;top:0;bottom:0;left:34px;overflow:hidden}.density-spine i{flex:1}.density-spine i:first-child{background:#e5faff}.density-spine i:nth-child(2){background:#ff6f8f}.density-spine i:nth-child(3){background:#ffd63c}.density-spine i:nth-child(4){background:#41c897}.density-spine i:nth-child(5){background:#429ff4}.step-card{z-index:2;grid-template-columns:minmax(0,1.16fr) minmax(340px,.84fr);align-items:center;gap:42px;margin-bottom:78px;display:grid;position:relative}.step-card.reverse{grid-template-columns:minmax(340px,.84fr) minmax(0,1.16fr)}.step-card.reverse figure{order:2}.step-card.reverse .step-copy{order:1}.step-card figure{border:3px solid var(--ink);background:#fff;border-radius:28px;margin:0;padding:10px;position:relative;box-shadow:8px 9px #143c5225}.step-card figure:before{content:"";background:#fff4b4b5;border:1px solid #b7973b55;width:90px;height:23px;position:absolute;top:-10px;left:50%;transform:translate(-50%)rotate(-2deg)}.step-card figure img{aspect-ratio:3/2;object-fit:cover;border-radius:19px;width:100%;display:block}.step-card figcaption{color:#657b84;justify-content:space-between;align-items:center;padding:10px 8px 2px;font-size:9px;font-weight:900;display:flex}.step-card figcaption span{color:var(--pink);letter-spacing:.12em}.step-copy{padding:8px 0;position:relative}.step-number{color:#d8edf4;letter-spacing:-.08em;z-index:-1;font-size:112px;font-weight:1000;line-height:1;position:absolute;top:-28px;right:0}.role{color:#087ba7;letter-spacing:.12em;margin:0 0 6px;font-size:10px;font-weight:1000}.step-copy h2{letter-spacing:-.035em;margin:0 0 13px;font-size:clamp(28px,3vw,41px);line-height:1.25}.intro{margin:0 0 18px;font-size:13px;font-weight:750;line-height:1.75}.step-copy ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}.step-copy li{padding-left:22px;font-size:11px;font-weight:850;line-height:1.55;position:relative}.step-copy li:before{content:"";background:var(--yellow);border:2px solid var(--ink);border-radius:50%;width:10px;height:10px;position:absolute;top:.5em;left:0}.tip{background:#e9f9ff;border:2px dashed #4ea8c5;border-radius:15px;grid-template-columns:25px 1fr;align-items:center;gap:8px;margin-top:18px;padding:11px 13px;display:grid}.tip span{font-size:18px}.tip p{margin:0;font-size:10px;font-weight:850;line-height:1.55}.science-note{border:4px solid var(--ink);color:#fff;background:#123f55;border-radius:32px;grid-template-columns:120px 1fr;align-items:center;gap:34px;max-width:1100px;margin:0 auto 80px;padding:36px 42px;display:grid;box-shadow:9px 10px #5ce}.science-note .kicker{color:#75dff8}.science-note h2{margin:7px 0 10px;font-size:clamp(27px,4vw,45px);line-height:1.2}.science-note p:last-child{color:#d9edf4;max-width:760px;margin:0;font-size:12px;font-weight:700;line-height:1.8}.mini-straw{border:5px solid #fff;border-radius:25px 25px 10px 10px;outline:3px solid #072838;flex-direction:column;width:70px;height:270px;margin:auto;display:flex;overflow:hidden;box-shadow:inset 10px 0 #fff6}.mini-straw i{flex:1}.mini-straw i:first-child{background:#e5faff}.mini-straw i:nth-child(2){background:#ff6f8f}.mini-straw i:nth-child(3){background:#ffd63c}.mini-straw i:nth-child(4){background:#41c897}.mini-straw i:nth-child(5){background:#429ff4}.troubleshoot{max-width:1100px;margin:0 auto 100px}.troubleshoot>h2{text-align:center;margin:0 0 22px;font-size:28px}.troubleshoot>div{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.troubleshoot article{border:3px solid var(--ink);box-shadow:4px 5px 0 var(--ink);background:#fff;border-radius:20px;padding:20px}.troubleshoot b{color:var(--pink);font-size:13px}.troubleshoot p{margin:7px 0 0;font-size:10px;font-weight:750;line-height:1.7}footer{border-top:3px solid var(--ink);background:#fff;justify-content:space-between;align-items:center;gap:20px;padding:26px max(25px,50vw - 550px);display:flex}.footer,footer div{gap:3px;display:grid}footer b{font-size:12px}footer span,footer a{color:#637b84;font-size:9px;font-weight:800}footer a{text-underline-offset:3px}@media (width<=900px){.cover{text-align:center;grid-template-columns:1fr;padding-top:50px}.cover-lead{margin-left:auto;margin-right:auto}.meta{justify-content:center}.cover-image{max-width:760px;margin:auto}.before-start{grid-template-columns:1fr;margin-left:22px;margin-right:22px}.before-start .safety{border-left:0;border-top:3px solid var(--ink)}.steps{padding-left:28px;padding-right:28px}.density-spine{display:none}.step-card,.step-card.reverse{grid-template-columns:1fr;gap:24px}.step-card.reverse figure,.step-card.reverse .step-copy{order:initial}.step-copy{max-width:760px}.science-note,.troubleshoot{margin-left:22px;margin-right:22px}}@media (width<=620px){.cover{gap:32px;min-height:0;padding:40px 16px 45px}.cover-copy h1{font-size:74px}.cover-lead{font-size:14px}.cover-image{border-radius:23px}.cover-image figcaption{font-size:7px;bottom:8px;right:8px}.before-start{margin:0 14px 55px}.before-start>div{gap:11px;padding:18px}.before-start b{width:100%}.steps{padding:0 14px 45px}.step-card{margin-bottom:55px}.step-card figure{border-radius:21px;padding:7px}.step-card figure img{border-radius:14px}.step-card figcaption{font-size:7px}.step-number{font-size:85px;top:-14px}.step-copy h2{max-width:90%;font-size:29px}.intro{font-size:12px}.step-copy li{font-size:10px}.science-note{grid-template-columns:65px 1fr;gap:18px;margin:0 14px 60px;padding:26px 20px}.mini-straw{width:45px;height:210px}.science-note h2{font-size:25px}.science-note p:last-child{font-size:10px}.troubleshoot{margin:0 14px 70px}.troubleshoot>h2{font-size:23px}.troubleshoot>div{grid-template-columns:1fr}footer{text-align:center;justify-content:center;display:grid}}@media print{body,main{background:#fff}.cover{page-break-after:always;min-height:0;padding-top:20px}.before-start{box-shadow:none}.density-spine{display:none}.steps{padding:0}.step-card,.step-card.reverse{page-break-inside:avoid;page-break-after:always;grid-template-columns:1.12fr .88fr;gap:24px;margin:0;padding:20px 0}.step-card.reverse figure{order:2}.step-card.reverse .step-copy{order:1}.step-card figure{box-shadow:none}.science-note{page-break-inside:avoid;box-shadow:none}footer{display:none}}
