*{box-sizing:border-box}html,body{margin:0;background:transparent;color:#fafafa;font-family:Inter,-apple-system,BlinkMacSystemFont,Arial,sans-serif}body{overflow:hidden}#viewport{width:100%}#canvas{width:100%;height:clamp(400px,38.571429vw,460px);border:1px solid #ffffff26;border-radius:16px;overflow:hidden;background:#fff;outline-offset:-3px}#canvas:focus-visible{outline:2px solid #9d8bca}#canvas svg{display:block;width:100%;height:100%}nav{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:18px;padding:0 4px 4px}button{border:0;appearance:none;background:none;text-align:left;font:inherit;color:#fff;padding:0;cursor:pointer;min-width:0;opacity:.52;transition:opacity 150ms}button[aria-selected=true],button:hover,button:focus-visible{opacity:1}button:focus-visible{outline:2px solid #a792da;outline-offset:6px;border-radius:2px}.rail{display:block;position:relative;height:2px;background:#ffffff29;margin-bottom:12px;overflow:hidden}.fill{display:block;position:absolute;inset:0;background:#c8b8f4;transform-origin:left;transform:scaleX(0)}strong{display:block;font-size:18px;font-weight:500;letter-spacing:-.35px;line-height:1.4}.description{display:block;color:#aaa8b1;font-size:14px;line-height:1.6;margin-top:6px;max-width:310px}@media(max-width:600px){#canvas{height:auto;border-radius:12px}#canvas svg{height:auto;aspect-ratio:426/528}nav{grid-template-columns:1fr;gap:22px;margin-top:24px;padding:0 0 8px}.rail{margin-bottom:10px}strong{font-size:17px}.description{font-size:13px;max-width:none;margin-top:5px}}
 .rail{background:color-mix(in srgb,var(--step-tone) 20%,transparent)}.fill{background:var(--step-tone)}button:focus-visible{outline-color:var(--step-tone)}strong{display:flex;align-items:flex-start;gap:9px}.step-icon{display:inline-flex;flex-shrink:0;width:19px;height:19px;margin-top:3px;color:var(--step-tone)}.step-icon svg{width:100%;height:100%}
 @media(prefers-reduced-motion:reduce){button{transition:none}}

    nav{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:2px auto auto;column-gap:32px;row-gap:12px;align-items:start}
    nav>button{display:grid;grid-template-rows:subgrid;grid-row:1 / span 3;align-items:start;align-content:start}
    nav>button:nth-child(1){grid-column:1}
    nav>button:nth-child(2){grid-column:2}
    nav>button:nth-child(3){grid-column:3}
    nav .rail{margin-bottom:0}
    nav strong{margin:0;min-width:0}
    nav .description{margin-top:0}
    @media(max-width:600px){
      nav{grid-template-columns:1fr;grid-template-rows:none;row-gap:22px}
      nav>button:nth-child(n){grid-column:auto;grid-row:auto;grid-template-rows:2px auto auto;row-gap:10px}
    }

html:lang(ko),html:lang(ja){font-family:Arial,"Apple SD Gothic Neo","Hiragino Kaku Gothic ProN",sans-serif;}