@font-face{font-family:Pretendard;src:url('../../output/ditto-organic-motion/public/fonts/PretendardVariable.ttf');font-weight:100 900;font-display:swap}
body,button,input,select,textarea,code,.mono{font-family:Pretendard,sans-serif}
main{min-width:0}section{scroll-margin-top:28px}.ds-current{color:var(--ink)}.ds-current h3{font-size:19px;letter-spacing:-.4px}.ds-current p{max-width:72ch}.ds-current a{color:var(--brand-ink);text-underline-offset:4px}.ds-current button,.ds-current select{font:inherit}
.ds-kicker{display:block;font-size:12px;font-weight:700;color:var(--brand-ink);margin-bottom:10px}.ds-current h2 .en{font-family:inherit}
.ds-intro-links{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 28px}.ds-intro-links a,.ds-control{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--ink);text-decoration:none;font-size:14px;cursor:pointer}.ds-control:disabled{opacity:.5;cursor:not-allowed}
.ds-current :is(button,a,input,select,summary):focus-visible{outline:3px solid var(--brand-ink);outline-offset:4px}.ds-current details{border-top:1px solid var(--line);margin-top:28px;padding-top:18px}.ds-current summary{cursor:pointer;font-weight:600;padding:9px 0;min-height:44px}.ds-current details>div{margin-top:18px}.ds-muted{color:var(--sub);font-size:13px;line-height:1.7}.ds-note{padding:14px 16px;background:var(--brand-tonal);border-radius:12px;color:var(--ink2);font-size:14px}
.ds-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;margin:28px 0}.ds-tiles figure{margin:0;min-width:0}.ds-tiles figcaption{margin-top:12px;font-size:14px;font-weight:600}.ds-tiles figcaption small{display:block;font-weight:400;color:var(--sub);font-size:12px;margin-top:3px}
.ds-current .tile{display:block;appearance:none;border:0;padding:0;background:transparent;width:100%;aspect-ratio:1;position:relative;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ds-current .tile>svg,.ds-current .soft-surface>svg{display:block;width:100%;height:100%}.ds-current .soft-surface{display:block;position:relative;width:100%;height:100%;isolation:isolate;transform-origin:50% 55%;pointer-events:none}.ds-current .tile .logo{position:absolute;width:35.36%;height:auto;left:32.32%;top:43.78%;margin:0;filter:brightness(0) invert(1);transform-origin:50% 50%;pointer-events:none}.ds-current .soft-light{display:none}.ds-current .tile[data-soft-phase="pressing"] .soft-surface,.ds-current .tile[data-soft-phase="releasing"] .soft-surface{will-change:transform}.ds-art-surface{position:relative;aspect-ratio:1}.ds-art-surface>svg{width:100%;height:100%}.ds-art-surface>.ds-wordmark{position:absolute;width:35.36%;left:32.32%;top:43.78%;filter:brightness(0) invert(1)}
.ds-rule-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:26px 0}.ds-rule-row strong{display:block;font-size:15px;margin-bottom:5px}.ds-rule-row p{font-size:14px;color:var(--sub);margin:0}.ds-preview-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;margin:26px 0}.ds-specimen{padding:24px;background:var(--card);border-radius:16px}.ds-specimen h3{margin:0 0 16px}.ds-cta{appearance:none;display:flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:12px;height:60px;width:100%;font-size:17px!important;font-weight:700!important;cursor:pointer;background:var(--brand);color:#fff;box-shadow:inset 0 3px 5px #ffffff60,inset 0 -1px 2px #6655d218;transition:transform 110ms ease-out}.ds-cta:active,.ds-cta.is-pressed{transform:translateY(1px) scale(.985);box-shadow:inset 0 3px 6px #2c2f3a35;background:#9d3ee4}.ds-cta:disabled{transform:none;box-shadow:none;background:var(--line);color:var(--sub);cursor:not-allowed}.ds-cta[data-state="disabled"]{background:#b3a8be;color:#fff}.ds-spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ds-spin .8s linear infinite}@keyframes ds-spin{to{transform:rotate(360deg)}}
.ds-state-options{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}.ds-state-options button{min-height:44px;padding:8px 12px;border-radius:8px;border:1px solid var(--line2);color:var(--ink2);background:var(--card);cursor:pointer}.ds-state-options button[aria-pressed="true"]{border-color:var(--brand-ink);color:var(--brand-ink);background:var(--brand-tonal)}.ds-single-ditto{max-width:170px;margin:0 auto}.ds-sample-state{font-size:13px;color:var(--sub);margin:14px 0 0;min-height:2em}.ds-inventory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}.ds-inventory article{border-bottom:1px solid var(--line);padding:22px 0}.ds-inventory h3{margin:0 0 8px;font-size:17px}.ds-inventory p{font-size:14px;color:var(--sub);margin:0 0 8px}.ds-pill{display:inline-block;font-size:12px;color:var(--ink2);border:1px solid var(--line2);border-radius:6px;padding:3px 7px}.ds-inventory img{width:100%;height:105px;object-fit:contain;object-position:left center;background:#fff;border-radius:8px;margin:8px 0}
.sim-layout{display:grid;grid-template-columns:minmax(300px,402px) minmax(220px,1fr);gap:30px;align-items:start;margin:28px 0}.sim-stage{position:relative;max-width:402px;margin:auto;width:100%;overflow:visible}.sim-phone{position:absolute;top:0;left:0;transform-origin:0 0;width:390px;height:800px;border:1px solid #d7d3db;border-radius:38px;overflow:hidden;background:#f3f3f3;color:#171719;box-shadow:0 12px 36px #2c2f3a0d;display:flex;flex-direction:column;font-family:Pretendard}.sim-statusbar{height:42px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 25px;font-size:13px;font-weight:700}.sim-statusbar i{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:90px;height:23px;background:#171719;border-radius:15px}.sim-statusbar small{font-size:11px}.sim-tabs{height:50px;display:flex;justify-content:center;gap:20px;flex:none}.sim-tabs button{flex:none;min-width:44px;font-size:17px;font-weight:700;border:0;background:transparent;color:#98939d;min-height:44px;padding:0 6px;cursor:pointer}.sim-tabs button[aria-selected="true"]{color:#171719}.sim-tabs button.is-promote-target{outline:2px solid #aa4af4;outline-offset:-3px;border-radius:10px;background:#f2e8ff;color:#862fc6}
.sim-profile{display:flex;gap:10px;align-items:center;margin:4px 14px 12px;padding:8px;height:64px;flex:none;border-radius:16px;background:#d4ccfa;border:1px solid #c7b9ec;box-shadow:0 3px 8px #00000008}.sim-profile.is-rep{background:linear-gradient(#b3aae9 64%,#6655d2);color:#fff}.sim-avatar{width:48px;height:48px;border-radius:12px;object-fit:cover}.sim-profile-name{flex:1;font-size:16px;font-weight:600;line-height:1.3}.sim-profile-name small{display:block;font-size:12px;font-weight:400;text-decoration:underline;margin-top:6px;opacity:.7}.sim-profile button{flex:none;border:0;background:transparent;min-width:44px;min-height:44px;cursor:pointer;border-radius:12px;color:inherit;font-weight:700;font-size:13px}.sim-profile button[data-editing="true"]{background:#aa4af4;color:#fff;padding:0 12px}.sim-profile button img{width:18px;height:18px}.sim-hint{padding:0 16px 8px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#6c6c6c;gap:6px;min-height:32px;flex:none}.sim-hint button{border:0;background:#eae2f5;color:#6f26a4;padding:5px 10px;border-radius:8px;min-height:30px;font-size:11px;cursor:pointer}
.sim-scroll{position:relative;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}.sim-scroll::-webkit-scrollbar{display:none}.sim-canvas{position:relative;margin:12px 16px 140px;touch-action:pan-y;isolation:isolate}.sim-canvas.show-grid{background-image:radial-gradient(circle,#70737c50 1.4px,transparent 1.6px);background-size:var(--grid-unit) var(--grid-unit);background-position:0 0}.sim-widget{position:absolute;top:0;left:0;transform-origin:center;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform 180ms ease-out;will-change:auto}.sim-widget.is-moving{z-index:20;transition:none;will-change:transform}.sim-widget.is-selected{z-index:10}.sim-widget-face{position:absolute;inset:0;border:1px solid #e8e5e9;border-radius:inherit;background:#fff;overflow:hidden;color:#29232e;touch-action:pan-y;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;text-align:left;font:inherit;cursor:pointer;width:100%;height:100%;gap:8px}.sim-widget-face>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.sim-widget-face p{margin:0;white-space:pre-line;line-height:1.45;font-size:14px;overflow:hidden;max-height:100%;overflow-wrap:anywhere}.sim-widget-face strong{font-size:12px;line-height:1.2}.sim-widget.is-selected>.sim-widget-face{outline:2px solid #aa4af4;outline-offset:0;box-shadow:0 8px 20px #00000022}.sim-widget.is-moving>.sim-widget-face{transform:scale(1.05)}.sim-widget-face[data-type="text"]{background:#e5dcf5;justify-content:flex-start;align-items:flex-start}.sim-widget-face[data-type="text"] strong{display:none}.sim-widget-face[data-type="social"]{background:linear-gradient(#8a8483,#ffdc53);color:#fff;justify-content:space-between}.sim-widget-face[data-type="music"]{background:#592000;color:#fff;align-items:flex-start}.sim-widget-face[data-type="status"] p,.sim-widget-face[data-type="gif"] p{font-size:28px}.sim-widget-face[data-type="gif"]{background:#f3e7a4}.sim-widget-face[data-type="ditto"]{background:#ead9f3}.sim-widget-face[data-type="image"] strong{position:absolute;top:14px;left:14px;right:14px;color:#fff;text-shadow:0 1px 6px #0009;font-size:14px}.sim-widget-face[data-type="image"]{padding:0}.sim-widget-face[data-type="ditto"] img{position:static;width:65%;height:auto;filter:brightness(0) invert(1)}
.sim-tool{position:absolute;border:0;min-width:32px;height:32px;font-size:11px;background:#fff;color:#29232e;border-radius:6px;cursor:pointer;box-shadow:0 2px 6px #0002;padding:0 7px;z-index:25}.sim-tool.remove{right:0;top:-8px;border-radius:50%;background:#171719;color:#fff;font-size:20px}.sim-tool.promote{left:0;top:-8px;border:1px solid #aa4af4;color:#6f26a4;height:26px}.sim-tool.resize{right:0;bottom:0;width:44px;height:44px;border-radius:50%;background:#171719;color:#fff;touch-action:none;font-size:20px;padding:0}.sim-ghost{position:absolute;top:0;left:0;border:2px solid #a25ad6;border-radius:16px;background:#a25ad61a;pointer-events:none;z-index:-1}.sim-ghost.invalid{background:#ff424218;border-color:#dc3f3a}.sim-ghost span{display:block;text-align:center;font-size:11px;margin:8px 0;color:#6f26a4}.sim-ghost.invalid span{color:#962320}.sim-ghost[hidden]{display:none}
.sim-nav{position:absolute;bottom:24px;left:48px;right:48px;display:flex;justify-content:space-around;padding:8px;background:#ffffffda;border:1px solid #fff;border-radius:32px;backdrop-filter:blur(12px);box-shadow:0 5px 22px #17171912;pointer-events:none}.sim-nav span{display:flex;align-items:center;gap:4px;flex-direction:column;font-size:11px;font-weight:600;width:30%;padding:4px;border-radius:22px}.sim-nav span:first-child{background:#eceaec;color:#a25ad6}.sim-nav img{width:24px;height:24px;object-fit:contain}.sim-home-indicator{position:absolute;bottom:8px;left:35%;width:30%;height:4px;background:#171719;border-radius:3px;pointer-events:none}.sim-phone.editing .sim-nav{display:none}.sim-edit-footer{position:absolute;bottom:25px;left:16px;right:16px;padding:12px;background:#fffffff0;border:1px solid #e6e2eb;border-radius:14px;display:flex;justify-content:space-between;gap:8px;box-shadow:0 4px 16px #1717190d}.sim-edit-footer[hidden]{display:none}.sim-edit-footer button{font:inherit;font-size:13px;font-weight:600;min-height:44px;border-radius:10px;padding:8px 12px;border:1px solid #d6c8e5;background:#fff;color:#6f26a4;cursor:pointer}.sim-edit-footer button:last-child{background:#aa4af4;color:#fff;border:0}
.sim-controls{position:sticky;top:calc(var(--tb-hh,0px) + 12px)}.sim-controls label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}.sim-controls select{width:100%;height:44px;border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:10px;padding:0 12px}.sim-control-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.sim-controls h3{margin:22px 0 6px}.sim-readout{padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;margin:16px 0}.sim-readout strong{display:block;margin-bottom:5px}.sim-readout p{margin:0;color:var(--sub);font-size:13px}.sim-position{display:grid;grid-template-columns:repeat(3,44px);gap:5px;margin:12px 0}.sim-position button{width:44px;height:44px;font:inherit;border-radius:8px;border:1px solid var(--line2);background:var(--card);color:var(--ink);cursor:pointer}.sim-position button:first-child{grid-column:2}.sim-position button:nth-child(2){grid-row:2;grid-column:1}.sim-position button:nth-child(3){grid-row:2;grid-column:2}.sim-position button:nth-child(4){grid-row:2;grid-column:3}.sim-controls button:disabled{opacity:.4;cursor:not-allowed}.sim-controls fieldset{border:0;padding:0;margin:0}.sim-controls legend{font-size:13px;font-weight:600}.sim-announcement{min-height:3em;font-size:13px;line-height:1.6;color:var(--ink2);margin:16px 0}.sim-detail{max-width:360px;width:calc(100% - 40px);border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--card);color:var(--ink)}.sim-detail::backdrop{background:#17171960}.sim-detail h3{font-size:20px;margin:0 0 16px}.sim-detail p{font-size:14px}.sim-detail button{width:100%;margin-top:12px}
.ds-legacy{margin-top:30px}.ds-legacy img{max-width:100%}.ds-legacy .demo button{pointer-events:none}.ds-legacy .compg figcaption{font-family:Pretendard,sans-serif}
.ds-current .tile .logo,.ds-art-surface>.ds-wordmark{width:var(--ds-logo-width);left:var(--ds-logo-left);top:var(--ds-logo-top)}
.ds-mini-tabs{height:96px;display:flex;align-items:center;justify-content:center;gap:24px}.ds-mini-tabs button{background:none;border:0;font-size:17px;font-weight:700;color:var(--sub);min-height:44px;padding:0 8px;cursor:pointer}.ds-mini-tabs button.is-current{color:var(--ink)}.ds-nav-sample{display:flex;justify-content:space-around;gap:6px;padding:8px;margin:18px 0 14px;background:#ffffffbb;border:1px solid #fff;border-radius:32px;box-shadow:0 5px 20px #1717190a}.ds-nav-sample span{display:flex;align-items:center;flex-direction:column;width:30%;font-size:11px;color:#757079;padding:4px 0;gap:3px;border-radius:24px}.ds-nav-sample .is-current{background:#efebf1;color:#9d3ee4}.ds-nav-sample img{height:24px;width:24px;padding:0;margin:0;background:none}.ds-size-options{display:flex;gap:4px;justify-content:space-between;margin:18px 0 14px}.ds-size-options button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;min-height:92px;border:1px solid transparent;border-radius:10px;background:none;color:var(--sub);cursor:pointer;padding:14px 3px 10px;font-size:11px}.ds-size-options i{display:block;background:currentColor;border-radius:3px;margin:auto}.ds-size-options button[aria-pressed="true"]{color:var(--brand-ink);background:var(--card);border-color:var(--line2)}
.sim-widget-face[data-type="status"],.sim-widget-face[data-type="gif"]{padding:8px;gap:2px}.sim-widget-face[data-type="status"] strong,.sim-widget-face[data-type="ditto"] strong{display:none}.sim-widget-face[data-type="status"] p,.sim-widget-face[data-type="gif"] p{flex-shrink:0;line-height:1.2}.sim-widget-face[data-type="music"]{padding:10px;gap:3px}.sim-widget-face[data-type="music"] p{font-size:12px;line-height:1.3}.sim-widget-face[data-type="music"] strong{display:none}
@media(max-width:1100px){.sim-layout{grid-template-columns:minmax(280px,1fr);}.sim-controls{position:static;max-width:520px}.sim-stage{margin-left:0}}
@media(max-width:620px){.ds-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.ds-preview-layout,.ds-rule-row,.ds-inventory{grid-template-columns:1fr}.ds-specimen{padding:18px}.sim-layout{grid-template-columns:minmax(0,1fr)}.shell{padding:0 18px}.ds-current .tblwrap{overflow-x:auto}.sim-controls{position:static}.ds-current .sg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-current .sg-splash{display:block}.ds-current .sg-splash>img{max-width:100%}}
@media(prefers-reduced-motion:reduce){.ds-current *{scroll-behavior:auto!important}.sim-widget,.ds-cta{transition:none}.ds-spinner{animation:none}.ds-current .soft-surface,.ds-current .tile .logo{transform:none!important}}

/* Touch 44: the simulator phone is drawn below 1:1 on narrow screens; keep the press area at 44 there. */
.sim-tabs button,.sim-profile button{position:relative}.sim-tabs button::after,.sim-profile button::after,.sim-tool::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,calc(46px / var(--sim-scale,1)));height:max(100%,calc(46px / var(--sim-scale,1)));transform:translate(-50%,-50%)}