@font-face{font-family:SplupPretendard;src:url('../../../output/ditto-organic-motion/public/fonts/PretendardVariable.ttf');font-weight:100 900;font-display:swap}
body,button,input,select,.brandface,.splup-graphics{font-family:SplupPretendard,Pretendard,sans-serif!important}
.skip-content{position:fixed;left:16px;top:-100px;z-index:100;background:var(--bg);padding:12px}.skip-content:focus{top:12px}
.topbar{background:var(--bg);backdrop-filter:none;gap:16px}.top-nav{min-width:0;overflow-x:auto;scrollbar-width:thin}.top-nav a{white-space:nowrap;padding:0 11px;font-size:13px}.top-search{flex-shrink:0}.top-search input{width:140px}.top-search kbd{display:none}
.sidebar{padding:24px 18px}.side-tab{border:0;box-shadow:none;background:none;padding:4px 8px 24px}.nav-group>.gl{display:block;font-size:11px;letter-spacing:.06em;color:var(--ink-faint);margin:8px 0 12px}.nav-group a{border-radius:7px;padding:9px 12px}.nav-group a.active{background:var(--accent-bg);color:var(--accent-text)}
.page{padding-top:48px}.page h1{font-size:clamp(30px,3.4vw,46px);font-weight:650;line-height:1.25;letter-spacing:-.04em}.page .desc{max-width:660px;font-size:16px}.page h2{font-weight:600;letter-spacing:-.025em}.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;margin:36px 0 60px}.catalog-card{display:block;color:var(--ink);text-decoration:none!important}.catalog-card strong{display:flex;justify-content:space-between;margin-top:17px;font-size:18px}.catalog-card p{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:5px 0}.catalog-card:hover .catalog-art{border-color:var(--accent);background:var(--accent-bg)}.catalog-art{height:200px;position:relative;display:flex;justify-content:center;align-items:center;background:var(--surface-soft);border:1px solid var(--hairline);border-radius:12px;overflow:hidden;transition:background 160ms,border-color 160ms}.catalog-art>img{height:150px;width:150px;object-fit:contain}.catalog-art .catalog-symbol{position:absolute;width:46px;height:46px;filter:brightness(0) invert(1)}.type-big{font-size:70px;font-weight:600;line-height:1}.type-big>span{display:block;font-size:20px;margin-top:18px}.mini-bars{width:65%;display:grid;gap:9px}.mini-bars i{height:14px;background:#AA4AF4;border-radius:3px}.mini-shapes{display:flex;gap:12px}.mini-shapes i{width:54px;height:65px;background:#D6AEFF;border-radius:8px}.mini-shapes i:nth-child(2){border-radius:16px;background:#C588FF}.mini-shapes i:nth-child(3){border-radius:24px;background:#AA4AF4}.motion-dots{display:flex;align-items:center;gap:25px}.motion-dots i{width:40px;height:40px;background:#AA4AF4;border-radius:50%}.motion-dots i:last-child{opacity:.25}.mini-grid{width:140px;height:140px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-grid i{background:#D6AEFF;border-radius:12px}.mini-grid i:first-child{grid-column:span 2;background:#AA4AF4}.mini-grid i:last-child{display:none}.sample-button,.spec-cta{display:inline-flex;justify-content:center;align-items:center;min-height:60px;padding:0 24px;background:#AA4AF4;color:white;border:0;border-radius:12px;font-size:17px;font-weight:700}.mini-layers{position:relative;width:140px;height:130px}.mini-layers i{position:absolute;width:100px;height:75px;border-radius:10px;background:#E5CEFF;border:1px solid #C588FF;top:0;left:0}.mini-layers i:nth-child(2){left:20px;top:25px;background:#C588FF}.mini-layers i:nth-child(3){left:40px;top:50px;background:#AA4AF4}.mini-message{background:var(--bg);border:1px solid var(--hairline);padding:18px 22px;border-radius:12px;font-size:14px}.mini-message small{display:block;color:var(--accent-text);margin-top:8px}.mini-theme{display:flex;gap:8px}.mini-theme i{font-style:normal;font-size:28px;padding:25px;background:#fafafa;color:#181818;border-radius:10px}.mini-theme i:last-child{background:#292929;color:#fafafa}.mini-token{display:grid;text-align:center;gap:7px}.mini-token span{padding:7px 25px;border:1px solid var(--hairline);border-radius:7px;background:var(--bg);font-size:13px}
.doc-preview{margin:28px 0 32px;padding:36px;background:var(--surface-soft);border:1px solid var(--hairline);border-radius:12px;overflow:hidden}.doc-preview small,.doc-preview span{color:var(--ink-soft)}.type-specimen{display:grid;gap:16px}.type-specimen b{font-size:clamp(22px,3vw,36px);line-height:1.3}.type-specimen small{font-size:12px}.spacing-specimen{display:grid;gap:9px}.spacing-specimen>div{display:flex;align-items:center;gap:18px}.spacing-specimen span{width:28px;font-size:12px}.spacing-specimen i{height:13px;background:#AA4AF4}.radius-specimen{display:flex;justify-content:space-around;gap:12px}.radius-specimen>div{display:grid;gap:12px;text-align:center;font-size:12px}.radius-specimen i{width:70px;height:70px;background:#AA4AF4}.motion-track{height:60px;position:relative;border-bottom:1px dashed var(--hairline);margin-bottom:22px}.motion-track i{display:block;width:56px;height:56px;background:#AA4AF4;border-radius:12px;transition:transform 360ms cubic-bezier(.22,1,.36,1)}.motion-track.pressed i{transform:translateY(.8px) scale(1.006,.97);transition-duration:110ms}.demo-replay{padding:10px 16px;border:1px solid var(--hairline);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}.motion-specimen>span{font-size:12px;margin-left:14px}.state-specimen{display:flex;gap:18px;flex-wrap:wrap;align-items:center}.spec-cta{cursor:pointer}.spec-cta:active{background:#9D3EE4;transform:scale(.97)}.spec-cta:disabled{background:#E6E6E6;color:#868686;cursor:default}.spec-feedback{font-size:12px}.layer-specimen{display:flex;padding:15px 0}.layer-specimen span{padding:30px;border:1px solid #C588FF;background:#F2E8FF;color:#582082;border-radius:10px}.layer-specimen span+span{margin-left:-18px;transform:translateY(12px);background:#E5CEFF}.layer-specimen span:last-child{transform:translateY(24px);background:#C588FF}.theme-specimen{display:grid;grid-template-columns:1fr 1fr;gap:16px}.theme-specimen>div{display:grid;gap:15px;padding:24px;border-radius:12px;background:#fafafa;color:#181818}.theme-specimen>div:last-child{background:#292929;color:#fafafa}.theme-specimen small,.theme-specimen span{color:inherit;font-size:12px}.copy-specimen{display:grid;gap:15px}.copy-specimen b{font-size:22px;line-height:1.4}.copy-specimen small{font-size:11px;letter-spacing:.05em}.copy-specimen span{font-size:13px}.token-specimen{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:13px}.token-specimen>span:first-child:empty{width:35px;height:35px;border-radius:9px}.dbtn{border-radius:12px!important;min-height:60px;font-size:17px!important;font-weight:700!important}.page:focus{outline:none}
@media(max-width:1100px){.topbar{gap:10px;padding:0 16px}.top-nav a{padding:0 9px;font-size:12px}.top-search input{width:110px}}
@media(max-width:900px){.top-nav{display:flex;height:44px;position:absolute;top:60px;left:0;right:0;padding:0 12px;background:var(--bg);border-bottom:1px solid var(--hairline)}:root{--hh:104px}.topbar{height:104px;padding-bottom:44px}.top-nav a{flex-shrink:0}.sidebar{top:104px}.page{padding-top:30px}.top-search{margin-left:auto}.menu-btn{display:block}.sidebar.open .nav-group>.gl{display:block}}
@media(max-width:600px){.catalog-grid{gap:24px 14px}.catalog-art{height:150px}.catalog-art>img{width:110px;height:110px}.catalog-art .catalog-symbol{width:34px;height:34px}.catalog-card strong{font-size:15px}.catalog-card p{font-size:12px}.doc-preview{padding:24px 18px}.type-big{font-size:50px}.type-big>span{font-size:15px}.mini-shapes{gap:6px}.mini-shapes i{width:34px;height:45px}.mini-message{padding:12px;font-size:11px}.mini-grid{width:105px;height:105px}.radius-specimen i{width:46px;height:46px}.theme-specimen>div{padding:18px 12px}.mini-theme i{padding:15px}.page h1{font-size:30px}.motion-specimen>span{display:block;margin:12px 0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-track i,.catalog-art{transition:none}.motion-track.pressed i{transform:none}}
.zstack{max-width:100%;overflow-x:auto}.page table{display:block;max-width:100%;overflow-x:auto}.page code{overflow-wrap:anywhere}.page .steps,.page .step{min-width:0;overflow-wrap:anywhere}.page [class*=road]{min-width:0;overflow-wrap:anywhere}#page-roadmap span{min-width:0;overflow-wrap:anywhere;white-space:normal}#page-color .sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px}#page-color .sg-swatches>p{margin:0;font-size:12px}#page-color .sg-swatches i{width:100%;height:62px;display:block;border-radius:8px;margin:0 0 8px}.catalog-card:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:12px}
.guide-jumps{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 40px}.guide-jumps button{font:inherit;color:var(--ink);cursor:pointer;padding:8px 16px;background:var(--surface-soft);border:1px solid var(--hairline);border-radius:8px;font-size:13px}.guide-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.guide-colors>div{display:grid;gap:7px;font-size:13px}.guide-colors i{display:block;height:110px;background:var(--swatch);border-radius:12px;margin-bottom:7px}.guide-colors span,.guide-colors code{font-size:12px;color:var(--ink-soft)}.guide-note{padding:16px 20px;border-left:3px solid var(--accent);background:var(--accent-bg);font-size:14px}.guide-link{display:block;margin:18px 0;font-size:14px;font-weight:550}.guide-type{display:grid;gap:16px;background:var(--surface-soft);padding:32px;border-radius:12px;margin:24px 0}.guide-type b{font-size:clamp(22px,3vw,34px);line-height:1.4}.guide-type small,.guide-type span{font-size:13px;color:var(--ink-soft)}.guide-button-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.guide-example{height:200px;background:var(--surface-soft);border-radius:12px;display:grid;place-items:center}.guide-button-pair p{font-size:14px}.guide-button-pair small{font-size:12px;color:var(--ink-soft)}.guide-action-art{width:125px;height:125px;display:grid;place-items:center;border-radius:27%;background:linear-gradient(135deg,#AA4AF4 36%,#6655D2)}.guide-action-art img{width:32%;filter:brightness(0) invert(1)}.guide-steps{padding-left:22px}.guide-steps li{padding:10px 0 16px 8px}.guide-steps span{display:block;color:var(--ink-soft);font-size:14px;margin-top:5px}.guide-status{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:8px 0}.guide-status p{font-size:14px}.guide-status b{display:inline-block;min-width:140px}.guide-details{border-bottom:1px solid var(--hairline);padding:20px 0}.guide-details summary{font-size:15px;font-weight:600;cursor:pointer}.guide-details>p{font-size:13px;color:var(--ink-soft)}.guide-details dd{margin-left:0;margin-bottom:16px}#page-mapping h2{scroll-margin-top:100px}@media(max-width:600px){.guide-colors{gap:10px}.guide-colors i{height:80px}.guide-colors b{font-size:12px}.guide-button-pair{gap:14px}.guide-example{height:150px}.guide-example .sample-button{font-size:14px;padding:0 20px}.guide-action-art{width:100px;height:100px}.guide-status b{display:block;margin-bottom:5px}}
.handle-feature{display:grid;gap:6px;padding:22px 24px;margin:24px 0;background:var(--accent-bg);border:1px solid var(--hairline);border-radius:12px}.handle-feature span{font-size:13px;color:var(--ink-soft)}.handle-picker{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.handle-picker button{font:inherit;font-size:12px;padding:10px 14px;border:1px solid var(--hairline);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer}.handle-picker button[aria-pressed=true]{border-color:var(--accent-text);background:var(--accent-bg)}.handle-picker i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}.handle-comparison{display:grid;gap:24px}.handle-comparison section{padding:24px;background:var(--surface-soft);border-radius:14px}.handle-comparison h3{margin:0 0 6px}.handle-comparison p{font-size:13px;color:var(--ink-soft);margin:0 0 22px}.profile-handle{display:flex;align-items:center;gap:8px;min-height:64px;box-sizing:border-box;border-radius:16px;padding:8px;color:#171719;box-shadow:0 3px 8px #0000000f;border:0}.profile-handle.representative{background:linear-gradient(to bottom,#ffffff2e,transparent 22%),linear-gradient(to bottom,var(--handle-top),var(--handle-bottom))}.profile-handle.life{background:var(--handle-life)}.handle-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#F1F2F4;flex-shrink:0}.handle-avatar img{width:24px}.profile-handle b{display:block;font-size:16px;font-weight:500;line-height:1.45;letter-spacing:-.01em}.profile-handle div>span{display:block;font-size:12px;opacity:.85;margin-top:2px}.handle-tools{margin-left:auto;white-space:nowrap;font-size:20px;padding:0 5px}.handle-recipe{font-size:12px;color:var(--ink-soft);overflow-wrap:anywhere}.handle-mini{display:grid;gap:18px;width:70%}.handle-mini i{height:48px;border-radius:12px;background:linear-gradient(var(--profile-purple-pink-top),var(--profile-purple-pink-bottom))}.handle-mini i:last-child{background:var(--profile-purple-pink-life)}@media(max-width:600px){.handle-comparison section{padding:18px 12px}.handle-tools{font-size:17px}}

/* Splup profile action contract */
.ph-state-list{display:grid;gap:24px}.ph-state-card{padding:20px;border:0;border-radius:16px;background:var(--surface-soft)}.ph-state-card h3{margin:0 0 16px}.ph-state-card>p{font-size:13px;color:var(--ink-soft);margin:12px 0 0}.ph-state-card .profile-handle{max-width:420px}.ph-identity,.profile-handle>div:not(.ph-actions){min-width:0;flex:1}.ph-identity b,.ph-identity span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ph-actions{display:flex;gap:4px;align-items:center;flex-shrink:0;margin-left:auto}.ph-actions button,.ph-status{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#171719;font-size:12px;font-weight:600;font-family:inherit;white-space:nowrap;padding:0 10px}.ph-actions button{cursor:pointer;font-family:inherit;font-size:12px;font-weight:600}.ph-actions img{width:20px;height:20px}.ph-actions .ph-primary{background:#51349A;color:white;padding:0 12px}.ph-status{background:#ffffff80;padding:0 12px}.ph-actions .ph-disabled{background:#ffffff66;color:#555863;cursor:not-allowed}.ph-actions button:focus-visible{outline:2px solid #171719;outline-offset:2px}.ph-actions button:not(:disabled):active{transform:scale(.97)}.ph-feedback{padding:14px;background:var(--surface-soft);border-radius:10px;min-height:48px}.profile-action-guide{margin-top:40px}.ph-status img{width:16px;height:16px}@media(max-width:480px){.ph-state-card{padding:12px}.ph-state-card .profile-handle{gap:6px}.ph-actions button,.ph-status{padding:0 8px}.ph-actions .ph-primary{padding:0 10px}.ph-state-card .handle-avatar{width:40px;height:40px}}

:root{--profile-action-background:#F7F7FA;--profile-action-height:44px;--profile-action-radius:12px;--profile-action-gap:4px}.ph-actions{gap:var(--profile-action-gap)}.ph-actions .ph-primary{background:var(--profile-action-background)}.ph-actions button,.ph-status{height:var(--profile-action-height);border-radius:var(--profile-action-radius)}

.ph-actions .ph-primary{background:var(--profile-action-background);color:#454650}.ph-actions .ph-circle{width:44px;min-width:44px;height:44px;padding:0;border-radius:50%;background:#F0EDFF;color:#6655D2}.ph-actions .ph-circle.ph-disabled{background:#ECECF1}.ph-actions .ph-circle img{width:20px;height:20px;opacity:1}.ph-actions .ph-circle.ph-disabled img{opacity:1}.ph-actions button:disabled{cursor:not-allowed}