@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css);:root{--font:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;background:#0b0f12;font-family:var(--font);letter-spacing:-.02em;overflow:hidden}.viewport{position:fixed;inset:0;display:grid;place-items:center}.stage{--bg:#16262e;--panel:rgba(255, 255, 255, 0.055);--panel-line:rgba(255, 255, 255, 0.09);--ink:#f4f7f9;--ink-2:#b9c6cf;--ink-3:#8597a3;--track:rgba(255, 255, 255, 0.12);--g0:#4ea6e6;--g1:#3cc48a;--g2:#f5a524;--g3:#ff6b3d;--gs:#8a979f;--gx:#55646e;position:absolute;width:1920px;height:1080px;transform-origin:center center;background:var(--bg);color:var(--ink);overflow:hidden;font-variant-numeric:tabular-nums}.stage.portrait{width:1080px;height:1920px}.stage.light{--bg:#f3f5f6;--panel:#ffffff;--panel-line:#e3e6e8;--ink:#17222a;--ink-2:#47545d;--ink-3:#6b7780;--track:#e6eaed;--g0:#2d7ebd;--g1:#1e9e6a;--g2:#b86a00;--g3:#c63f0b;--gs:#6f7c84;--gx:#b7c0c6}.stage.dark.tone-care{--bg:#1c211b}.stage.dark.tone-clinic{--bg:#13212c}.stage.light.tone-care{--bg:#faf5ea;--panel-line:#eadfca}.stage.light.tone-clinic{--bg:#edf3f7;--panel-line:#d8e3ea}.g0{color:var(--g0);stroke:var(--g0)}.g1{color:var(--g1);stroke:var(--g1)}.g2{color:var(--g2);stroke:var(--g2)}.g3{color:var(--g3);stroke:var(--g3)}.gs{color:var(--gs);stroke:var(--gs)}.gn{color:var(--ink-2)}.d{position:absolute;inset:0;display:grid;grid-template-rows:112px minmax(0,1fr) 300px 64px;grid-template-columns:minmax(0,1fr);gap:28px;padding:48px 64px 32px}.portrait .d{grid-template-rows:112px 540px 420px minmax(0,1fr) 96px;padding:64px 56px 40px}.d__head{display:flex;align-items:center;justify-content:space-between}.d__who{display:flex;align-items:center;gap:32px}.d__logo{height:72px;padding:0 22px;display:grid;place-items:center;border:2px dashed var(--panel-line);color:var(--ink-3);font-size:28px;font-weight:500;letter-spacing:.04em}.d__logo.is-brand{border:0;padding:0;color:var(--ink);font-size:34px;font-weight:700;letter-spacing:.02em}.d__space{font-size:52px;font-weight:700}.d__dots{display:flex;gap:12px;margin-left:8px}.d__dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink-3)}.d__dots i.on{background:var(--ink);border-color:var(--ink)}.d__time{text-align:right;line-height:1.1}.d__time b{display:block;font-size:64px;font-weight:700}.d__time span{font-size:30px;color:var(--ink-2)}.d__main{display:grid;grid-template-columns:minmax(0,1fr) 760px;gap:28px;min-height:0}.portrait .d__main{display:contents}.hero{display:flex;align-items:center;gap:48px;padding:0 16px;min-width:0;word-break:keep-all}.portrait .hero{flex-direction:column;justify-content:center;gap:28px;text-align:center}.hero__mark{flex:none;width:240px;height:240px}.mark--face .hero__mark{width:290px;height:290px}.portrait .hero__mark{width:200px;height:200px}.portrait .hero__word{font-size:160px}.mark{width:100%;height:100%}.mark>circle:first-child{fill:currentColor}.mark .dotfill,.mark .eye{fill:var(--bg)}.mark path{fill:none;stroke:var(--bg);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.mark--face .mark path{stroke-width:5.5}.hero__word{font-size:188px;font-weight:700;line-height:1;letter-spacing:-.04em}.hero__msg{margin-top:24px;font-size:44px;font-weight:500;line-height:1.3}.mark--face .hero__msg{font-size:48px}.hero__act{margin-top:16px;font-size:36px;font-weight:500;color:var(--ink-2)}.side{background:var(--panel);border:1px solid var(--panel-line);padding:30px 40px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:0;min-width:0}.side__title{font-size:36px;font-weight:500;color:var(--ink-2)}.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.cmp__side+.cmp__side{border-left:1px solid var(--panel-line);padding-left:40px}.cmp__where{font-size:36px;font-weight:500}.cmp__val{font-size:128px;font-weight:700;line-height:1.05}.cmp__grade{font-size:40px;font-weight:700}.side__note{font-size:28px;color:var(--ink-3)}.vent{display:flex;align-items:baseline;justify-content:space-between;gap:24px}.vent__val{font-size:128px;font-weight:700;line-height:1.05;white-space:nowrap}.vent__val small{font-size:36px;font-weight:500;color:var(--ink-2);margin-left:10px}.vent__grade{font-size:40px;font-weight:700;white-space:nowrap}.vent__axis{display:flex;justify-content:space-between;font-size:28px;color:var(--ink-3)}.vent__limit{color:var(--ink-2);font-weight:500}.scale{position:relative;height:16px;margin-top:10px}.scale--big{height:26px}.scale__track{display:flex;gap:4px;height:100%}.seg{opacity:.3}.seg.on{opacity:1}.seg.g0{background:var(--g0)}.seg.g1{background:var(--g1)}.seg.g2{background:var(--g2)}.seg.g3{background:var(--g3)}.seg.gx{background:var(--gx)}.scale__mark{position:absolute;top:-9px;width:8px;height:34px;margin-left:-4px;background:var(--ink);border-radius:4px;box-shadow:0 0 0 4px var(--panel)}.scale--big .scale__mark{top:-10px;height:46px}.scale.is-stale .seg{opacity:.15}.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}.portrait .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{background:var(--panel);border:1px solid var(--panel-line);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px 32px 30px;min-width:0}.tile__label{font-size:36px;font-weight:500;color:var(--ink-2);white-space:nowrap}.tile__label small{font-size:28px;font-weight:500;color:var(--ink-3);margin-left:10px}.tile__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}.tile__val{font-size:88px;font-weight:700;line-height:1.05;white-space:nowrap}.tile__grade{font-size:36px;font-weight:700;white-space:nowrap}.is-stale .cmp__side:first-child .cmp__val,.is-stale .tile__val,.is-stale .vent__val{opacity:.35}.d__foot{display:flex;align-items:center;justify-content:space-between;font-size:28px;color:var(--ink-3);border-top:1px solid var(--panel-line)}.d__foot b{color:var(--ink-2);font-weight:500}.portrait .d__foot{flex-direction:column;justify-content:center;gap:8px}.demo{position:absolute;inset:auto 0 0 0;height:96px;display:flex;align-items:center;gap:28px;padding:0 64px;background:#080e12;color:#e9eef1;font-size:28px;z-index:5;transition:opacity .4s}.demo.is-hidden{opacity:0;pointer-events:none}.demo__live{display:flex;align-items:center;gap:14px;font-weight:500}.demo__live::before{content:"";width:14px;height:14px;border-radius:50%;background:#3cc48a;box-shadow:0 0 0 6px rgba(60,196,138,.25)}.demo__chips{display:flex;gap:0;margin-left:auto}.demo__chips button{font:inherit;font-size:26px;color:#e9eef1;background:0 0;border:1px solid rgba(255,255,255,.35);padding:10px 26px;cursor:pointer}.demo__chips button+button{border-left:0}.demo__chips button[aria-pressed=true]{background:#16262e;border-color:#e9eef1;position:relative}.demo a{color:#e9eef1;text-underline-offset:8px;margin-left:28px}.portrait .demo{height:124px;padding:0 40px;gap:16px;flex-wrap:wrap;align-content:center}.portrait .demo__chips{margin-left:0}.portrait .demo a{margin-left:auto}