.sd-uii-page{--uii-cobalt: #4268f4;--uii-violet: #7c43e8;--uii-mint: #43c4a4;--uii-coral: #ff786a}.sd-uii-page img{display:block;max-width:100%;height:auto}.sd-uii-page .sd-guide-section h2{max-width:820px}.sd-uii-opening{overflow:visible}.sd-uii-method-note{padding:14px 16px;border-left:3px solid var(--guide-blue);margin-top:22px;color:var(--guide-muted);font-size:13px;line-height:1.6;background:var(--guide-surface-soft)}.sd-uii-method-note strong{color:var(--guide-ink)}.sd-uii-opening-board{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:12px;overflow:visible;margin-top:38px;padding:26px 24px 34px;border:1px solid color-mix(in srgb,var(--uii-violet) 22%,var(--guide-border));border-radius:24px;background:linear-gradient(rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(145deg,#2d50c8,#74d 54%,#3dbb9e);background-size:25px 25px,25px 25px,auto}.sd-uii-opening-board>a,.sd-uii-screen-pair figure>a,.sd-uii-color-stage figure>a,.sd-uii-state-sequence>div>a,.sd-uii-state-grid article>a,.sd-uii-motion-grid article>a,.sd-uii-pattern-grid article>a,.sd-uii-process-list>li>a{position:relative;z-index:1;display:block;min-width:0;border-radius:5px;outline:none;scale:1;translate:0 0;transition:scale .18s ease,translate .18s ease,rotate .18s ease,opacity .18s ease,filter .18s ease,box-shadow .18s ease}.sd-uii-opening-board>a:nth-child(1){rotate:-2deg;translate:0 8px}.sd-uii-opening-board>a:nth-child(2){rotate:1deg;translate:0 -7px}.sd-uii-opening-board>a:nth-child(3){z-index:2;rotate:-1deg;translate:0 4px}.sd-uii-opening-board>a:nth-child(4){rotate:2deg;translate:0 -3px}.sd-uii-opening-board>a:hover,.sd-uii-opening-board>a:focus-visible,.sd-uii-screen-pair figure>a:hover,.sd-uii-screen-pair figure>a:focus-visible,.sd-uii-color-stage figure>a:hover,.sd-uii-color-stage figure>a:focus-visible,.sd-uii-state-sequence>div>a:hover,.sd-uii-state-sequence>div>a:focus-visible,.sd-uii-state-grid article>a:hover,.sd-uii-state-grid article>a:focus-visible,.sd-uii-motion-grid article>a:hover,.sd-uii-motion-grid article>a:focus-visible,.sd-uii-pattern-grid article>a:hover,.sd-uii-pattern-grid article>a:focus-visible,.sd-uii-process-list>li>a:hover,.sd-uii-process-list>li>a:focus-visible{z-index:40;outline:3px solid color-mix(in srgb,var(--uii-violet) 42%,transparent);outline-offset:4px;box-shadow:0 25px 52px #16193e47;rotate:0deg;scale:1.07;translate:0 -8px}.sd-uii-opening-board:has(>a:hover)>a:not(:hover),.sd-uii-opening-board:has(>a:focus-visible)>a:not(:focus-visible),.sd-uii-screen-pair:has(figure>a:hover) figure:not(:has(>a:hover)),.sd-uii-color-stage:has(figure>a:hover) figure:not(:has(>a:hover)),.sd-uii-state-grid:has(article>a:hover) article:not(:has(>a:hover)),.sd-uii-motion-grid:has(article>a:hover) article:not(:has(>a:hover)){filter:saturate(.78);opacity:.74}.sd-uii-opening-board img,.sd-uii-screen-pair img,.sd-uii-color-stage img,.sd-uii-state-sequence img,.sd-uii-state-grid article>a img,.sd-uii-motion-grid article>a img,.sd-uii-pattern-grid article>a img,.sd-uii-process-list>li>a img{width:100%;border:1px solid rgb(255 255 255 / 52%);border-radius:5px;background:#fff;box-shadow:0 16px 34px #15193e38}.sd-uii-definition-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:30px}.sd-uii-definition-grid>div,.sd-uii-question-grid article,.sd-uii-analysis-grid>div,.sd-uii-color-notes article,.sd-uii-translation-grid article,.sd-uii-checklist-grid>div{padding:19px;border:1px solid var(--guide-border);border-radius:16px;background:var(--guide-surface-soft)}.sd-uii-definition-grid span,.sd-uii-question-grid span,.sd-uii-reference-row>div:first-child>span,.sd-uii-analysis-grid span,.sd-uii-feature-copy>span,.sd-uii-color-notes span,.sd-uii-state-sequence article>span,.sd-uii-state-grid article>div>span,.sd-uii-motion-grid article>div>span,.sd-uii-density-study>div:last-child>span,.sd-uii-translation-grid span,.sd-uii-process-list>li>div>span,.sd-uii-checklist-grid span{color:var(--guide-blue);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.sd-uii-definition-grid h3{margin:14px 0 0;color:var(--guide-ink);font-size:18px}.sd-uii-definition-grid p,.sd-uii-question-grid p,.sd-uii-analysis-grid p,.sd-uii-color-notes p,.sd-uii-translation-grid p{margin:8px 0 0;color:var(--guide-muted);font-size:13px;line-height:1.58}.sd-uii-question-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:34px}.sd-uii-question-grid article{min-height:188px}.sd-uii-question-grid h3,.sd-uii-color-notes h3,.sd-uii-translation-grid h3{margin:20px 0 0;color:var(--guide-ink);font-family:Grifter,Rethink Sans,sans-serif;font-size:20px;line-height:1.15;letter-spacing:.006em}.sd-uii-reference-row,.sd-uii-feature-row,.sd-uii-density-study{display:grid;grid-template-columns:minmax(0,.87fr) minmax(390px,1.13fr);align-items:center;gap:clamp(28px,5vw,54px);margin-top:42px;padding-top:38px;border-top:1px solid var(--guide-border)}.sd-uii-reference-row h3,.sd-uii-feature-copy h3,.sd-uii-state-sequence article h3,.sd-uii-state-grid h3,.sd-uii-motion-grid h3,.sd-uii-density-study>div:last-child h3,.sd-uii-pattern-grid h3,.sd-uii-process-list h3{margin:12px 0 0;color:var(--guide-ink);font-family:Grifter,Rethink Sans,sans-serif;font-size:clamp(24px,3vw,33px);line-height:1.08;letter-spacing:.006em}.sd-uii-reference-row>div:first-child>p,.sd-uii-feature-copy>p,.sd-uii-state-sequence article>p,.sd-uii-state-grid article>div>p,.sd-uii-motion-grid article>div>p,.sd-uii-density-study>div:last-child>p,.sd-uii-pattern-grid article>div>p,.sd-uii-process-list>li>div>p{margin:15px 0 0;color:var(--guide-muted);font-size:15px;line-height:1.68}.sd-uii-screen-pair{position:relative;display:grid;min-height:470px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;overflow:visible;padding:22px 22px 34px;border-radius:24px;background:linear-gradient(rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(145deg,#3157cc,#7347de 58%,#40bda0);background-size:24px 24px,24px 24px,auto}.sd-uii-screen-pair figure,.sd-uii-color-stage figure{min-width:0;margin:0;transition:opacity .18s ease,filter .18s ease}.sd-uii-screen-pair figure:nth-child(2){translate:0 24px}.sd-uii-screen-pair figcaption,.sd-uii-color-stage figcaption{padding:10px 2px 0;font-size:11px;text-align:center}.sd-uii-screen-pair figcaption a,.sd-uii-color-stage figcaption a{color:#ffffffe0;text-decoration:none}.sd-uii-analysis-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:34px}.sd-uii-analysis-grid>div{min-height:230px}.sd-uii-analysis-grid h3{margin:22px 0 0;color:var(--guide-ink);font-size:18px;line-height:1.25}.sd-uii-analysis-grid ul{padding:0;margin:22px 0 0 18px;color:var(--guide-muted);font-size:13px;line-height:1.62}.sd-uii-feature-copy .sd-guide-text-link,.sd-uii-state-sequence .sd-guide-text-link{margin-top:20px}.sd-uii-color-stage{display:grid;min-height:440px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:14px;margin-top:48px;padding:24px 24px 36px;border-radius:24px;background:linear-gradient(rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(145deg,#ef735f,#8a4fe2 52%,#3ca8f0);background-size:25px 25px,25px 25px,auto}.sd-uii-color-stage figure:nth-child(2){translate:0 22px}.sd-uii-color-notes,.sd-uii-translation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}.sd-uii-color-notes article,.sd-uii-translation-grid article{min-height:210px}.sd-uii-state-sequence{display:grid;grid-template-columns:minmax(0,.62fr) 44px minmax(0,.62fr) minmax(260px,.9fr);align-items:center;gap:16px;margin-top:38px;padding:24px;border-radius:24px;background:linear-gradient(rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(145deg,#253b9f,#7145df 60%,#3eb99d);background-size:24px 24px,24px 24px,auto}.sd-uii-state-sequence>div>span{display:block;margin-top:10px;color:#ffffffd1;font-size:11px;font-weight:700;text-align:center}.sd-uii-state-connector{display:grid;place-items:center;color:#fff}.sd-uii-state-connector .sd-guide-arrow-icon{width:17px;height:17px}.sd-uii-state-sequence article{padding:24px;border-radius:18px;background:#0b0c2594;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.sd-uii-state-sequence article>span,.sd-uii-state-sequence article h3,.sd-uii-state-sequence article>p,.sd-uii-state-sequence article .sd-guide-text-link{color:#fff}.sd-uii-state-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}.sd-uii-state-grid article{display:flex;min-width:0;flex-direction:column;overflow:visible;border:1px solid var(--guide-border);border-radius:20px;background:var(--guide-surface-soft);transition:opacity .18s ease,filter .18s ease}.sd-uii-state-grid article>a{width:calc(100% - 32px);margin:16px auto 0}.sd-uii-state-grid article>div{padding:22px}.sd-uii-state-grid h3{font-size:23px}.sd-uii-inline-pro{margin-top:40px}.sd-uii-motion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}.sd-uii-motion-grid article{display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,1fr);align-items:center;gap:24px;padding:20px;border:1px solid var(--guide-border);border-radius:22px;background:var(--guide-surface-soft);transition:opacity .18s ease,filter .18s ease}.sd-uii-motion-grid h3{font-size:24px}.sd-uii-density-study{grid-template-columns:minmax(390px,1.1fr) minmax(0,.9fr)}.sd-uii-density-study>.sd-uii-screen-pair{order:1}.sd-uii-density-study>div:last-child{order:2}.sd-uii-pattern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}.sd-uii-pattern-grid article{display:grid;grid-template-columns:minmax(120px,.6fr) minmax(0,1fr);align-items:center;gap:20px;padding:18px;border:1px solid var(--guide-border);border-radius:20px;background:var(--guide-surface-soft)}.sd-uii-pattern-grid h3{font-size:24px}.sd-uii-pattern-grid article>div>a{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--guide-blue);font-size:13px;font-weight:700;text-decoration:none}.sd-uii-pattern-grid article>div>a:hover,.sd-uii-pattern-grid article>div>a:focus-visible{text-decoration:underline}.sd-uii-process-list{padding:0;margin:38px 0 0;list-style:none}.sd-uii-process-list>li{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:34px;padding:28px 0;border-top:1px solid var(--guide-border)}.sd-uii-process-list>li:last-child{border-bottom:1px solid var(--guide-border)}.sd-uii-process-list h3{font-size:28px}.sd-uii-process-list>li>div>strong{display:block;margin-top:16px;color:var(--guide-ink);font-size:13px;line-height:1.5}.sd-uii-checklist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:34px}.sd-uii-checklist-grid>div{display:grid;min-height:120px;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:12px}.sd-uii-checklist-grid p{margin:0;color:var(--guide-ink);font-size:14px;line-height:1.58}@media(max-width:980px){.sd-uii-reference-row,.sd-uii-feature-row,.sd-uii-density-study{grid-template-columns:1fr}.sd-uii-state-sequence{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}.sd-uii-state-sequence article{grid-column:1 / -1}.sd-uii-motion-grid article,.sd-uii-pattern-grid article{grid-template-columns:minmax(120px,.52fr) minmax(0,1fr)}}@media(max-width:760px){.sd-uii-opening-board,.sd-uii-definition-grid,.sd-uii-state-grid,.sd-uii-color-notes,.sd-uii-translation-grid,.sd-uii-analysis-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-uii-opening-board{gap:10px;padding:18px 16px 26px}.sd-uii-opening-board>a:nth-child(n){rotate:0deg;translate:0 0}.sd-uii-question-grid,.sd-uii-motion-grid,.sd-uii-pattern-grid,.sd-uii-checklist-grid{grid-template-columns:1fr}.sd-uii-color-stage{min-height:0;gap:9px;padding:18px 16px 26px}.sd-uii-state-sequence{gap:10px;padding:16px}.sd-uii-process-list>li{grid-template-columns:130px minmax(0,1fr);gap:22px}}@media(max-width:520px){.sd-uii-definition-grid,.sd-uii-analysis-grid,.sd-uii-color-notes,.sd-uii-translation-grid{grid-template-columns:1fr}.sd-uii-opening-board{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-uii-question-grid article,.sd-uii-analysis-grid>div,.sd-uii-color-notes article,.sd-uii-translation-grid article{min-height:0}.sd-uii-screen-pair{min-height:0;gap:9px;padding:16px 16px 26px}.sd-uii-screen-pair figure:nth-child(2),.sd-uii-color-stage figure:nth-child(2){translate:0 12px}.sd-uii-color-stage{grid-template-columns:repeat(3,minmax(0,1fr))}.sd-uii-color-stage figcaption{font-size:9px}.sd-uii-state-sequence{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}.sd-uii-state-sequence article{padding:20px}.sd-uii-state-grid{grid-template-columns:1fr}.sd-uii-motion-grid article,.sd-uii-pattern-grid article{grid-template-columns:110px minmax(0,1fr);gap:16px;padding:14px}.sd-uii-motion-grid h3,.sd-uii-pattern-grid h3{font-size:21px}.sd-uii-process-list>li{grid-template-columns:100px minmax(0,1fr);gap:16px}.sd-uii-process-list h3{font-size:23px}}@media(prefers-reduced-motion:reduce){.sd-uii-opening-board>a,.sd-uii-screen-pair figure>a,.sd-uii-color-stage figure>a,.sd-uii-state-sequence>div>a,.sd-uii-state-grid article>a,.sd-uii-motion-grid article>a,.sd-uii-pattern-grid article>a,.sd-uii-process-list>li>a{transition:none}.sd-uii-opening-board>a:hover,.sd-uii-opening-board>a:focus-visible,.sd-uii-screen-pair figure>a:hover,.sd-uii-screen-pair figure>a:focus-visible,.sd-uii-color-stage figure>a:hover,.sd-uii-color-stage figure>a:focus-visible,.sd-uii-state-sequence>div>a:hover,.sd-uii-state-sequence>div>a:focus-visible,.sd-uii-state-grid article>a:hover,.sd-uii-state-grid article>a:focus-visible,.sd-uii-motion-grid article>a:hover,.sd-uii-motion-grid article>a:focus-visible,.sd-uii-pattern-grid article>a:hover,.sd-uii-pattern-grid article>a:focus-visible,.sd-uii-process-list>li>a:hover,.sd-uii-process-list>li>a:focus-visible{scale:1;translate:0 0}}