*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;background:#f0f2f5;color:#111}.shell{display:flex;flex-direction:column;height:100vh}.shell-header{display:flex;align-items:center;gap:24px;padding:0 24px;height:56px;background:#1a1a2e;color:#fff;flex-shrink:0}.shell-logo{font-size:16px;font-weight:700;color:#fff;letter-spacing:.5px;white-space:nowrap}.shell-nav{display:flex;gap:4px;flex:1}.nav-item{padding:6px 14px;background:transparent;border:none;color:#aaa;font-size:13px;cursor:pointer;border-radius:4px;transition:color .15s}.nav-item:hover{color:#fff}.nav-item.active{color:#fff;background:#ffffff1a}.theme-switcher{display:flex;align-items:center;gap:8px}.theme-label{font-size:11px;color:#888;white-space:nowrap}.swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .15s}.swatch:hover{transform:scale(1.15)}.swatch-active{border-color:#fff;transform:scale(1.15)}.shell-body{display:flex;flex:1;overflow:hidden}.shell-sidebar{width:200px;background:#fff;border-right:1px solid #e5e7eb;padding:16px 8px;display:flex;flex-direction:column;gap:2px;flex-shrink:0}.sidebar-item{padding:8px 12px;text-align:left;background:transparent;border:none;border-radius:4px;font-size:13px;color:#555;cursor:pointer;transition:background .1s,color .1s}.sidebar-item:hover{background:#f3f4f6;color:#111}.sidebar-item.active{background:#f3f4f6;color:#111;font-weight:600}.shell-main{flex:1;padding:32px;overflow-y:auto}.page-header{margin-bottom:24px}.page-header h1{font-size:22px;font-weight:700;margin-bottom:6px}.page-sub{font-size:13px;color:#666}.component-wrapper{background:#fff;border-radius:8px;box-shadow:0 1px 4px #00000014;overflow:hidden;margin-bottom:16px}.host-note{font-size:12px;color:#999;font-style:italic;line-height:1.6;padding:12px;background:#fff;border-radius:6px;border:1px solid #e5e7eb}.host-note code{font-style:normal;background:#f3f4f6;padding:1px 5px;border-radius:3px;font-size:11px}.placeholder{padding:48px;text-align:center;color:#999}.placeholder h2{font-size:20px;margin-bottom:8px;color:#ccc}.placeholder p{font-size:14px}