*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#1a1a1a;background:#faf9f7}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root{isolation:isolate}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d8d4cf;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#c8c4bf}::selection{background:#1a1a1a1a;color:#1a1a1a}:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#faf9f7}.loading-spinner{width:40px;height:40px;border:3px solid #e8e4df;border-top-color:#1a1a1a;border-radius:50%;animation:spin .8s linear infinite}.code-block{background:#1a1a1a;color:#e8e4df;border-radius:12px;padding:20px 24px;font-family:SF Mono,Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .3s ease-out}.animate-slideUp{animation:slideUp .4s ease-out}@media print{.sidebar,.mobile-header{display:none!important}.main-content{margin-left:0!important}.content-wrapper{padding:0!important}}.layout{display:flex;min-height:100vh;background:#faf9f7}.sidebar{width:280px;background:#fff;border-right:1px solid #e8e4df;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .3s ease}.sidebar-header{padding:24px;border-bottom:1px solid #e8e4df;display:flex;align-items:center;justify-content:space-between}.brand-logo{display:flex;align-items:center;gap:12px}.logo-mark-small{width:44px;height:44px;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:10px;display:flex;align-items:center;justify-content:center}.logo-mark-small .kanji{color:#faf9f7;font-size:16px;font-weight:300;letter-spacing:1px}.brand-text{display:flex;flex-direction:column}.brand-name{font-size:18px;font-weight:500;color:#1a1a1a;letter-spacing:1px}.brand-subtitle{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:2px}.mobile-close{display:none;background:none;border:none;cursor:pointer;color:#666;padding:4px}.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#555;text-decoration:none;border-radius:10px;font-size:14px;font-weight:450;transition:all .2s ease}.nav-item:hover{background:#f5f3f0;color:#1a1a1a}.nav-item.active{background:#1a1a1a;color:#faf9f7}.sidebar-footer{padding:20px 24px;border-top:1px solid #e8e4df}.logout-button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;background:none;border:1px solid #e8e4df;border-radius:10px;color:#666;font-size:14px;cursor:pointer;transition:all .2s ease;font-family:inherit}.logout-button:hover{background:#f5f3f0;color:#1a1a1a;border-color:#d8d4cf}.copyright{margin:16px 0 0;font-size:11px;color:#aaa;text-align:center}.main-content{flex:1;margin-left:280px;min-height:100vh}.mobile-header{display:none;padding:16px 20px;background:#fff;border-bottom:1px solid #e8e4df;position:sticky;top:0;z-index:50}.menu-toggle{background:none;border:none;cursor:pointer;color:#1a1a1a;padding:4px}.mobile-brand{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:500;color:#1a1a1a}.kanji-small{font-size:14px;font-weight:300;background:#1a1a1a;color:#faf9f7;padding:4px 8px;border-radius:4px}.content-wrapper{padding:48px;max-width:1400px;margin:0 auto}.sidebar-overlay{display:none;position:fixed;inset:0;background:#0000004d;z-index:90}@media(max-width:1024px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.mobile-close{display:block}.main-content{margin-left:0}.mobile-header{display:flex;align-items:center;gap:16px}.content-wrapper{padding:32px 20px}.sidebar-overlay{display:block}}.page-header{margin-bottom:48px}.page-header h1{font-size:40px;font-weight:300;color:#1a1a1a;margin:0 0 12px;letter-spacing:-.5px}.page-header p{font-size:18px;color:#666;margin:0;line-height:1.6;max-width:700px}.section{margin-bottom:64px}.section-header{margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid #e8e4df}.section-header h2{font-size:24px;font-weight:500;color:#1a1a1a;margin:0 0 8px}.section-header p{font-size:15px;color:#666;margin:0}.card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px;transition:all .2s ease}.card:hover{border-color:#d8d4cf;box-shadow:0 8px 24px #0000000a}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}@media(max-width:1200px){.grid-4{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.code-block{background:#1a1a1a;color:#e8e4df;border-radius:12px;padding:20px 24px;font-family:SF Mono,Menlo,Monaco,monospace;font-size:13px;line-height:1.6;overflow-x:auto}.code-inline{background:#f5f3f0;color:#1a1a1a;padding:2px 8px;border-radius:4px;font-family:SF Mono,Menlo,Monaco,monospace;font-size:13px}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#faf9f7;position:relative;overflow:hidden}.login-background{position:absolute;inset:0;overflow:hidden;pointer-events:none}.gradient-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4}.orb-1{width:600px;height:600px;background:linear-gradient(135deg,#e8e4df,#d4cfc8);top:-200px;right:-100px;animation:float 20s ease-in-out infinite}.orb-2{width:400px;height:400px;background:linear-gradient(135deg,#f0ebe6,#e0d8cf);bottom:-100px;left:-100px;animation:float 15s ease-in-out infinite reverse}.orb-3{width:300px;height:300px;background:linear-gradient(135deg,#d8d0c8,#c8bfb5);top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 10s ease-in-out infinite}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(30px,20px)}}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.5}}.login-container{position:relative;z-index:1;width:100%;max-width:400px;padding:48px;background:#fffc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;box-shadow:0 4px 6px -1px #0000000d,0 10px 15px -3px #0000000d,0 20px 25px -5px #00000008;border:1px solid rgba(255,255,255,.6);margin:20px}.login-header{text-align:center;margin-bottom:40px}.logo-mark{width:80px;height:80px;margin:0 auto 20px;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px #00000026}.logo-mark .kanji{color:#faf9f7;font-size:28px;font-weight:300;letter-spacing:2px}.login-header h1{font-size:32px;font-weight:300;color:#1a1a1a;margin:0 0 8px;letter-spacing:4px}.login-header .subtitle{font-size:14px;color:#888;text-transform:uppercase;letter-spacing:3px;margin:0}.login-form{display:flex;flex-direction:column;gap:16px}.login-form.shake{animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}}.input-group{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:16px;color:#999;pointer-events:none}.input-group input{width:100%;padding:16px 48px;font-size:16px;border:2px solid #e8e4df;border-radius:12px;background:#fffc;color:#1a1a1a;transition:all .2s ease;font-family:inherit}.input-group input::placeholder{color:#aaa}.input-group input:focus{outline:none;border-color:#1a1a1a;background:#fff}.toggle-password{position:absolute;right:16px;background:none;border:none;color:#999;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.toggle-password:hover{color:#1a1a1a}.error-message{display:flex;align-items:center;gap:8px;color:#dc3545;font-size:14px;padding:12px 16px;background:#dc354514;border-radius:8px}.login-button{padding:16px 32px;font-size:16px;font-weight:500;color:#faf9f7;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;font-family:inherit;margin-top:8px}.login-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0003}.login-button:active{transform:translateY(0)}.login-footer{text-align:center;margin-top:32px;font-size:12px;color:#999}.overview-page{max-width:1200px;margin:0 auto}.hero-section{text-align:center;padding:60px 0 80px}.hero-logo{margin-bottom:32px}.hero-logo-mark{width:120px;height:120px;margin:0 auto;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 60px #00000026}.hero-logo-mark .kanji{color:#faf9f7;font-size:40px;font-weight:300;letter-spacing:4px}.hero-title{font-size:64px;font-weight:200;color:#1a1a1a;margin:0 0 12px;letter-spacing:8px}.hero-subtitle{font-size:18px;color:#666;margin:0 0 40px;text-transform:uppercase;letter-spacing:4px}.hero-tagline{font-size:20px;font-style:italic;color:#555;line-height:1.6;max-width:600px;margin:0 auto}.hero-attribution{display:block;margin-top:16px;font-size:14px;color:#888}.intro-section{margin-bottom:80px}.intro-card{background:#fff;border:1px solid #e8e4df;border-radius:20px;padding:48px;max-width:800px;margin:0 auto}.intro-card h2{font-size:28px;font-weight:400;color:#1a1a1a;margin:0 0 24px}.intro-card p{font-size:17px;color:#555;line-height:1.8;margin:0 0 20px}.intro-card p:last-child{margin-bottom:0}.jp-text{font-weight:500;color:#1a1a1a}.principles-section{margin-bottom:80px}.principles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.principle-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:32px;transition:all .3s ease}.principle-card:hover{border-color:#1a1a1a;box-shadow:0 12px 40px #0000000f}.principle-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.principle-icon{width:48px;height:48px;background:#f5f3f0;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#1a1a1a}.principle-titles{display:flex;flex-direction:column}.principle-kanji{font-size:20px;font-weight:300;color:#1a1a1a}.principle-romaji{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#888}.principle-card h3{font-size:20px;font-weight:500;color:#1a1a1a;margin:0 0 12px}.principle-card p{font-size:15px;color:#666;line-height:1.7;margin:0}.quick-links-section{margin-bottom:80px}.quick-links-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.quick-link-card{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e8e4df;border-radius:12px;padding:24px;text-decoration:none;transition:all .2s ease}.quick-link-card:hover{border-color:#1a1a1a;background:#faf9f7}.quick-link-card:hover .quick-link-arrow{transform:translate(4px)}.quick-link-content h3{font-size:16px;font-weight:500;color:#1a1a1a;margin:0 0 4px}.quick-link-content p{font-size:14px;color:#888;margin:0}.quick-link-arrow{color:#888;transition:transform .2s ease}.stats-section{margin-bottom:80px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.stat-card{background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:16px;padding:32px;text-align:center}.stat-value{display:block;font-size:40px;font-weight:300;color:#faf9f7;margin-bottom:8px}.stat-label{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:#faf9f799}.platform-section{margin-bottom:80px}.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.platform-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:32px;text-align:center}.platform-icon{font-size:40px;margin-bottom:16px}.platform-card h3{font-size:18px;font-weight:500;color:#1a1a1a;margin:0 0 8px}.platform-card p{font-size:14px;color:#666;margin:0}.page-footer{text-align:center;padding:48px 0;border-top:1px solid #e8e4df}.page-footer p{font-size:14px;color:#666;margin:0 0 8px}.page-footer .footer-note{font-size:12px;color:#999}@media(max-width:900px){.principles-grid,.quick-links-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.platform-grid{grid-template-columns:1fr}.hero-title{font-size:48px}.intro-card{padding:32px}}@media(max-width:600px){.hero-title{font-size:36px;letter-spacing:4px}.hero-subtitle{font-size:14px}.hero-tagline{font-size:16px}.stats-grid{grid-template-columns:1fr}}.logo-page{max-width:1200px;margin:0 auto}.logo-showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.logo-display{padding:60px 40px;border-radius:16px;display:flex;align-items:center;justify-content:center}.logo-display.light{background:#fff;border:1px solid #e8e4df}.logo-display.dark{background:linear-gradient(135deg,#2c2c2c,#1a1a1a)}.logo-container{display:flex;align-items:center;gap:24px}.logo-mark-large{width:80px;height:80px;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:18px;display:flex;align-items:center;justify-content:center}.logo-mark-large .kanji{color:#faf9f7;font-size:26px;font-weight:300;letter-spacing:2px}.logo-mark-large.inverted{background:#faf9f7}.logo-mark-large.inverted .kanji{color:#1a1a1a}.logo-wordmark{display:flex;flex-direction:column}.wordmark-text{font-size:32px;font-weight:300;color:#1a1a1a;letter-spacing:3px}.wordmark-tagline{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:3px}.logo-wordmark.inverted .wordmark-text{color:#faf9f7}.logo-wordmark.inverted .wordmark-tagline{color:#faf9f799}.mark-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.mark-item{text-align:center}.mark-display{padding:40px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.mark-display.light{background:#fff;border:1px solid #e8e4df}.mark-display.dark{background:linear-gradient(135deg,#2c2c2c,#1a1a1a)}.mark-display.gradient{background:linear-gradient(135deg,#f5f3f0,#e8e4df)}.logo-mark-medium{width:64px;height:64px;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:14px;display:flex;align-items:center;justify-content:center}.logo-mark-medium .kanji{color:#faf9f7;font-size:20px;font-weight:300;letter-spacing:1px}.logo-mark-medium.inverted{background:#faf9f7}.logo-mark-medium.inverted .kanji{color:#1a1a1a}.logo-mark-medium.outline{background:transparent;border:2px solid #1a1a1a}.logo-mark-medium.outline .kanji{color:#1a1a1a}.logo-mark-medium.monochrome{background:#666}.mark-label{font-size:13px;color:#888}.size-grid{display:flex;align-items:flex-end;justify-content:center;gap:48px;padding:40px;background:#fff;border:1px solid #e8e4df;border-radius:16px}.size-display{display:flex;align-items:center;justify-content:center}.logo-mark-size{background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:18%;display:flex;align-items:center;justify-content:center}.logo-mark-size .kanji{color:#faf9f7;font-size:24px;font-weight:300}.logo-mark-size.minimum{outline:2px dashed #dc3545;outline-offset:4px}.size-info{text-align:center}.size-name{display:block;font-size:14px;font-weight:500;color:#1a1a1a}.size-value{font-size:12px;color:#888}.clearspace-demo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.clearspace-box{position:relative;padding:80px;background:#fff;border:1px solid #e8e4df;border-radius:16px;display:flex;align-items:center;justify-content:center}.clearspace-logo{position:relative;z-index:1}.clearspace-indicator{position:absolute;font-size:12px;font-weight:500;color:#dc3545;background:#dc35451a;padding:4px 8px;border-radius:4px}.clearspace-indicator.top{top:40px;left:50%;transform:translate(-50%)}.clearspace-indicator.right{right:40px;top:50%;transform:translateY(-50%)}.clearspace-indicator.bottom{bottom:40px;left:50%;transform:translate(-50%)}.clearspace-indicator.left{left:40px;top:50%;transform:translateY(-50%)}.clearspace-note p{font-size:15px;color:#555;line-height:1.7}.usage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.usage-card{padding:32px;border-radius:16px}.usage-card.correct{background:#28a7450f;border:1px solid rgba(40,167,69,.2)}.usage-card.incorrect{background:#dc35450f;border:1px solid rgba(220,53,69,.2)}.usage-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.usage-card.correct .usage-icon{background:#28a74526;color:#28a745}.usage-card.incorrect .usage-icon{background:#dc354526;color:#dc3545}.usage-card h3{font-size:18px;font-weight:500;margin:0 0 16px}.usage-card.correct h3{color:#28a745}.usage-card.incorrect h3{color:#dc3545}.usage-card ul{margin:0;padding:0;list-style:none}.usage-card li{font-size:14px;color:#555;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}.usage-card li:last-child{border-bottom:none}.misuse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.misuse-item{text-align:center}.misuse-display{padding:40px;background:#fff;border:2px dashed #dc3545;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative}.misuse-display:after{content:"✕";position:absolute;top:8px;right:12px;color:#dc3545;font-size:14px;font-weight:700}.logo-mark-misuse{width:64px;height:64px;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:14px;display:flex;align-items:center;justify-content:center}.logo-mark-misuse .kanji{color:#faf9f7;font-size:20px;font-weight:300}.misuse-display.stretched .logo-mark-misuse{transform:scaleX(1.5)}.misuse-display.rotated .logo-mark-misuse{transform:rotate(25deg)}.misuse-display.shadowed .logo-mark-misuse{box-shadow:0 0 30px #ff000080}.misuse-display.recolored .logo-mark-misuse{background:linear-gradient(135deg,#ff6b6b,#ee5a5a)}.misuse-label{font-size:13px;color:#dc3545}.app-icon-grid{display:flex;align-items:flex-end;justify-content:center;gap:40px;padding:48px;background:#fff;border:1px solid #e8e4df;border-radius:16px}.app-icon-item{text-align:center}.app-icon{background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:22%;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 10px 30px #00000026}.app-icon .kanji{color:#faf9f7;font-weight:300}.app-icon-label{font-size:12px;color:#888}.download-cta{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:16px;padding:32px 40px}.download-content h3{font-size:20px;font-weight:500;color:#faf9f7;margin:0 0 8px}.download-content p{font-size:14px;color:#faf9f799;margin:0}.download-button{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#faf9f7;color:#1a1a1a;border:none;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit}.download-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003}@media(max-width:900px){.logo-showcase,.usage-grid,.clearspace-demo{grid-template-columns:1fr}.mark-grid,.misuse-grid{grid-template-columns:repeat(2,1fr)}.size-grid,.app-icon-grid{flex-wrap:wrap}.download-cta{flex-direction:column;text-align:center;gap:24px}}@media(max-width:600px){.mark-grid,.misuse-grid{grid-template-columns:1fr}}.colors-page{max-width:1200px;margin:0 auto}.color-philosophy{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:40px;max-width:800px}.color-philosophy h2{font-size:24px;font-weight:500;color:#1a1a1a;margin:0 0 16px}.color-philosophy p{font-size:16px;color:#555;line-height:1.8;margin:0}.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.color-grid.semantic{grid-template-columns:repeat(4,1fr)}.color-swatch{background:#fff;border:1px solid #e8e4df;border-radius:12px;overflow:hidden;transition:all .2s ease}.color-swatch:hover{border-color:#1a1a1a;box-shadow:0 8px 24px #0000000f}.swatch-preview{height:100px;position:relative;display:flex;align-items:center;justify-content:center}.swatch-preview.light{border-bottom:1px solid #e8e4df}.copy-button{position:absolute;top:12px;right:12px;width:32px;height:32px;background:#ffffffe6;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;color:#1a1a1a}.swatch-preview.light .copy-button{background:#1a1a1a1a}.color-swatch:hover .copy-button{opacity:1}.copy-button:hover{transform:scale(1.1)}.swatch-info{padding:16px}.swatch-info h4{font-size:13px;font-weight:600;color:#1a1a1a;margin:0 0 8px;font-family:SF Mono,Menlo,monospace}.swatch-hex{display:block;font-size:12px;color:#555;font-family:SF Mono,Menlo,monospace;margin-bottom:4px}.swatch-rgb{display:block;font-size:11px;color:#888;font-family:SF Mono,Menlo,monospace;margin-bottom:12px}.swatch-description{font-size:13px;color:#555;margin:0 0 8px;line-height:1.4}.swatch-usage{display:inline-block;font-size:11px;color:#888;background:#f5f3f0;padding:4px 8px;border-radius:4px}.dark-mode-preview{background:#121212;border-radius:16px;padding:32px}.color-grid.dark-mode .color-swatch{background:#1e1e1e;border-color:#333}.color-grid.dark-mode .swatch-info h4{color:#ebebeb}.color-grid.dark-mode .swatch-hex,.color-grid.dark-mode .swatch-description{color:#aaa}.color-grid.dark-mode .swatch-rgb{color:#666}.color-grid.dark-mode .swatch-usage{background:#2a2a2a;color:#888}.contrast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.contrast-item{background:#fff;border:1px solid #e8e4df;border-radius:12px;overflow:hidden}.contrast-sample{height:80px;display:flex;align-items:center;justify-content:center}.contrast-text{font-size:32px;font-weight:500}.contrast-info{padding:16px;display:flex;flex-direction:column;gap:4px}.contrast-pair{font-size:12px;color:#555;font-family:SF Mono,Menlo,monospace}.contrast-ratio{font-size:14px;font-weight:600;color:#1a1a1a}.contrast-level{display:inline-block;width:fit-content;font-size:11px;font-weight:600;padding:4px 8px;border-radius:4px}.contrast-level.aaa{background:#28a7451a;color:#28a745}.contrast-level.aa{background:#f5a6231a;color:#f5a623}@media(max-width:1200px){.color-grid{grid-template-columns:repeat(3,1fr)}.color-grid.semantic,.contrast-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.color-grid,.color-grid.semantic{grid-template-columns:repeat(2,1fr)}.contrast-grid{grid-template-columns:1fr}}@media(max-width:500px){.color-grid,.color-grid.semantic{grid-template-columns:1fr}}.typography-page{max-width:1200px;margin:0 auto}.typeface-card{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #e8e4df;border-radius:16px;overflow:hidden}.typeface-display{background:#1a1a1a;padding:48px;display:flex;flex-direction:column;gap:16px}.typeface-display.mono{background:#0d1117}.typeface-name{font-size:48px;font-weight:200;color:#faf9f7;margin-bottom:16px}.typeface-name.mono{font-family:SF Mono,Menlo,Monaco,monospace;font-size:36px}.typeface-sample{font-size:16px;color:#faf9f799;letter-spacing:2px}.typeface-display.mono .typeface-sample{font-family:SF Mono,Menlo,Monaco,monospace;letter-spacing:0;font-size:14px}.typeface-info{padding:48px}.typeface-info h3{font-size:24px;font-weight:500;color:#1a1a1a;margin:0 0 16px}.typeface-info p{font-size:15px;color:#555;line-height:1.7;margin:0 0 24px}.typeface-features{display:flex;gap:8px;flex-wrap:wrap}.feature-tag{font-size:12px;color:#555;background:#f5f3f0;padding:6px 12px;border-radius:6px}.weights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.weight-item{background:#fff;border:1px solid #e8e4df;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:16px}.weight-sample{font-size:24px;color:#1a1a1a}.weight-info{display:flex;justify-content:space-between;align-items:center}.weight-name{font-size:14px;color:#555}.weight-value{font-size:12px;color:#888;font-family:SF Mono,Menlo,monospace;background:#f5f3f0;padding:4px 8px;border-radius:4px}.type-scale{display:flex;flex-direction:column;gap:1px;background:#e8e4df;border-radius:16px;overflow:hidden}.type-scale-item{display:grid;grid-template-columns:1fr 1fr;background:#fff;transition:background .2s ease}.type-scale-item:hover{background:#faf9f7}.type-preview{padding:24px 32px;display:flex;align-items:center}.type-sample{color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.style-largeTitle{font-size:34px;font-weight:700}.style-title1{font-size:28px;font-weight:600}.style-title2{font-size:22px;font-weight:600}.style-title3{font-size:20px;font-weight:600}.style-headline{font-size:17px;font-weight:600}.style-body{font-size:17px;font-weight:400}.style-callout{font-size:16px;font-weight:400}.style-subheadline{font-size:15px;font-weight:400}.style-footnote{font-size:13px;font-weight:400}.style-caption1{font-size:12px;font-weight:400}.style-caption2{font-size:11px;font-weight:400}.type-meta{padding:24px 32px;display:flex;flex-direction:column;justify-content:center;gap:8px;border-left:1px solid #e8e4df}.type-name{display:flex;align-items:center;gap:8px}.type-style{font-size:14px;font-weight:600;color:#1a1a1a;font-family:SF Mono,Menlo,monospace}.type-specs{display:flex;gap:16px}.type-spec{font-size:12px;color:#888;font-family:SF Mono,Menlo,monospace}.type-usage{font-size:13px;color:#555}.line-height-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.line-height-item{background:#fff;border:1px solid #e8e4df;border-radius:12px;padding:24px}.line-height-label{display:flex;justify-content:space-between;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e8e4df}.label-name{font-size:14px;font-weight:500;color:#1a1a1a}.label-usage{font-size:12px;color:#888}.line-height-sample{font-size:15px;color:#555;margin:0}.line-height-sample.tight{line-height:1.2}.line-height-sample.normal{line-height:1.4}.line-height-sample.relaxed{line-height:1.6}.dynamic-type-demo{background:#fff;border:1px solid #e8e4df;border-radius:16px;overflow:hidden}.dynamic-type-item{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid #e8e4df;transition:background .2s ease}.dynamic-type-item:last-child{border-bottom:none}.dynamic-type-item:hover{background:#faf9f7}.dynamic-type-item.active{background:#1a1a1a0a}.dt-label{font-size:13px;color:#888;min-width:140px}.dynamic-type-item.active .dt-label{color:#1a1a1a;font-weight:500}.dt-sample{color:#1a1a1a}@media(max-width:900px){.typeface-card{grid-template-columns:1fr}.weights-grid{grid-template-columns:repeat(2,1fr)}.type-scale-item{grid-template-columns:1fr}.type-meta{border-left:none;border-top:1px solid #e8e4df}.line-height-demo{grid-template-columns:1fr}}@media(max-width:600px){.weights-grid{grid-template-columns:1fr}}.spacing-page{max-width:1200px;margin:0 auto}.grid-demo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.grid-visual{position:relative;height:300px;background:#fff;border:1px solid #e8e4df;border-radius:16px;overflow:hidden}.grid-line{position:absolute;background:#e8e4df}.grid-line.horizontal{left:0;right:0;height:1px}.grid-line.vertical{top:0;bottom:0;width:1px}.grid-element{position:absolute;background:#1a1a1a14;border:2px dashed rgba(26,26,26,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#555}.grid-element.icon{background:#1a1a1a;border:none;color:#faf9f7;border-radius:6px}.grid-info h3{font-size:20px;font-weight:500;color:#1a1a1a;margin:0 0 16px}.grid-info p{font-size:15px;color:#555;line-height:1.7;margin:0 0 20px}.grid-info ul{margin:0;padding:0;list-style:none}.grid-info li{font-size:14px;color:#555;padding:8px 0 8px 20px;position:relative}.grid-info li:before{content:"→";position:absolute;left:0;color:#888}.spacing-tokens{display:flex;flex-direction:column;gap:1px;background:#e8e4df;border-radius:16px;overflow:hidden}.spacing-token{display:grid;grid-template-columns:200px 1fr;background:#fff;padding:20px 24px;align-items:center;transition:background .2s ease}.spacing-token:hover{background:#faf9f7}.token-visual{display:flex;align-items:center}.token-bar{height:24px;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:4px}.token-info{display:flex;flex-direction:column;gap:4px}.token-header{display:flex;align-items:center;gap:16px}.token-name{font-size:14px;font-weight:600;color:#1a1a1a;font-family:SF Mono,Menlo,monospace}.token-value{font-size:13px;color:#888;font-family:SF Mono,Menlo,monospace;background:#f5f3f0;padding:2px 8px;border-radius:4px}.token-usage{font-size:13px;color:#555}.practice-demo{display:flex;justify-content:center;padding:60px;background:#f5f3f0;border-radius:16px}.practice-card{position:relative;width:320px;background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 24px #0000000f}.practice-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.practice-avatar{width:40px;height:40px;background:linear-gradient(135deg,#e8e4df,#d8d4cf);border-radius:10px}.practice-title{display:flex;flex-direction:column}.practice-name{font-size:16px;font-weight:500;color:#1a1a1a}.practice-subtitle{font-size:13px;color:#888}.practice-body{font-size:14px;color:#555;line-height:1.6;margin:0 0 24px}.practice-actions{display:flex;gap:12px;justify-content:flex-end}.practice-btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:none;font-family:inherit}.practice-btn.primary{background:#1a1a1a;color:#faf9f7}.practice-btn.secondary{background:#f5f3f0;color:#555}.spacing-annotation{position:absolute;font-size:10px;color:#dc3545;background:#dc35451a;padding:4px 8px;border-radius:4px;white-space:nowrap}.spacing-annotation.top{top:-30px;left:50%;transform:translate(-50%)}.spacing-annotation.side{right:-80px;top:50%;transform:translateY(-50%)}.spacing-annotation.between{bottom:70px;right:-70px}.radius-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}.radius-item{display:flex;flex-direction:column;align-items:center;gap:16px}.radius-preview{width:80px;height:80px;background:linear-gradient(135deg,#2c2c2c,#1a1a1a)}.radius-info{text-align:center;display:flex;flex-direction:column;gap:4px}.radius-name{font-size:14px;font-weight:600;color:#1a1a1a;font-family:SF Mono,Menlo,monospace}.radius-value{font-size:12px;color:#888;font-family:SF Mono,Menlo,monospace}.radius-usage{font-size:12px;color:#555}.squircle-note{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:32px}.squircle-note h3{font-size:18px;font-weight:500;color:#1a1a1a;margin:0 0 12px}.squircle-note>p{font-size:15px;color:#555;line-height:1.7;margin:0 0 24px}.squircle-comparison{display:flex;gap:48px;justify-content:center}.squircle-item{display:flex;flex-direction:column;align-items:center;gap:12px}.squircle-box{width:100px;height:100px;background:linear-gradient(135deg,#e8e4df,#d8d4cf)}.squircle-box.standard,.squircle-box.continuous{border-radius:20px}.squircle-item span{font-size:13px;color:#555}.safe-area-demo{display:flex;justify-content:center;padding:40px}.device-frame{width:280px;height:560px;background:#1a1a1a;border-radius:48px;padding:16px;position:relative}.device-notch{position:absolute;top:16px;left:50%;transform:translate(-50%);width:100px;height:28px;background:#1a1a1a;border-radius:0 0 16px 16px;z-index:10}.device-screen{width:100%;height:100%;background:#faf9f7;border-radius:36px;display:flex;flex-direction:column;overflow:hidden}.safe-area{display:flex;align-items:center;justify-content:center;background:#dc35451a;border:1px dashed #dc3545}.safe-area.top{height:60px}.safe-area.bottom{height:34px}.safe-area span{font-size:10px;color:#dc3545}.content-area{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;color:#888}.device-indicator{position:absolute;bottom:24px;left:50%;transform:translate(-50%);width:120px;height:5px;background:#555;border-radius:3px}@media(max-width:900px){.grid-demo{grid-template-columns:1fr}.radius-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.radius-grid{grid-template-columns:repeat(2,1fr)}.practice-demo{padding:40px 20px}.practice-card{width:100%}}.components-page{max-width:1200px;margin:0 auto}.component-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.component-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px}.component-card h3{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 8px;font-family:SF Mono,Menlo,monospace}.component-card p{font-size:14px;color:#666;margin:0 0 20px}.component-preview{padding:24px;background:#faf9f7;border-radius:12px;display:flex;flex-direction:column;gap:8px}.component-preview.icons{flex-direction:row;gap:16px;color:#1a1a1a}.component-preview.dividers{padding:16px 24px}.divider-demo{display:flex;flex-direction:column;gap:12px;font-size:14px;color:#555}.divider{height:1px;background:#e8e4df}.component-preview.spacers{flex-direction:row;align-items:flex-end;gap:8px}.spacer-item{background:#1a1a1a;width:24px;border-radius:4px}.spacer-item.xxs{height:4px}.spacer-item.xs{height:8px}.spacer-item.sm{height:12px}.spacer-item.md{height:16px}.text-large{font-size:28px;font-weight:600;color:#1a1a1a}.text-title{font-size:20px;font-weight:500;color:#1a1a1a}.text-body{font-size:16px;color:#555}.text-caption{font-size:12px;color:#888}.component-showcase{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:32px}.showcase-group h4{font-size:14px;font-weight:600;color:#1a1a1a;margin:0 0 16px;font-family:SF Mono,Menlo,monospace}.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}.button-row:last-child{margin-bottom:0}.k-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;border:none;font-family:inherit;transition:all .2s ease}.k-button.primary{background:#1a1a1a;color:#faf9f7}.k-button.primary:hover{background:#2c2c2c}.k-button.secondary{background:#f5f3f0;color:#1a1a1a}.k-button.secondary:hover{background:#e8e4df}.k-button.tertiary{background:transparent;color:#1a1a1a}.k-button.tertiary:hover{background:#f5f3f0}.k-button.destructive{background:#dc3545;color:#fff}.k-button.destructive:hover{background:#c82333}.k-button.small{padding:8px 16px;font-size:13px}.k-button.large{padding:16px 32px;font-size:16px}.k-button:disabled{opacity:.5;cursor:not-allowed}.k-button.loading{cursor:wait}.spinner{width:14px;height:14px;border:2px solid rgba(250,249,247,.3);border-top-color:#faf9f7;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.k-icon-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f5f3f0;border:none;border-radius:10px;color:#1a1a1a;cursor:pointer;transition:all .2s ease}.k-icon-button:hover{background:#e8e4df}.k-icon-button.small{width:32px;height:32px}.input-demos{display:flex;flex-direction:column;gap:16px}.k-textfield{display:flex;flex-direction:column;gap:6px}.k-textfield label{font-size:13px;font-weight:500;color:#555}.k-textfield input{padding:12px 16px;border:1px solid #e8e4df;border-radius:10px;font-size:15px;font-family:inherit;transition:all .2s ease;background:#fff}.k-textfield input:focus{outline:none;border-color:#1a1a1a}.k-textfield.error input{border-color:#dc3545}.error-message{font-size:12px;color:#dc3545}.toggle-demos{display:flex;flex-direction:column;gap:16px}.k-toggle{display:flex;align-items:center;gap:12px;cursor:pointer}.k-toggle input{display:none}.toggle-track{width:51px;height:31px;background:#e8e4df;border-radius:16px;position:relative;transition:all .2s ease}.k-toggle input:checked+.toggle-track{background:#1a1a1a}.toggle-thumb{position:absolute;top:2px;left:2px;width:27px;height:27px;background:#fff;border-radius:14px;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.k-toggle input:checked+.toggle-track .toggle-thumb{left:22px}.toggle-label{font-size:14px;color:#555}.chip-demos{display:flex;gap:8px;flex-wrap:wrap}.k-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#f5f3f0;border-radius:20px;font-size:13px;color:#555;cursor:pointer;transition:all .2s ease}.k-chip:hover{background:#e8e4df}.k-chip.selected{background:#1a1a1a;color:#faf9f7}.k-chip.dismissible{padding-right:12px}.organisms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.organism-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px}.organism-card h4{font-size:14px;font-weight:600;color:#1a1a1a;margin:0 0 16px;font-family:SF Mono,Menlo,monospace}.k-card-demo{background:#faf9f7;padding:24px;border-radius:12px}.k-card{background:#fff;border:1px solid #e8e4df;border-radius:12px;padding:16px}.k-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.k-card-title{font-size:16px;font-weight:500;color:#1a1a1a}.k-card-body{font-size:14px;color:#555;margin:0 0 16px}.k-card-footer{display:flex;justify-content:flex-end}.k-list-demo{background:#faf9f7;padding:8px;border-radius:12px}.k-list-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-radius:10px;margin-bottom:2px;cursor:pointer;transition:background .2s ease}.k-list-row:last-child{margin-bottom:0}.k-list-row:hover{background:#faf9f7}.list-icon{color:#555}.list-label{flex:1;font-size:15px;color:#1a1a1a}.list-badge{background:#dc3545;color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}.list-chevron{color:#888}.k-empty-demo{text-align:center;padding:32px;background:#faf9f7;border-radius:12px}.empty-icon{width:64px;height:64px;background:#e8e4df;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#888}.k-empty-demo h5{font-size:16px;font-weight:500;color:#1a1a1a;margin:0 0 8px}.k-empty-demo p{font-size:14px;color:#666;margin:0 0 16px}.k-menu-demo{background:#faf9f7;padding:24px;border-radius:12px;display:flex;justify-content:center}.k-menu{background:#fff;border:1px solid #e8e4df;border-radius:12px;padding:8px;min-width:200px;box-shadow:0 8px 24px #00000014}.k-menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:none;border:none;border-radius:8px;font-size:14px;color:#1a1a1a;cursor:pointer;text-align:left;font-family:inherit;transition:background .2s ease}.k-menu-item:hover{background:#f5f3f0}.k-menu-item.destructive{color:#dc3545}.k-menu-divider{height:1px;background:#e8e4df;margin:8px 0}.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.template-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px;text-align:center}.template-preview{background:#1a1a1a;border-radius:24px;height:280px;margin-bottom:20px;padding:16px;display:flex;flex-direction:column;overflow:hidden}.template-navbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;color:#faf9f7;font-size:14px;font-weight:500}.template-search{display:flex;align-items:center;gap:8px;background:#ffffff1a;border-radius:8px;padding:8px 12px;margin:8px 0;color:#ffffff80;font-size:12px}.template-list{flex:1;display:flex;flex-direction:column;gap:4px}.template-list-item{background:#ffffff1a;border-radius:8px;height:44px}.template-hero{height:100px;background:linear-gradient(135deg,#555,#333);border-radius:12px;margin-bottom:16px}.template-content{flex:1;display:flex;flex-direction:column;gap:8px;padding:0 8px}.template-title{height:20px;width:60%;background:#fff3;border-radius:4px}.template-text{height:12px;background:#ffffff1a;border-radius:4px}.template-text.short{width:70%}.template-actions{display:flex;gap:8px;padding:0 8px}.template-btn{flex:1;height:36px;background:#fff3;border-radius:8px}.template-btn.outline{background:transparent;border:1px solid rgba(255,255,255,.2)}.template-preview.onboarding{justify-content:center;align-items:center;gap:24px}.template-illustration{width:80px;height:80px;background:#ffffff1a;border-radius:20px}.template-dots{display:flex;gap:8px}.dot{width:8px;height:8px;background:#fff3;border-radius:50%}.dot.active{background:#faf9f7}.template-cta{width:140px;height:44px;background:#fff3;border-radius:12px}.template-card h4{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 8px}.template-card p{font-size:13px;color:#666;margin:0}@media(max-width:1024px){.templates-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.component-grid,.organisms-grid,.templates-grid{grid-template-columns:1fr}}.materials-page{max-width:1200px;margin:0 auto}.material-showcase.glass{position:relative;border-radius:20px;overflow:hidden;padding:60px;margin-bottom:32px}.material-background{position:absolute;inset:0;background:linear-gradient(135deg,#f5f3f0,#e8e4df);overflow:hidden}.bg-shape{position:absolute;border-radius:50%}.shape-1{width:300px;height:300px;background:linear-gradient(135deg,#d8d0c8,#c8bfb5);top:-100px;right:-50px}.shape-2{width:200px;height:200px;background:linear-gradient(135deg,#c8bfb5,#b8afa5);bottom:-50px;left:20%}.shape-3{width:150px;height:150px;background:linear-gradient(135deg,#e0d8cf,#d0c8bf);top:30%;left:-30px}.material-samples{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.glass-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,.3)}.glass-card.ultra-thin{background:#fff3}.glass-card.thin{background:#fff6}.glass-card.regular{background:#fff9}.glass-card.thick{background:#fffc}.material-label{display:block;font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:8px}.glass-card p{font-size:13px;color:#555;margin:0}.paper-samples{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:32px}.paper-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px;text-align:center;transition:all .3s ease}.paper-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px #00000014}.paper-texture{height:120px;border-radius:12px;margin-bottom:16px}.paper-card.rice .paper-texture{background:#faf9f7;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28z' fill='%23e8e4df' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E")}.paper-card.washi .paper-texture{background:#f5f2ed;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23e0d8cf' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E")}.paper-card.linen .paper-texture{background:#f8f6f3;background-image:url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23d8d4cf' fill-opacity='0.5' fill-rule='evenodd'/%3E%3C/svg%3E")}.paper-card.cream .paper-texture{background:linear-gradient(135deg,#faf8f5,#f5f2ed)}.paper-name{display:block;font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:4px}.paper-card p{font-size:13px;color:#666;margin:0}.material-usage{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px 32px}.material-usage.dark{background:#1a1a1a;border-color:#333}.material-usage h4{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 16px}.material-usage.dark h4{color:#faf9f7}.material-usage ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.material-usage li{font-size:14px;color:#555;padding-left:20px;position:relative}.material-usage.dark li{color:#aaa}.material-usage li:before{content:"→";position:absolute;left:0;color:#888}.ink-showcase{background:#0a0a0a;border-radius:20px;padding:48px;margin-bottom:32px}.ink-samples{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.ink-card{padding:48px 24px;border-radius:16px;text-align:center;border:1px solid rgba(255,255,255,.1)}.ink-card.charcoal{background:#1a1a1a}.ink-card.obsidian{background:#121212}.ink-card.sumi{background:#0d0d0d}.ink-card.void{background:#000}.ink-name{display:block;font-size:16px;font-weight:500;color:#faf9f7;margin-bottom:8px}.ink-hex{font-size:12px;color:#faf9f780;font-family:SF Mono,Menlo,monospace}.shadow-samples{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.shadow-card{background:#fff;border-radius:16px;padding:32px 24px;text-align:center;transition:all .3s ease}.shadow-card.shadow-subtle{box-shadow:0 2px 4px #0000000a}.shadow-card.shadow-soft{box-shadow:0 4px 12px #0000000f}.shadow-card.shadow-medium{box-shadow:0 8px 24px #00000014}.shadow-card.shadow-strong{box-shadow:0 16px 48px #0000001f}.shadow-name{display:block;font-size:16px;font-weight:600;color:#1a1a1a;font-family:SF Mono,Menlo,monospace;margin-bottom:8px}.shadow-card p{font-size:13px;color:#666;margin:0 0 16px}.shadow-card code{display:block;font-size:10px;color:#888;font-family:SF Mono,Menlo,monospace;background:#f5f3f0;padding:8px;border-radius:6px}@media(max-width:1024px){.material-samples,.paper-samples,.ink-samples,.shadow-samples{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.material-samples,.paper-samples,.ink-samples,.shadow-samples,.material-usage ul{grid-template-columns:1fr}}.icons-page{max-width:1200px;margin:0 auto}.size-showcase{display:flex;align-items:flex-end;justify-content:center;gap:48px;padding:48px;background:#fff;border:1px solid #e8e4df;border-radius:16px}.size-item{display:flex;flex-direction:column;align-items:center;gap:16px}.size-demo{display:flex;align-items:center;justify-content:center;color:#1a1a1a}.size-name{font-size:14px;font-weight:500;color:#1a1a1a}.size-value{font-size:12px;color:#888;font-family:SF Mono,Menlo,monospace}.weight-showcase{display:flex;justify-content:center;gap:32px;padding:48px;background:#fff;border:1px solid #e8e4df;border-radius:16px}.weight-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;border-radius:12px;color:#1a1a1a;transition:all .2s ease}.weight-item:hover{background:#f5f3f0}.weight-item.active{background:#1a1a1a;color:#faf9f7}.weight-item span{font-size:13px;color:inherit;opacity:.7}.weight-item.active span{opacity:1}.icon-category{margin-bottom:48px}.icon-category:last-child{margin-bottom:0}.icon-category h3{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid #e8e4df}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.icon-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;background:#fff;border:1px solid #e8e4df;border-radius:12px;cursor:pointer;transition:all .2s ease}.icon-item:hover{border-color:#1a1a1a;background:#faf9f7}.icon-preview{color:#1a1a1a}.icon-name{font-size:10px;color:#888;font-family:SF Mono,Menlo,monospace;text-align:center;word-break:break-all}.states-showcase{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.state-group{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px;text-align:center}.state-group h4{font-size:14px;font-weight:500;color:#888;margin:0 0 16px}.state-demo{display:flex;justify-content:center;gap:16px;color:#1a1a1a}.state-demo.active{color:#1a1a1a}.state-demo.disabled{color:#ccc}.state-demo.error{color:#dc3545}@media(max-width:900px){.size-showcase,.weight-showcase{flex-wrap:wrap}.states-showcase{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.states-showcase{grid-template-columns:1fr}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}}.motion-page{max-width:1200px;margin:0 auto}.principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.principle-item{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px}.principle-number{display:block;font-size:12px;font-weight:600;color:#888;margin-bottom:12px}.principle-item h3{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 8px}.principle-item p{font-size:14px;color:#555;line-height:1.6;margin:0}.timing-showcase{display:flex;flex-direction:column;gap:1px;background:#e8e4df;border-radius:16px;overflow:hidden}.timing-item{display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:center;padding:20px 24px;background:#fff;cursor:pointer;transition:background .2s ease}.timing-item:hover{background:#faf9f7}.timing-item.active{background:#f5f3f0}.timing-bar{height:8px;background:#e8e4df;border-radius:4px;overflow:hidden}.timing-progress{height:100%;background:#1a1a1a;border-radius:4px}.timing-info{display:flex;align-items:center;gap:12px}.timing-name{font-size:14px;font-weight:600;color:#1a1a1a;font-family:SF Mono,Menlo,monospace}.timing-duration{font-size:12px;color:#888;font-family:SF Mono,Menlo,monospace;background:#f5f3f0;padding:4px 8px;border-radius:4px}.timing-usage{font-size:13px;color:#555}.easing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.easing-item{background:#fff;border:1px solid #e8e4df;border-radius:16px;overflow:hidden}.easing-preview{padding:24px;background:#f5f3f0}.easing-curve{width:100%;height:80px}.easing-info{padding:20px;display:flex;flex-direction:column;gap:8px}.easing-name{font-size:16px;font-weight:600;color:#1a1a1a}.easing-description{font-size:13px;color:#555}.easing-value{font-size:10px;color:#888;font-family:SF Mono,Menlo,monospace;background:#f5f3f0;padding:8px 12px;border-radius:6px;word-break:break-all}.animation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.animation-item{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px;text-align:center}.animation-item h4{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 16px}.animation-item p{font-size:13px;color:#555;margin:16px 0 0}.animation-demo{position:relative;height:100px;display:flex;align-items:center;justify-content:center;background:#f5f3f0;border-radius:12px}.demo-box{width:48px;height:48px;background:#1a1a1a;border-radius:12px}.play-button{position:absolute;bottom:8px;right:8px;width:32px;height:32px;background:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1a1a1a;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.play-button:hover{background:#1a1a1a;color:#faf9f7}.haptics-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}.haptic-item{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px;text-align:center}.haptic-icon{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;position:relative}.haptic-icon:after{content:"";position:absolute;inset:8px;border-radius:50%;background:currentColor}.haptic-icon.light{background:#1a1a1a1a;color:#1a1a1a4d}.haptic-icon.medium{background:#1a1a1a33;color:#1a1a1a80}.haptic-icon.heavy{background:#1a1a1a4d;color:#1a1a1acc}.haptic-icon.success{background:#28a74533;color:#28a74599}.haptic-icon.warning{background:#dc354533;color:#dc354599}.haptic-item h4{font-size:14px;font-weight:600;color:#1a1a1a;margin:0 0 8px}.haptic-item p{font-size:12px;color:#555;margin:0}.accessibility-note{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:32px}.accessibility-note h3{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 12px}.accessibility-note>p{font-size:15px;color:#555;line-height:1.7;margin:0 0 24px}@media(max-width:1024px){.principles-grid,.easing-grid,.animation-grid{grid-template-columns:repeat(2,1fr)}.haptics-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.timing-item{grid-template-columns:1fr;gap:12px}.haptics-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.principles-grid,.easing-grid,.animation-grid,.haptics-grid{grid-template-columns:1fr}}.downloads-page{max-width:1200px;margin:0 auto}.quick-download{display:flex;justify-content:space-between;align-items:center;gap:48px;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border-radius:20px;padding:48px}.quick-download-content h2{font-size:28px;font-weight:500;color:#faf9f7;margin:0 0 12px}.quick-download-content>p{font-size:16px;color:#faf9f7b3;margin:0 0 24px}.package-contents{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px}.package-contents li{font-size:13px;color:#faf9f799;background:#ffffff1a;padding:6px 12px;border-radius:6px}.quick-download-action{display:flex;flex-direction:column;align-items:flex-end;gap:16px}.download-meta{display:flex;gap:16px}.download-size,.download-version{font-size:13px;color:#faf9f780}.download-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;border:none;font-family:inherit;transition:all .2s ease}.download-btn.primary{background:#faf9f7;color:#1a1a1a}.download-btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003}.download-btn.outline{background:transparent;color:#1a1a1a;border:1px solid #e8e4df}.download-btn.outline:hover{background:#f5f3f0;border-color:#1a1a1a}.download-btn.small{padding:10px 16px;font-size:13px}.assets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.asset-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px;display:flex;flex-direction:column;transition:all .2s ease}.asset-card:hover{border-color:#1a1a1a;box-shadow:0 8px 24px #0000000f}.asset-icon{width:48px;height:48px;background:#f5f3f0;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#1a1a1a}.asset-info{flex:1}.asset-info h3{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 8px}.asset-info p{font-size:14px;color:#666;margin:0 0 16px}.asset-files{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}.asset-files li{font-size:12px;color:#555;background:#f5f3f0;padding:4px 10px;border-radius:4px}.asset-footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid #e8e4df}.asset-meta{display:flex;gap:12px}.asset-meta span{font-size:12px;color:#888}.design-files-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.design-file-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .2s ease}.design-file-card:hover{border-color:#1a1a1a;box-shadow:0 8px 24px #0000000f}.design-file-icon{width:64px;height:64px;background:#f5f3f0;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#1a1a1a}.design-file-info h3{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 8px}.design-file-info p{font-size:13px;color:#666;margin:0}.design-file-meta{display:flex;gap:8px;margin:16px 0}.file-format,.file-size,.file-updated{font-size:11px;color:#888;background:#f5f3f0;padding:4px 8px;border-radius:4px}.docs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.doc-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px;display:flex;flex-direction:column;transition:all .2s ease}.doc-card:hover{border-color:#1a1a1a;box-shadow:0 8px 24px #0000000f}.doc-icon{width:40px;height:40px;background:#f5f3f0;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#1a1a1a}.doc-info h3{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 8px}.doc-info p{font-size:13px;color:#666;margin:0}.doc-meta{display:flex;gap:8px;margin:16px 0}.doc-format,.doc-pages{font-size:11px;color:#888;background:#f5f3f0;padding:4px 8px;border-radius:4px}.swift-package{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:32px}.package-info h3{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 8px}.package-info p{font-size:14px;color:#666;margin:0 0 24px}.package-requirements{margin-top:24px}.package-requirements h4{font-size:14px;font-weight:600;color:#1a1a1a;margin:0 0 12px}.package-requirements ul{margin:0;padding:0;list-style:none;display:flex;gap:16px;flex-wrap:wrap}.package-requirements li{font-size:13px;color:#555;background:#f5f3f0;padding:6px 12px;border-radius:6px}.version-history{display:flex;flex-direction:column;gap:16px}.version-item{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px}.version-item.current{border-color:#1a1a1a}.version-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.version-number{font-size:18px;font-weight:600;color:#1a1a1a;font-family:SF Mono,Menlo,monospace}.version-tag{font-size:11px;font-weight:600;color:#28a745;background:#28a7451a;padding:4px 10px;border-radius:4px;text-transform:uppercase}.version-date{font-size:13px;color:#888;margin-left:auto}.version-changes{margin:0;padding:0;list-style:none}.version-changes li{font-size:14px;color:#555;padding:8px 0 8px 20px;position:relative;border-bottom:1px solid #f5f3f0}.version-changes li:last-child{border-bottom:none}.version-changes li:before{content:"•";position:absolute;left:0;color:#888}.license-note{background:#f5f3f0;border-radius:16px;padding:32px}.license-note h3{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 12px}.license-note p{font-size:14px;color:#555;line-height:1.7;margin:0}.license-copyright{margin-top:16px!important;font-size:13px!important;color:#888!important}@media(max-width:1024px){.quick-download{flex-direction:column;align-items:flex-start}.quick-download-action{width:100%;align-items:flex-start}.design-files-grid,.docs-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.assets-grid,.design-files-grid,.docs-grid{grid-template-columns:1fr}}.guidelines-page{max-width:1200px;margin:0 auto}.principles-list{display:flex;flex-direction:column;gap:16px}.principle-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:32px;display:grid;grid-template-columns:60px 1fr;gap:24px;transition:all .2s ease}.principle-card:hover{border-color:#1a1a1a}.principle-num{font-size:32px;font-weight:200;color:#e8e4df;font-family:SF Mono,Menlo,monospace}.principle-card h3{font-size:20px;font-weight:600;color:#1a1a1a;margin:0 0 12px}.principle-card p{font-size:15px;color:#555;line-height:1.7;margin:0}.dos-donts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.dos-column,.donts-column{background:#fff;border-radius:16px;padding:32px}.dos-column{border:2px solid rgba(40,167,69,.2)}.donts-column{border:2px solid rgba(220,53,69,.2)}.dos-column h3,.donts-column h3{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;margin:0 0 20px}.dos-column h3{color:#28a745}.donts-column h3{color:#dc3545}.dos-column ul,.donts-column ul{margin:0;padding:0;list-style:none}.dos-column li,.donts-column li{font-size:14px;color:#555;border-bottom:1px solid #f5f3f0;padding:12px 0 12px 24px;position:relative}.dos-column li:last-child,.donts-column li:last-child{border-bottom:none}.dos-column li:before{content:"✓";position:absolute;left:0;color:#28a745;font-weight:700}.donts-column li:before{content:"✗";position:absolute;left:0;color:#dc3545;font-weight:700}.writing-guidelines{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.writing-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px}.writing-card h4{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 20px}.example{padding:16px;border-radius:10px;margin-bottom:12px}.example:last-child{margin-bottom:0}.example.bad{background:#dc35450f}.example.good{background:#28a7450f}.example .label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.example.bad .label{color:#dc3545}.example.good .label{color:#28a745}.example p{font-size:14px;color:#555;margin:0;font-style:italic}.accessibility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.a11y-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px}.a11y-card h4{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 12px}.a11y-card p{font-size:14px;color:#555;line-height:1.6;margin:0}.platform-guidelines{display:flex;flex-direction:column;gap:24px}.platform-item{display:flex;gap:24px;background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:32px}.platform-icon{font-size:48px;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:#f5f3f0;border-radius:20px;flex-shrink:0}.platform-info h4{font-size:20px;font-weight:600;color:#1a1a1a;margin:0 0 16px}.platform-info ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.platform-info li{font-size:14px;color:#555;padding-left:20px;position:relative}.platform-info li:before{content:"→";position:absolute;left:0;color:#888}.patterns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.pattern-card{background:#fff;border:1px solid #e8e4df;border-radius:16px;padding:24px}.pattern-card h4{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 12px}.pattern-card p{font-size:14px;color:#555;line-height:1.6;margin:0}.resources-card{background:#f5f3f0;border-radius:16px;padding:32px}.resources-card h3{font-size:20px;font-weight:600;color:#1a1a1a;margin:0 0 12px}.resources-card>p{font-size:15px;color:#555;margin:0 0 24px}.resources-card ul{margin:0;padding:0;list-style:none}.resources-card li{font-size:14px;color:#555;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06)}.resources-card li:last-child{border-bottom:none}.resources-card strong{color:#1a1a1a}@media(max-width:1024px){.accessibility-grid,.patterns-grid{grid-template-columns:repeat(2,1fr)}.platform-info ul{grid-template-columns:1fr}}@media(max-width:768px){.dos-donts-grid,.writing-guidelines,.accessibility-grid,.patterns-grid,.principle-card{grid-template-columns:1fr}.principle-num{font-size:24px}.platform-item{flex-direction:column}}