*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-page);color:var(--text-primary)}html,body,#root{height:100%;width:100%;overflow:hidden}@media (min-width: 768px){html,body,#root{overflow:unset}}.app-container,.mobile-frame{overflow:hidden}:root{--font-main: "DM Mono", monospace;--font-sans: system-ui, -apple-system, sans-serif;--bg-page: #f0f0f0;--bg-card: #ffffff;--bg-secondary: #f5f5f5;--text-primary: #000;--text-secondary: #555;--text-tertiary: #888;--border: #c0c0c0;--border-secondary: #d0d0d0;--accent: #009eff;--accent-hover: #0088dd;--frog: #4CAF50;--space-xs: 2px;--space-sm: 4px;--space-md: 8px;--space-lg: 12px;--space-xl: 16px;--mobile-width: 375px;--mobile-height: 812px;--tab-bar-height: 60px;--border-radius: 8px;--border-radius-sm: 4px;--safe-area-top: env(safe-area-inset-top);--safe-area-bottom: env(safe-area-inset-bottom)}@media (min-width: 768px){:root{--safe-area-top: 18px;--safe-area-bottom: 18px}}button{font-family:inherit}.plaintext{font-family:var(--font-sans)}.app-container{width:100%;min-height:100dvh;display:flex;justify-content:center;align-items:center;background:var(--bg-page)}.mobile-frame{width:100%;height:100dvh;display:flex;flex-direction:column;background:var(--bg-page);background-image:radial-gradient(circle,#e0e0e0 1px,transparent 1px);background-size:20px 20px}@media (min-width: 768px){.mobile-frame{max-width:var(--mobile-width);height:var(--mobile-height);border:2px solid var(--border);border-radius:32px;overflow:hidden;box-shadow:0 20px 60px #0000001a;border:1px solid #000;position:relative}}.content-area{flex:1;overflow-y:auto;padding:var(--space-md);min-height:0}@media (min-width: 768px){.content-area{padding-top:calc(var(--safe-area-top) + var(--space-lg))}}.tab-bar{flex-shrink:0;background:var(--bg-card);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;padding:var(--space-sm) 0;padding-bottom:calc(var(--space-sm) + var(--safe-area-bottom)/2);box-shadow:0 -1px 3px #00000014}.tab-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-sm);background:none;border:none;cursor:pointer;color:var(--text-tertiary);font-family:var(--font-main);font-size:11px;flex:1;text-decoration:none}.tab-item.active{color:var(--accent)}.tab-item:hover:not(.active){color:var(--text-secondary)}.tab-item.active .tab-label{color:var(--text-primary)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--border-radius);padding:var(--space-md)}.card-inner{background:var(--bg-card);border:1px solid var(--border-secondary);border-radius:var(--border-radius);padding:var(--space-md)}.button{font-family:var(--font-main);padding:var(--space-sm) var(--space-md);border:1px solid var(--border);border-radius:var(--border-radius-sm);background:var(--bg-card);color:var(--text-primary);cursor:pointer;font-size:14px;text-decoration:none;display:inline-block}.button:hover{background:var(--bg-secondary)}.button-primary{background:var(--accent);color:#fff;background-clip:border-box;border-color:#0002}.button-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.input{font-family:var(--font-main);padding:var(--space-sm) var(--space-md);border:1px solid var(--border);border-radius:var(--border-radius-sm);background:var(--bg-card);color:var(--text-primary);font-size:16px;width:100%}.input:focus{outline:none;border-color:var(--accent)}.textarea{font-family:var(--font-sans);padding:var(--space-sm) var(--space-md);border:1px solid var(--border);border-radius:var(--border-radius-sm);background:var(--bg-card);color:var(--text-primary);font-size:16px;width:100%;resize:vertical;min-height:150px}.textarea:focus{outline:none;border-color:var(--accent)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.w-full{width:100%}.text-center{text-align:center}