.exv-font-product .ex-ja{font-family:var(--vocab-font)}.exv-font-noto .ex-ja{font-family:var(--exv-noto),"Hiragino Sans","Noto Sans JP",sans-serif}.exv-font-zen .ex-ja{font-family:var(--exv-zen),"Hiragino Sans",sans-serif;font-weight:500}.exv-font-shippori .ex-ja{font-family:var(--exv-shippori),"Hiragino Mincho ProN",serif}.exv-bg-warm .ex-root{--ex-paper:#f7eedb}.exv-bg-cool .ex-root{--ex-paper:#f2f1ed}.exv-bg-white .ex-root{--ex-paper:#faf9f6}.exv-bg-deep .ex-root{--ex-paper:#ede4d3}.pd-surface{display:grid;justify-items:center;align-content:center;grid-row-gap:18px;row-gap:18px;width:100%;opacity:calc(1 - var(--outro, 0));pointer-events:none}.pd-surface--static{opacity:1;row-gap:14px}.pd-static-surface{display:grid;grid-gap:6vh;gap:6vh;width:min(982px,94vw);justify-items:center}.pd-staticcap{margin:0;font-size:16px;color:var(--ff-ink,#171019);text-align:center}.pd-steps{display:flex;gap:26px;font-size:13px;letter-spacing:.06em;color:var(--ff-quiet,#6b6172);opacity:var(--enter)}.pd-steps span{display:inline-flex;align-items:baseline;gap:7px;transition:color .32s}.pd-surface .pd-steps span{position:relative;padding-bottom:8px}.pd-surface .pd-steps span:after,.pd-surface .pd-steps span:before{content:"";position:absolute;left:1px;right:1px;bottom:0;height:2px;border-radius:999px}.pd-surface .pd-steps span:before{background:color-mix(in srgb,var(--ff-quiet,#6b6172) 22%,transparent)}.pd-surface .pd-steps span:after{background:var(--ff-purple,#611f69);transform-origin:left;transform:scaleX(var(--s1,0));will-change:transform}.pd-surface .pd-steps span:nth-child(2):after{transform:scaleX(var(--s2,0))}.pd-surface .pd-steps span:nth-child(3):after{transform:scaleX(var(--s3,0))}.pd-steps span i{font-style:normal;font-size:11px;letter-spacing:.14em;opacity:.55}.pd-steps span.is-on{color:var(--ff-purple,#611f69);font-weight:700}.pd-frame{margin:0;width:min(982px,94vw);border:1px solid var(--ff-hairline,rgba(23,16,25,.14));border-radius:18px;background:#fffdfa;box-shadow:0 30px 80px rgba(23,16,25,.12),0 4px 18px rgba(23,16,25,.06);overflow:hidden;opacity:var(--enter);transform:translateY(calc((1 - var(--enter)) * 26px));pointer-events:none}.pd-framebar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--ff-hairline,rgba(23,16,25,.14));font-size:13px;color:var(--ff-quiet,#6b6172);background:#fffdfa}.pd-surface:not(.pd-surface--static) .pd-framebar{position:relative}.pd-surface:not(.pd-surface--static) .pd-framebar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:color-mix(in srgb,var(--ff-purple,#611f69) 55%,transparent);transform-origin:left;transform:scaleX(var(--sp,0));will-change:transform;pointer-events:none}.pd-framedot{width:9px;height:9px;border-radius:50%;background:var(--ff-purple,#611f69);flex-shrink:0}.pd-surface:not(.pd-surface--static) .pd-framedot{animation:pd-live 2.4s cubic-bezier(.4,0,.4,1) infinite}@keyframes pd-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ff-purple,#611f69) 30%,transparent)}70%,to{box-shadow:0 0 0 7px color-mix(in srgb,var(--ff-purple,#611f69) 0,transparent)}}@media (prefers-reduced-motion:reduce){.pd-surface .pd-framedot{animation:none}}.pd-frametitle{font-weight:700;color:var(--ff-ink,#171019)}.pd-frametag{margin-left:auto;font-size:12px;letter-spacing:.08em;color:var(--ff-purple,#611f69);border:1px solid color-mix(in srgb,var(--ff-purple,#611f69) 35%,transparent);border-radius:999px;padding:2px 10px;white-space:nowrap}.pd-viewport{position:relative;width:100%;aspect-ratio:980/500;overflow:hidden;background:#f5f2fa}.pd-state{position:absolute;inset:0;overflow:hidden}.pd-state--input{opacity:calc(1 - var(--xout))}.pd-state--result{opacity:var(--x23);transform:translateY(calc((1 - var(--x23m)) * 3.5%))}.pd-plane{position:absolute;top:0;left:0;width:100%}.pd-plane--top{transform:translateY(calc(320 / 1165 * -100%))}.pd-plane--bottom{transform:translateY(calc(665 / 1165 * -100%))}.pd-shot,.pd-shot-img{display:block;width:100%}.pd-shot-img{height:auto;image-rendering:auto;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pd-shot--2{position:absolute;inset:0;opacity:var(--x12)}.pd-ring{position:absolute;border:1.5px solid color-mix(in srgb,var(--ff-purple,#611f69) 65%,transparent);border-radius:9px;box-shadow:0 0 0 4px color-mix(in srgb,var(--ff-purple,#611f69) 10%,transparent),0 0 18px color-mix(in srgb,var(--ff-purple,#611f69) 18%,transparent);pointer-events:none}.pd-ring--selection{left:calc(240 / 980 * 100%);top:calc(450 / 1165 * 100%);width:calc(108 / 980 * 100%);height:calc(52 / 1165 * 100%);opacity:var(--ring)}.pd-ring--translation{left:calc(90 / 980 * 100%);top:calc(916 / 1165 * 100%);width:calc(340 / 980 * 100%);height:calc(50 / 1165 * 100%);opacity:var(--hl1)}.pd-ring--meaning{left:calc(90 / 980 * 100%);top:calc(1064 / 1165 * 100%);width:calc(92 / 980 * 100%);height:calc(40 / 1165 * 100%);opacity:var(--hl2);border-width:2px}.pd-captions{position:relative;width:min(680px,88vw);height:2em;opacity:var(--enter)}.pd-captions p{position:absolute;inset:0;margin:0;text-align:center;font-size:16.5px;line-height:1.7;color:var(--ff-quiet,#6b6172);opacity:0;transform:translateY(8px);transition:opacity .38s,transform .38s}.pd-captions p.is-now{opacity:1;transform:translateY(0);color:var(--ff-ink,#171019)}@media (max-width:700px){.pd-frame,.pd-static-surface{width:min(390px,94vw)}.pd-viewport{aspect-ratio:390/560}.pd-plane--bottom,.pd-plane--top{transform:none}.pd-ring--selection{left:calc(140 / 390 * 100%);top:calc(128 / 560 * 100%);width:calc(90 / 390 * 100%);height:calc(44 / 560 * 100%)}.pd-ring--translation{left:calc(18 / 390 * 100%);top:calc(268 / 560 * 100%);width:calc(354 / 390 * 100%);height:calc(48 / 560 * 100%)}.pd-ring--meaning{left:calc(18 / 390 * 100%);top:calc(408 / 560 * 100%);width:calc(120 / 390 * 100%);height:calc(40 / 560 * 100%)}.pd-steps{gap:14px;font-size:12px}.pd-captions p{font-size:14.5px}.pd-frametitle{font-size:12px}.pd-frametag{font-size:11px;padding:2px 8px}.pd-surface{row-gap:14px}}