*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body,#root{margin:0;padding:0;width:100%;height:100%;font-family:-apple-system,SF Pro Display,SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif;background:#1a1a1a;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.home-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:2rem 1rem;gap:2.5rem;max-width:390px;margin:0 auto}.home-card{background:linear-gradient(145deg,#fff,#e6e6e6);border-radius:20px;padding:5rem 3rem 6rem;width:340px;display:flex;flex-direction:column;align-items:center;gap:1.5rem;border:3px solid #000000;box-shadow:8px 8px #000;position:relative;overflow:hidden}.wall-nail{position:absolute;top:10px;left:50%;transform:translate(-50%);width:10px;height:10px;background:radial-gradient(circle,#777,#444);border-radius:50%;box-shadow:0 1px 3px #00000080;z-index:3}.hanging-rope{position:absolute;top:14px;left:50%;transform:translate(-55%);z-index:0;height:110px}@keyframes swing-settle{0%{transform:rotate(0)}40%{transform:rotate(-8deg)}70%{transform:rotate(-3deg)}85%{transform:rotate(-6deg)}to{transform:rotate(-5deg)}}.hanging-frame{transform:rotate(0);animation:swing-settle .6s ease-in-out 2s forwards;margin-top:1rem}.scattered-tools{position:absolute;bottom:0;left:0;right:0;height:80px;pointer-events:none;z-index:1}.tool{position:absolute;opacity:.4;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.25))}.tool-hammer{bottom:-2px;left:8px;transform:rotate(-65deg)}.tool-drill{bottom:4px;right:4px;transform:rotate(12deg)}.tool-wrench{bottom:0;left:50%;transform:translate(-50%) rotate(-20deg)}.tool-screw1{bottom:6px;left:75px;transform:rotate(120deg)}.tool-screw2{bottom:12px;right:70px;transform:rotate(-30deg)}.tool-screw3{bottom:0;left:40%;transform:rotate(75deg)}.tool-screwdriver{bottom:-4px;right:55px;transform:rotate(50deg)}.tool-nail1{bottom:8px;left:50px;transform:rotate(140deg)}.tool-nail2{bottom:3px;right:110px;transform:rotate(-60deg)}.home-brand{text-align:center;display:flex;flex-direction:column;align-items:center}.home-logo{width:120px;height:120px;margin-bottom:.75rem;border-radius:24px;box-shadow:0 6px 18px #0006,4px 4px #00000080}.home-brand h1{font-size:1.75rem;font-weight:700;margin:0;letter-spacing:-.02em;color:#000}.home-brand p{margin:0;color:#8e8e93;font-size:.95rem;font-weight:400}.home-roles{display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:1.25rem 1.5rem}.role-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .5rem;width:76px;border:none;background:transparent;color:#000;cursor:pointer;text-align:center;transition:transform .15s;font-family:inherit;border-radius:16px}.role-btn:active{transform:translateY(2px)}.role-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#3a9bff,#0060df);color:#fff;box-shadow:0 6px 18px #0006,4px 4px #003d8f;transition:transform .15s,box-shadow .15s}.role-btn:active .role-icon{transform:translateY(2px);box-shadow:0 2px 6px #0000004d,2px 2px #003d8f}.role-label{font-size:.75rem;font-weight:500;color:#000;line-height:1.2}.webview-screen{display:flex;flex-direction:column;height:100dvh}.webview-iframe{flex:1;width:100%;border:none}