:root{--color-primary:#1a237e;--color-primary-light:#3949ab;--color-accent:#ffca28;--color-bg:#f7f9fb;--color-surface:#fff;--color-surface-alt:#f3f6fa;--color-text:#222;--color-text-muted:#444;--color-text-faint:#666;--color-border:#1e28641f;--color-shadow:#1e286414;--color-shadow-hover:#1e286424;--color-footer-bg:#e8eaf6;--color-header-bg:#1a237e;--base-font-size:18px;--base-line-height:1.7;--base-letter-spacing:.03em;--heading-line-height:1.2;--heading-letter-spacing:.04em;--container-max-width:900px;--radius-card:12px;--radius-sm:8px}@media (prefers-color-scheme:dark){:root{--color-primary:#7986cb;--color-primary-light:#9fa8da;--color-accent:#ffca28;--color-bg:#0f1117;--color-surface:#1a1d27;--color-surface-alt:#20243a;--color-text:#e0e4f0;--color-text-muted:#b0b8d0;--color-text-faint:#8090b0;--color-border:#96a0dc26;--color-shadow:#0000004d;--color-shadow-hover:#00000073;--color-footer-bg:#14172a;--color-header-bg:#111428}}html{scroll-behavior:smooth}body{background:var(--color-bg);color:var(--color-text);font-family:Noto Sans JP,Roboto,Yu Gothic,Meiryo,sans-serif;font-size:var(--base-font-size);line-height:var(--base-line-height);letter-spacing:var(--base-letter-spacing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;margin:0}header{background:var(--color-header-bg);color:#fff;text-align:center;box-shadow:0 2px 12px var(--color-shadow);z-index:100;padding:20px 0 18px;position:sticky;top:0}.site-title{font-size:26px;font-weight:700;line-height:var(--heading-line-height);letter-spacing:.06em;color:#fff;margin:0 0 10px}.site-title a{color:inherit;text-decoration:none}nav{justify-content:center;gap:4px;display:flex}nav a{color:#ffffffd9;letter-spacing:.03em;border-radius:20px;padding:4px 14px;font-size:15px;font-weight:600;text-decoration:none;transition:background .2s,color .2s}nav a:hover{color:#fff;background:#ffffff26}.container{max-width:var(--container-max-width);background:var(--color-surface);border-radius:var(--radius-card);box-shadow:0 4px 24px var(--color-shadow);margin:48px auto;padding:48px 40px}@media (width<=600px){.container{margin:24px 12px;padding:28px 20px}}h1{font-size:32px;line-height:var(--heading-line-height);letter-spacing:var(--heading-letter-spacing);margin:0}h2{color:var(--color-primary);margin:0 0 12px;font-size:22px;font-weight:700;line-height:1.3}h3{color:var(--color-text);margin:20px 0 8px;font-size:18px;font-weight:700}h4{color:var(--color-text-muted);margin:16px 0 6px;font-size:16px;font-weight:700}p{font-size:var(--base-font-size);color:var(--color-text-muted);max-width:72ch;margin:0 auto}ul,ol{color:var(--color-text-muted);padding-left:1.4em}li{margin-bottom:4px}.intro{text-align:center;margin-bottom:48px}.section{margin-top:48px}.works{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;display:grid}.work-card{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:0 2px 8px var(--color-shadow);flex-direction:column;gap:10px;padding:24px;transition:box-shadow .2s,transform .2s;display:flex}.work-card:hover{box-shadow:0 8px 28px var(--color-shadow-hover);transform:translateY(-2px)}.work-title{color:var(--color-primary);font-size:20px;font-weight:700;line-height:1.3}.work-desc{color:var(--color-text-muted);flex:1;font-size:16px;line-height:1.6}.work-link{background:var(--color-primary);color:#fff;letter-spacing:.03em;border-radius:20px;align-self:flex-start;margin-top:4px;padding:8px 18px;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,transform .15s;display:inline-block}.work-link:hover{background:var(--color-primary-light);transform:translateY(-1px)}footer{text-align:center;background:var(--color-footer-bg);color:var(--color-text-faint);margin-top:0;padding:28px 0;font-size:15px;line-height:2}footer a{color:var(--color-primary-light);margin:0 10px;font-weight:600;text-decoration:none}footer a:hover{text-decoration:underline}.platform-toggle{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:24px;gap:8px;margin:12px 0 20px;padding:4px;display:inline-flex}.platform-btn{appearance:none;color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;border-radius:20px;padding:7px 18px;font-size:14px;font-weight:600;transition:background .15s,color .15s}.platform-btn:hover{background:var(--color-border)}.platform-btn.active{background:var(--color-primary);color:#fff}.platform-content.hidden{display:none}code{background:var(--color-surface-alt);color:#b71c1c;border:1px solid var(--color-border);border-radius:5px;padding:.1em .35em;font-family:ui-monospace,SFMono-Regular,Roboto Mono,monospace;font-size:.9em}@media (prefers-color-scheme:dark){code{color:#ef9a9a}}img{max-width:100%;height:auto;display:inline-block}.badge{vertical-align:middle;width:180px;max-width:44%;height:auto;margin:4px}.screenshot{border-radius:var(--radius-sm);width:100%;max-width:760px;height:auto;box-shadow:0 4px 16px var(--color-shadow);margin:16px 0;display:block}@media (width<=520px){.badge{width:48%;max-width:48%}.screenshot{max-width:100%}.platform-toggle{width:100%}.platform-btn{text-align:center;flex:1}ul,ol{padding-left:1em}}.breadcrumb{color:var(--color-text-faint);margin-bottom:24px;font-size:14px}.breadcrumb a{color:var(--color-primary-light);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.usage-layout{align-items:flex-start;gap:32px;display:flex}.usage-sidebar{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-card);flex-shrink:0;width:210px;padding:18px 14px;position:sticky;top:88px}.sidebar-title{color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.08em;max-width:none;margin:0 0 10px;font-size:12px;font-weight:700}.usage-sidebar ul{margin:0;padding:0;list-style:none}.usage-sidebar li{margin-bottom:2px}.usage-sidebar a{border-radius:var(--radius-sm);color:var(--color-text-muted);padding:7px 10px;font-size:14px;line-height:1.4;text-decoration:none;transition:background .15s,color .15s;display:block}.usage-sidebar a:hover{background:var(--color-border);color:var(--color-text)}.usage-sidebar a.active{background:var(--color-primary);color:#fff;font-weight:600}.badge-ios{background:var(--color-accent);color:#333;vertical-align:middle;border-radius:8px;margin-left:4px;padding:1px 5px;font-size:10px;font-weight:700;line-height:1.5;display:inline-block}.usage-main{flex:1;min-width:0}.usage-nav{border-top:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:12px;margin-top:40px;padding-top:20px;display:flex}.usage-nav-btn{background:var(--color-primary);color:#fff;white-space:nowrap;border-radius:20px;align-items:center;gap:6px;padding:9px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s;display:inline-flex}.usage-nav-btn:hover{background:var(--color-primary-light)}.usage-nav-btn.ghost{color:var(--color-text-faint);border:1px solid var(--color-border);pointer-events:none;background:0 0}.related-items{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-card);margin-top:36px;padding:20px}.related-items h3{color:var(--color-text-faint);margin:0 0 10px;font-size:15px}.related-items ul{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.related-items a{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-primary-light);border-radius:16px;padding:6px 14px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s;display:inline-block}.related-items a:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.topic-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:24px;display:grid}.topic-card{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-card);color:inherit;flex-direction:column;gap:6px;padding:20px;text-decoration:none;transition:box-shadow .2s,transform .2s;display:flex}.topic-card:hover{box-shadow:0 6px 20px var(--color-shadow-hover);transform:translateY(-2px)}.topic-card-title{color:var(--color-primary);font-size:16px;font-weight:700}.topic-card-desc{color:var(--color-text-faint);font-size:14px;line-height:1.5}.topic-card-platform{color:var(--color-text-faint);margin-top:4px;font-size:12px}@media (width<=700px){.usage-layout{flex-direction:column}.usage-sidebar{width:auto;position:static}.usage-nav{flex-wrap:wrap}}