@font-face{font-family:Hyeja;src:url('../public/downloads/gs-hyejaroun/GSHYEJAROUNTTF-Bold.ttf') format('truetype');font-display:swap}
@font-face{font-family:PlayBold;src:url('../public/fonts/demo/BlackHanSans-Regular.ttf') format('truetype');font-display:swap}
:root{--section-width:87.6%;--site-font:Hyeja,PlayBold,sans-serif;--sky:#ade7fe;--cyan:#01d4ff;--navy:#022b9d;--pink:#ff64b0;--blue:#027bff;--paper:#fae2be;--preview-size:71px;--preview-color:#ff72af;color:var(--navy);font-family:var(--site-font);background:var(--cyan);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0}main{width:100%;margin:auto;overflow:clip}h1,h2,p{margin:0}img{display:block;max-width:100%;height:auto}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--navy);outline-offset:5px}button:disabled,[aria-disabled=true]{cursor:default}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:12px;left:12px;z-index:20;background:white;padding:14px;border-radius:8px;transform:translateY(-160%)}.skip-link:focus{transform:none}
.hero{position:relative;background:var(--sky)}.site-header{position:absolute;z-index:2;top:4.2%;left:2.45%;right:2.6%;display:flex;align-items:center;justify-content:space-between}.site-header a{width:9.15%}.site-header>img{width:6.33%}.site-header img{width:100%}.site-header>img{width:6.33%}.media-slot{width:100%;position:relative;aspect-ratio:var(--media-ratio,16 / 9);overflow:hidden;background:var(--sky)}.media-poster,.campaign-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.video-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid white;border-radius:40px;background:var(--navy);color:white;padding:14px 24px;min-height:48px;box-shadow:0 4px 30px #00308c33;white-space:nowrap}.brand-banner{width:100%;position:relative;aspect-ratio:1920/596;background:var(--sky);display:grid;place-items:center;padding-top:5.7%}.brand-logo{width:63.125%;filter:drop-shadow(0 7px 13px #263a5a40)}
.story{background:var(--sky);position:relative;aspect-ratio:1920/2622}.story-heading{position:absolute;left:0;right:0;top:8.695%;width:43.855%;margin-inline:auto}.story-heading img,.values h2 img,.font-heading img,.stickers-section h2 img{margin-inline:auto}.story-heading img,.first-lunchbox,.product{filter:drop-shadow(0 4px 6px #55a2bc40)}.first-lunchbox{position:absolute;left:11.823%;top:17.81%;width:28.4375%}.source-copy>p{display:none}.source-copy>img{width:100%}.story-body{position:absolute;left:42.1875%;top:20.9%;width:49.48%}.story-arrow{position:absolute;left:37.5%;top:37.26%;width:16.927%}.story-caption{position:absolute;left:55.68%;top:37.07%;width:14.9%}.product-line{position:absolute;inset:0;pointer-events:none}.product{position:absolute}.product-2{left:2.4%;top:44.66%;width:32.6%}.product-3{left:34.22%;top:42.72%;width:30.365%}.product-4{left:65.05%;top:46.68%;width:30.42%}.story-outro{position:absolute;left:16.667%;top:72.12%;width:66.35%}.story-support{position:absolute;left:17.8125%;top:85.697%;width:64.427%}.orange{color:#ff5f29}.green{color:#00b864}.brown{color:#ae793d}.pink{color:var(--pink)}
.values{background:var(--paper);padding-top:15.26%;padding-bottom:0}.values h2{width:54.6875%;margin:auto;position:relative;z-index:1}.values .media-slot{margin-top:clamp(32px,5.2vw,160px);background:var(--paper)}.font-section{padding-top:14.32%}.font-heading{width:50.520833%;margin:0 auto;filter:drop-shadow(0 4px 6px #55a2bc40)}.font-description{width:73.75%;margin:5.52% auto 9.635%}.specimens{width:var(--section-width);margin:auto;display:flex;align-items:stretch}.specimen-pages{width:94.1%;background:transparent;border-radius:2.4vw 0 0 2.4vw;overflow:hidden}.specimen-panel img{width:100%;aspect-ratio:1582/779;object-fit:contain}.specimen-tabs{display:grid;grid-template-rows:repeat(8,1fr);flex:1}.specimen-tab{position:relative;display:flex;align-items:center;justify-content:center;border:0;padding:0;border-radius:0 40% 40% 0;color:white;background:#00b4e3;font-family:var(--site-font);font-size:clamp(24px,3.45vw,64px);line-height:1;transition:filter .2s}.specimen-tab:nth-child(4n+1){--tab-color:#ff64b0;background:var(--tab-color)}.specimen-tab:nth-child(4n+2){--tab-color:#ff5f29;background:var(--tab-color)}.specimen-tab:nth-child(4n+3){--tab-color:#01cc60;background:var(--tab-color)}.specimen-tab:nth-child(4n){--tab-color:#027bff;background:var(--tab-color)}.specimen-tab[aria-selected=true]{background:var(--tab-color);z-index:1;filter:brightness(1.08)}.specimen-tab:hover{filter:brightness(1.08)}.specimen-tab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* Preserve the original desktop proportions as the shared section width grows. */
.try-section{padding-top:10.31%}.tester{width:var(--section-width);container-type:inline-size;margin:auto;position:relative;background:white;border-radius:clamp(18px,2.5vw,48px);overflow:hidden}.tester-toolbar{height:8.445cqw;background:var(--blue);display:flex;align-items:center;justify-content:space-between;gap:5%;padding:1.77% 2.1%;min-height:70px}.tester-toolbar h2{width:23.7%;flex-shrink:0}.size-control{width:28.5%;padding:0 2.4%;background:white;border-radius:100px;height:max(42px,4.553cqw);display:flex;align-items:center}.size-control input{width:100%;height:44px;margin:0;background:transparent;accent-color:var(--navy);cursor:pointer;appearance:none}.size-control input::-webkit-slider-runnable-track{height:3px;background:var(--navy)}.size-control input::-webkit-slider-thumb{appearance:none;width:15px;height:15px;margin-top:-6px;border:0;border-radius:50%;background:var(--navy)}.size-control input::-moz-range-track{height:3px;background:var(--navy)}.size-control input::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--navy)}.color-switch{width:24.2%;height:max(42px,4.553cqw);display:flex;align-items:center;justify-content:space-evenly;background:white;border-radius:100px;padding:0 2px;gap:1px}.color-button{width:19%;height:100%;padding:0;border:0;position:relative;background:transparent;border-radius:50%}.color-button::before{content:'';display:block;width:65%;aspect-ratio:1;border-radius:50%;background:var(--swatch);margin:auto}.color-button[aria-pressed=true]::before{box-shadow:0 0 0 2px white,0 0 0 3px var(--swatch)}.tester-writing{height:40.975cqw;position:relative;display:grid;place-items:center}.tester-text{position:absolute;inset:0;width:100%;height:100%;padding:11.382cqw 6% 30px;border:0;resize:none;outline-offset:-6px!important;line-height:1.35;text-align:center;background:transparent;color:var(--preview-color);font-family:var(--site-font);font-size:var(--preview-size);overflow:auto;caret-color:var(--navy)}.tester-tools{display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:0 3% 15px;font-family:var(--site-font);font-size:12px;color:#576a84}.tester-tools button{border:0;background:transparent;color:var(--navy);min-height:44px;padding:0 6px}.tester-note,.download-note{font-family:var(--site-font);text-align:center;font-size:12px;line-height:1.5;padding:12px 20px;color:#003a76}
.download-section{padding-top:6.2%}.download-options{width:var(--section-width);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4%}.download-sticker{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}.download-art{position:relative;height:clamp(65px,10.75vw,206px);width:86%;display:grid;place-items:center;filter:drop-shadow(0 4px 6px #55a2bc40);transition:transform .2s}.download-art img{max-height:100%;width:auto;max-width:100%;object-fit:contain}.sticker-hover{position:absolute;inset:0;margin:auto;opacity:0}.download-sticker:hover .sticker-hover,.download-sticker:focus-visible .sticker-hover{opacity:1}.download-sticker:hover .sticker-base,.download-sticker:focus-visible .sticker-base{opacity:0}.download-sticker:nth-child(1) .download-art{width:62%}.download-sticker:nth-child(2) .download-art{width:67.5%}.download-sticker:nth-child(3) .download-art{width:82.3%}.download-sticker:hover .download-art,.download-sticker:focus-visible .download-art{transform:scale(1.04)}.download-description{color:#fff;font-size:clamp(14px,2.1vw,40px);line-height:1.4;margin-top:4%}.download-status{font:12px/1.4 var(--site-font);margin-top:10px;opacity:.8}.download-note{margin-top:14px}.stickers-section{padding-top:12.2%;text-align:center}.stickers-section h2{width:43.91%;margin:0 auto 4.895%;filter:drop-shadow(0 4px 6px #55a2bc40)}.sticker-showcase{width:100%}.sticker-download{font-family:var(--site-font);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:220px;background:var(--navy);color:white;border-radius:90px;padding:14px 32px;margin-top:4.17%;font-size:clamp(23px,3.25vw,60px)}.sticker-download .download-status{margin-top:0}.site-footer{position:relative;padding:13.6% 20px 3%;text-align:center}.closing-copy{width:40%;margin:auto}.copyright{font-family:var(--site-font);font-size:clamp(10px,.8vw,14px);line-height:1.6;margin-top:2.55%}.preview-label{font-family:var(--site-font);font-size:11px;opacity:.75;margin-top:10px}.to-top{display:inline-block;margin-top:20px;font:12px/44px var(--site-font)}.motion-toggle{position:fixed;z-index:10;bottom:16px;right:16px;border:1px solid #ffffff80;background:#00308ced;color:white;border-radius:40px;padding:12px 16px;min-height:44px;font:12px/1.3 var(--site-font);box-shadow:0 3px 14px #00308c24}.reveal{transition:transform .7s ease,opacity .7s ease}.reveal.awaiting{opacity:0;transform:translateY(25px)}.motion-paused .reveal{opacity:1!important;transform:none!important;transition:none!important}
/* Independent rotation preserves the reveal transform and mobile bread offset. */
.product{--sway-angle:3.5deg;transform-origin:50% 70%;animation:product-sway 1.4s ease-in-out infinite alternate}
.product-2{animation-delay:-.6s}
.product-3{--sway-angle:4deg;animation-duration:1.65s;animation-delay:-1.9s}
.product-4{--sway-angle:3deg;animation-duration:1.5s;animation-delay:-2.5s}
.product.awaiting,.motion-paused .product{animation-play-state:paused}
@keyframes product-sway{from{rotate:calc(-1 * var(--sway-angle))}to{rotate:var(--sway-angle)}}
@media(min-width:1920px){.specimen-pages{border-radius:46px 0 0 46px}}
@media(max-width:1023px){:root{--section-width:88%}.specimens{flex-direction:column}.specimen-pages{width:100%;border-radius:20px 20px 0 0}.specimen-tabs{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,48px);gap:2px}.specimen-tab{border-radius:0;font-size:24px;gap:6px}.specimen-tab span{position:static;width:auto;height:auto;clip:auto;font-family:var(--site-font);font-size:12px}.specimen-tab:hover{transform:none}.tester-toolbar{height:auto;flex-wrap:wrap;gap:14px 5%;padding:18px 5%}.tester-toolbar h2{width:100%}.tester-toolbar h2 img{width:180px;margin:auto}.size-control{width:45%;padding:0 18px}.color-switch{width:50%;height:44px}.color-button{min-width:32px;min-height:44px}.tester-writing{height:340px}.tester-text{padding:75px 5% 30px}}
@media(max-width:700px){:root{--section-width:calc(100% - 32px)}html{scroll-padding-top:12px}.site-header{position:relative;inset:auto;padding:14px 16px}.site-header a{width:83px}.site-header>img{width:58px}.hero .media-slot{min-height:265px;aspect-ratio:16/10}.hero .media-poster,.hero .campaign-video{object-fit:cover}.brand-banner{min-height:160px;padding-top:4%;aspect-ratio:2.6}.brand-logo{width:78%}.media-slot{aspect-ratio:16/9}.story{aspect-ratio:auto;padding:55px 24px 65px;display:flex;flex-direction:column;align-items:center;gap:25px}.story-heading,.first-lunchbox,.story-body,.story-caption,.story-outro,.story-support{position:static;width:100%}.story-heading{width:90%;margin-bottom:12px}.first-lunchbox{width:65%;max-width:310px;order:2}.story-body{order:4}.story-caption{order:3;text-align:center;font-size:13px;line-height:1.5;margin-top:-20px}.story-arrow{display:none}.source-copy>img{display:none}.source-copy>p{display:block}.story-body{font-size:17px;line-height:1.75;word-break:keep-all}.product-line{position:static;display:flex;align-items:center;width:calc(100% + 32px);margin:10px -16px 0;order:5}.product{position:static;width:34%;flex-shrink:0;margin-left:-.5%}.product-3{transform:translateY(-7px)}.story-outro{order:6;text-align:center;font-size:clamp(18px,5.3vw,28px);line-height:1.7;word-break:keep-all}.story-support{order:7;font-size:15px;line-height:1.8;text-align:center;word-break:keep-all}.values{padding-top:55px;padding-bottom:0}.values h2{width:76%}.font-section{padding-top:65px}.font-heading{width:84%}.font-description{width:auto;margin:35px 28px 45px;font-size:16px;line-height:1.8;text-align:center;word-break:keep-all}.try-section{padding-top:55px}.tester{border-radius:20px}.tester-toolbar{gap:16px 3%;padding:18px 14px}.size-control{width:44%;padding:0 12px}.color-switch{width:53%;gap:0}.color-button{min-width:24px}.color-button::before{width:72%}.tester-writing{height:290px}.tester-text{padding:70px 18px 20px}.tester-tools{gap:13px;padding:0 14px 8px;font-size:11px}.tester-note{font-size:11px}.download-section{padding-top:40px}.download-options{gap:12px}.download-art{height:68px;width:100%;filter:drop-shadow(0 2px 3px #55a2bc40)}.download-description{font-family:var(--site-font);font-weight:700;font-size:12px;line-height:1.55;margin-top:12px;word-break:keep-all}.download-status{font-size:11px}.download-note{font-size:11px}.stickers-section{padding-top:65px}.stickers-section h2{width:80%;margin-bottom:35px}.sticker-download{font-size:26px;margin-top:26px;min-width:200px}.site-footer{padding:65px 24px 76px}.closing-copy{width:100%;font-size:15px;line-height:1.75;word-break:keep-all}.copyright{margin-top:24px;font-size:9px}.motion-toggle{right:12px;bottom:12px}.reveal.awaiting{transform:translateY(15px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}

@media(max-width:700px){.download-sticker:nth-child(n) .download-art{width:100%}}

/* Keep desktop artwork; use the final webfont in the stacked mobile tabs. */
.specimen-tab img{width:60%;height:60%;max-width:64px;max-height:64px;object-fit:contain}
@media(max-width:1023px){.specimen-tab img{width:28px;height:28px}.specimen-tab[aria-selected=true]{box-shadow:inset 0 -3px 0 #ffffffb3}}

/* Clip the encoded edge line inside the hero without changing section spacing. */
.hero .media-slot{--edge-trim:max(3px,.208334vw)}
.hero .media-poster,.hero .campaign-video{top:calc(-1 * var(--edge-trim));bottom:auto;height:calc(100% + var(--edge-trim) * 2)}

/* Cover fractional-pixel joins between the artwork and desktop tabs. */
@media(min-width:1024px){.specimen-tabs{position:relative;z-index:1;margin-left:-1px;grid-template-columns:minmax(0,1fr)}}

/* Expand from the attached edge; balanced padding keeps the lettering size unchanged. */
@media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .specimen-tab{width:100%;transition:width .22s ease,padding .22s ease,filter .2s ease}
  .specimen-tab:hover,.specimen-tab:focus-visible{width:calc(100% + 6px);padding-inline:3px}
}

/* Reuse the supplied arrow beside the stacked mobile lunchbox caption. */
@media(max-width:700px){
  .story-caption{--mobile-story-arrow-width:clamp(82px,24vw,120px);--mobile-lunchbox-half:min(calc(32.5vw - 15.6px),155px);position:relative;inset:auto;width:max-content;max-width:100%;font-size:12px}
  .story-caption::before{content:"";position:absolute;left:calc(50% - var(--mobile-lunchbox-half) - 6px);top:calc(12px - var(--mobile-story-arrow-width)*.95);width:var(--mobile-story-arrow-width);aspect-ratio:325/98;transform:rotate(55deg);transform-origin:0 0;background:url('../public/gs25/v261008/story-arrow.svg') center/contain no-repeat;pointer-events:none}
}

/* Rounded, separate buttons for the stacked touch layout. */
@media(max-width:1023px){
  .specimen-tabs{gap:14px 6px;margin-top:12px}
  .specimen-tab{border-radius:999px}
  .specimen-tab[aria-selected=true]{box-shadow:inset 0 0 0 2px #ffffffb3}
}

/* Match the original five desktop lines using the supplied final font (39.5px / 70px at 1920px). */
@media(min-width:701px){
  .story-body{font-size:2.057292vw;line-height:3.645833vw;letter-spacing:0}
  .story-body>p{display:block;margin-top:-.25em}
  .story-body .story-line{display:block;white-space:nowrap}
  .story-body .story-paragraph-break{display:none}
}

/* Match the original seven-line introduction and three-line closing on desktop. */
@media(min-width:701px){
  .font-description{height:27.864583vw;text-align:center}
  .font-description>p{display:block;font-size:2.057292vw;line-height:4.270833vw;transform:translateY(-.4em)}
  .font-description .copy-line{display:block;white-space:nowrap}
  .font-description .copy-paragraph-break{display:none}
  .closing-copy{position:relative;container-type:inline-size;aspect-ratio:768/181}
  .closing-copy>p{display:block;position:absolute;inset:0;font-size:5.1cqw;line-height:9.114583cqw;white-space:nowrap;transform:translateY(-.25em)}
}

/* Render mobile tab lettering as live text, preserving the 28px artwork size. */
.specimen-tab .specimen-tab-letter{display:none}
@media(max-width:1023px){
  .specimen-tab img{display:none}
  .specimen-tab .specimen-tab-letter{display:block;position:static;width:auto;height:auto;overflow:visible;clip:auto;flex-shrink:0;font-family:var(--site-font);font-size:28px;font-weight:400;line-height:1}
}

/* Match the two desktop lines of the original support copy with the final font. */
@media(min-width:701px){
  .story-support{text-align:center;font-size:2.03125vw;line-height:3.645833vw;letter-spacing:0}
  .story-support>p{display:block;margin-top:-.25em}
  .story-support .support-line{display:block;white-space:nowrap}
}

/* Live lettering keeps the original colored copy and three-line desktop layout. */
.values h2{font-family:var(--site-font);font-size:5.625vw;font-weight:400;line-height:1.296296;color:#671701;text-align:center}
.value-line{display:block;white-space:nowrap}
.value-quality{color:#afd21a}
.story-outro>p{display:block}
.story-outro .outro-line{display:block}
.story-outro .green{color:#01cc60}
.story-outro .brown{color:#bd7d46}
.story-outro .pink{color:#ff72af}
@media(min-width:701px){
  .values h2{height:20.9375vw}
  .values .value-line{position:relative;top:-.25em}
  .story-outro{font-size:3.333333vw;line-height:5.208333vw;text-align:center;letter-spacing:0}
  .story-outro>p{margin-top:-.25em}
  .story-outro .outro-line{white-space:nowrap}
  .story-outro .outro-products>span{font-size:1.25em}
  .outro-mobile-break{display:none}
}
@media(max-width:700px){
  .values h2{font-size:7.8vw}
}