*{box-sizing:border-box}html,body,#root{height:100%;width:100%;margin:0;padding:0;background-color:#272727;overflow:hidden}body{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,Courier New,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;height:100%;background-color:transparent;--contrast-bg: #ffffff;--contrast-border: rgba(0,0,0,.08);--contrast-color: #111}.main{height:100vh;height:100dvh;width:100%;display:flex;flex-direction:row;gap:0;background:linear-gradient(180deg,#1f1f1f,#232323)}.panel-left{width:33%;min-width:300px;background:linear-gradient(180deg,#0f0f0f,#151515);padding:36px 28px 26px;color:#f8f8f8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,Courier New,monospace;display:flex;flex-direction:column;gap:18px;height:100vh;overflow:hidden}.panel-left::-webkit-scrollbar{width:6px}.panel-left::-webkit-scrollbar-track{background:transparent}.panel-left::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px;transition:background .2s ease}.panel-left::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.panel-left .left-top{display:flex;flex-direction:column;gap:12px;flex-shrink:0}.panel-left .divider{border:none;border-top:1px solid rgba(255,255,255,.1);margin:12px 0 0}.desktop-view-info{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.panel-left .view-info{font-size:14px;line-height:1.6;color:#b0b0b0;padding-top:12px;flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px;margin-right:-4px}.panel-left .view-info::-webkit-scrollbar{width:6px}.panel-left .view-info::-webkit-scrollbar-track{background:transparent}.panel-left .view-info::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px;transition:background .2s ease}.panel-left .view-info::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.panel-left .view-info p{margin:0}.panel-left .view-info .inline-attr{display:inline-block;background:#ffffff0a;color:#e8e8e8;padding:2px 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:.9em;margin:0 4px}.panel-left .view-info .inline-skill,.panel-left .view-info .inline-framework{display:inline-block;background:#ffdf4d14;color:#ffd54f;padding:2px 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:.9em;margin:0 4px}body.light .panel-left .view-info .inline-skill,body.light .panel-left .view-info .inline-framework{background:#ffdf4d0f;color:#8b6a00}.panel-right{flex:1 1 auto;position:relative;min-height:0;display:flex;align-items:stretch}.landscape-warning{display:none}@media only screen and (max-height:500px)and (orientation:landscape){.landscape-warning{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#1f1f1f;color:#fff;z-index:99999;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}.landscape-warning p{font-size:18px;font-weight:500;margin:0}}.header-container{position:relative}.info-indicator,.header-hint{display:none}.panel-left .title{margin:0 0 6px;font-size:40px;letter-spacing:.6px;font-weight:600}.panel-left .subtitle{margin:0;font-size:18px;color:#cfcfcf}.panel-left .bio{font-size:15px;line-height:1.5;color:#dcdcdc}.panel-left .actions{flex-shrink:0;padding-bottom:0}.panel-left .actions-buttons{display:flex;gap:12px;margin-top:12px}.btn{background:transparent;border:1px solid rgba(255,255,255,.12);color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit}.social-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:#111;border-radius:6px;border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.social-btn img{width:36px;height:36px;display:block;filter:invert(1);transition:filter .16s ease}.theme-toggle{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:#111;border-radius:6px;border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;padding:0;font-size:16px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.social-btn,.theme-toggle,.view-btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:#111;border-radius:6px;border:1px solid rgba(255,255,255,.12);color:#fff;padding:0;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.panel-left .actions .theme-toggle{margin-left:auto}.hints-wrapper{position:relative;height:40px;margin-bottom:24px;width:100%;display:flex;align-items:center;justify-content:center}.swipe-hint,.click-hint{display:none!important}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}@media(max-width:768px){.hints-wrapper{position:relative}.hints-wrapper .click-hint{position:absolute;top:-200px;left:0;right:0;display:flex!important;justify-content:center;pointer-events:none;z-index:50}.hints-wrapper .click-hint .text{pointer-events:auto}}.mobile-info-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.mobile-info-content{background:#1f1f1f;padding:0;border-radius:12px;max-width:500px;width:100%;position:relative;color:#fff;max-height:60vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #00000080;border:1px solid rgba(255,255,255,.1)}.mobile-info-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;gap:16px}.mobile-info-body{padding:24px;overflow-y:auto}.mobile-info-content .title{font-size:20px;font-weight:600;margin:0;line-height:1.2}.close-info-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:24px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s ease;padding:0;line-height:1}.close-info-btn:hover{background:#ffffff1a;border-color:#fff6}.mobile-info-btn{display:none;background:#00000080;color:#fff;border:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:6px;cursor:pointer;font-family:inherit;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.inline-attr{display:inline-block;background:#ffffff0f;color:#f1f1f1;padding:2px 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:.9em;margin:0 4px}.inline-skill,.inline-framework{display:inline-block;background:#ffdf4d1f;color:#ffd54f;padding:2px 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:.9em;margin:0 4px}body.light .mobile-info-content .inline-skill,body.light .mobile-info-content .inline-framework{background:#ffdf4d14;color:#b8860b}.view-controls{position:absolute;bottom:18px;left:50%;transform:translate(-50%);background:#0000005c;border:1px solid rgba(255,255,255,.06);padding:8px 12px;display:flex;align-items:center;gap:8px;border-radius:8px;z-index:6;color:#eaeaea}.view-btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;padding:0}.view-indicator{font-size:13px;color:inherit;min-width:42px;text-align:center}.mobile-view-controls{display:none}.canvas-container{width:100%;height:100%;position:relative}.canvas-container canvas{width:100%!important;height:100%!important;display:block}body.light{background-color:#f6f6f6;color:#111;--contrast-bg: #111111;--contrast-border: rgba(255,255,255,.12);--contrast-color: #ffffff}body.light .main{background:linear-gradient(180deg,#fafafa,#f0f0f0)}body.light .panel-left{background:linear-gradient(180deg,#fff,#fafafa);color:#111}body.light .panel-left .subtitle,body.light .panel-left .bio{color:#555}body.light .panel-left .divider{border-top-color:#0000001a}body.light .panel-left .view-info{color:#888;border-top-color:#0000001a}body.light .swipe-hint,body.light .click-hint{color:#0009;text-shadow:0 1px 2px rgba(255,255,255,.8)}body.light .btn{color:#111;border-color:#00000014}body.light .social-btn img{filter:invert(0)}body.light .social-btn,body.light .theme-toggle,body.light .view-btn{background:#fff;border-color:#0000001f;color:#111}body.light .view-controls{background:#ffffffeb;border-color:#0000000f;color:#111}body.light .mobile-info-content{background:#fff;color:#111;border-color:#0000001a}body.light .mobile-info-header{border-bottom-color:#0000001a}body.light .close-info-btn{color:#111;border-color:#0000001a}body.light .close-info-btn:hover{background:#0000000d;border-color:#0000004d}body.light .mobile-info-btn{background:#fffc;color:#111;border-color:#0000001a}body.light .landscape-warning{background-color:#f6f6f6;color:#111}@media(max-width:768px){.main{display:block;position:relative;height:100vh;height:100dvh;overflow:hidden}.panel-left{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;padding:20px;padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom));padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right));z-index:20;display:flex;flex-direction:column;justify-content:space-between;overflow:visible}.panel-left .left-top{pointer-events:auto;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);transition:background .2s ease;cursor:pointer;width:100%;position:relative}.panel-left .left-top:active{background:#000c;transform:scale(.98)}.info-indicator{display:flex;position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.3);align-items:center;justify-content:center;font-size:12px;font-family:serif;font-style:italic;color:#fff9}.panel-left .title{font-size:20px;text-shadow:none;margin:0;line-height:1.2}.panel-left .subtitle{display:none}.header-hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-top:8px;color:#ffffffb3;font-size:12px;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,.8);font-weight:600;animation:pulse 2s infinite ease-in-out}.header-hint .arrow-up{font-size:20px;margin-bottom:-2px}.panel-left .bio,.panel-left .divider,.desktop-view-info{display:none}.panel-left .actions{pointer-events:auto;margin-top:auto;width:100%;padding-bottom:0}.panel-left .actions .divider{display:none}.swipe-hint,.click-hint{position:absolute;top:0;left:0;width:100%;display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#ffffffb3;font-size:12px;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,.8);font-weight:600;animation:pulse 2s infinite ease-in-out;transition:opacity .5s ease}.swipe-hint{margin-bottom:0}.swipe-hint.waiting{opacity:0;animation:none}.swipe-hint.fade-out,.click-hint.fade-out{opacity:0;animation:none;pointer-events:none}.click-hint{position:absolute;bottom:0;left:0;transform:none;gap:4px}.click-hint .arrow-up{font-size:20px;margin-bottom:-2px}.click-hint .arrow-line{display:none}.panel-left .actions-buttons{margin-top:0;align-items:center;gap:8px;width:100%}.panel-right{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.mobile-info-btn,.view-controls.desktop-only{display:none}.mobile-view-controls{display:flex;align-items:center;gap:4px;margin:0 4px;flex:1;justify-content:center}.mobile-view-controls .view-btn{font-size:24px}.mobile-view-controls .view-indicator{min-width:30px;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.5);margin:0 12px}body.light .panel-left{background:transparent}body.light .panel-left .left-top{background:#fffc;border-color:#0000001a;color:#111}body.light .panel-left .subtitle{color:#666}body.light .header-hint{color:#0009;text-shadow:0 1px 2px rgba(255,255,255,.8)}body.light .info-indicator{border-color:#0003;color:#00000080}}