:root{--text-primary: #374151;--text-secondary: #6b7280;--border-light: rgba(241, 245, 249, .3);--font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;--font-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace}.about-container{font-family:var(--font-jp);color:var(--text-primary);line-height:1.5}.about-section{margin-bottom:24px}.about-row{display:flex;padding:12px 0;border-bottom:1px solid var(--border-light)}.about-row:last-child{border-bottom:none}.about-label{width:120px;font-weight:500;color:var(--text-primary);font-size:14px}.about-label-flex{width:120px;font-weight:500;color:var(--text-primary);font-size:14px;display:flex;align-items:center}.about-value{flex:1;font-size:14px}.about-value-bold{flex:1;font-size:14px;font-weight:600}.about-value-small{flex:1;font-size:13px;font-family:var(--font-jp);color:var(--text-primary);display:flex;align-items:center}.projects-container{text-align:center;color:var(--text-secondary)}.projects-title{color:var(--text-primary);margin-bottom:16px}.projects-list{display:flex;flex-direction:column;gap:12px}.project-card{padding:12px;border-radius:8px}.project-card-green{background:#10b9811a;border-left:4px solid #10b981}.project-card-blue{background:#3b82f61a;border-left:4px solid #3b82f6}.project-title{color:var(--text-primary)}.project-tech{color:var(--text-secondary)}.playground-container{height:100%;display:flex;flex-direction:column;background:#1a1a1a;position:relative}.run-button{background:#3c5c87;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s;position:absolute;top:12px;right:12px;z-index:10;box-shadow:0 2px 4px #0003}.run-button:hover{background:#4b6d9b}.run-button:active{background:#2d4b73}.run-button:disabled{background:#9ca3af;cursor:not-allowed}.code-editor{flex:1;background:#fafafa;border:none;font-family:var(--font-mono);font-size:13px;line-height:1.4;padding:12px;resize:none;outline:none;color:#2d3748;overflow-y:auto}.code-editor:focus{background:#fff}.output-section{background:#0d0d0d;border-top:1px solid #2a2a2a;height:110px;flex-shrink:0;overflow-y:auto}.output-header{padding:8px 12px;background:#0d0d0d;font-size:12px;font-weight:500;color:#878572;border-bottom:1px solid #2a2a2a}.output-content{font-family:var(--font-mono);font-size:13px;line-height:1.4;padding:12px;color:#fff;white-space:pre-wrap;min-height:60px}.output-loading{color:var(--text-secondary);font-style:italic}.output-error{color:#dc2626}.go-keyword{color:#ffaf65;font-weight:400}.go-string{color:#f9d38c}.go-comment{color:#878572;font-style:italic}.go-function{color:#e2d66b}.go-package{color:#e978a1}.go-import,.go-type,.go-punctuation{color:#ffaf65}.go-variable{color:#fff}.editor-dark-bg{background:#1a1a1a}.code-editor-highlighted{flex:1;border:none;font-family:var(--font-mono);font-size:14px;line-height:1.6;padding:16px 12px 16px 16px;color:#fff;overflow-y:auto;white-space:pre;outline:none;text-align:left}.line-numbers{color:#878572;padding:16px 12px 16px 16px;font-family:var(--font-mono);font-size:14px;line-height:1.6;text-align:left;-webkit-user-select:none;user-select:none;border-right:1px solid #2a2a2a;min-width:45px}.editor-container{display:flex;flex:1;background:#1a1a1a;text-align:left;min-height:200px;overflow:hidden}.frame-crossy{z-index:300}.frame-code{background:#ffffffa6;border:1px solid rgba(255,255,255,.3);z-index:200}.frame-about{z-index:100}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100vh;overflow:hidden}body{font-family:Sora,sans-serif;font-display:swap;background:linear-gradient(180deg,#1e3a5f,#2d4b73,#3c5c87,#4b6d9b,#5a7eaf);position:relative;overflow-x:hidden}.main-header{position:fixed;top:0;left:0;right:0;padding:24px 32px;z-index:1000;display:flex;justify-content:space-between;align-items:center}.header-nav{display:flex;gap:clamp(12px,3vw,24px)}.header-title{font-family:Sora,sans-serif;font-size:52px;font-weight:600;color:#fff;margin:0;letter-spacing:.08em;line-height:1;text-shadow:0 4px 16px rgba(0,0,0,.3);background:linear-gradient(135deg,#fff,#f8f9fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.bubble{--bubble-size: 40px;--bubble-opacity-1: .15;--bubble-opacity-2: .06;--bubble-opacity-3: .03;--bubble-border-opacity: .1;--bubble-inset-opacity: .15;--bubble-animation-duration: 25s;position:absolute;width:var(--bubble-size);height:var(--bubble-size);border-radius:50%;opacity:.6;pointer-events:none;z-index:50;will-change:transform,opacity;transform:translateZ(0);backface-visibility:hidden;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,var(--bubble-opacity-1)),rgba(255,255,255,var(--bubble-opacity-2)),rgba(173,216,230,var(--bubble-opacity-3)));border:1px solid rgba(255,255,255,var(--bubble-border-opacity));box-shadow:0 3px 6px #0000001a,inset 0 1px rgba(255,255,255,var(--bubble-inset-opacity));animation:bubble-float var(--bubble-animation-duration) linear infinite}.bubble.tiny{--bubble-size: 15px;--bubble-opacity-1: .2;--bubble-opacity-2: .1;--bubble-opacity-3: .05;--bubble-border-opacity: .15;--bubble-inset-opacity: .25;--bubble-animation-duration: 18s}.bubble.small{--bubble-size: 25px;--bubble-opacity-1: .18;--bubble-opacity-2: .08;--bubble-opacity-3: .04;--bubble-border-opacity: .12;--bubble-inset-opacity: .2;--bubble-animation-duration: 20s}.bubble.medium-small{--bubble-size: 32px;--bubble-opacity-1: .16;--bubble-opacity-2: .07;--bubble-opacity-3: .035;--bubble-border-opacity: .11;--bubble-inset-opacity: .18;--bubble-animation-duration: 22s}.bubble.medium-large{--bubble-size: 50px;--bubble-opacity-1: .13;--bubble-opacity-2: .055;--bubble-opacity-3: .025;--bubble-border-opacity: .085;--bubble-inset-opacity: .14;--bubble-animation-duration: 27s}.bubble.large{--bubble-size: 60px;--bubble-opacity-1: .12;--bubble-opacity-2: .05;--bubble-opacity-3: .025;--bubble-border-opacity: .075;--bubble-inset-opacity: .12;--bubble-animation-duration: 30s}.bubble.extra-large{--bubble-size: 75px;--bubble-opacity-1: .1;--bubble-opacity-2: .045;--bubble-opacity-3: .02;--bubble-border-opacity: .06;--bubble-inset-opacity: .1;--bubble-animation-duration: 35s}@keyframes bubble-float{0%{transform:translateZ(0);opacity:0}5%{transform:translate3d(2px,-6vh,0);opacity:.15}10%{transform:translate3d(5px,-12vh,0);opacity:.3}15%{transform:translate3d(8px,-18vh,0);opacity:.4}25%{transform:translate3d(15px,-30vh,0);opacity:.5}50%{transform:translate3d(0,-60vh,0);opacity:.5}75%{transform:translate3d(-15px,-90vh,0);opacity:.5}90%{transform:translate3d(-5px,-108vh,0);opacity:.5}to{transform:translate3d(0,-120vh,0);opacity:.5}}.frame{position:fixed;background:#ffffffa6;border-radius:8px;box-shadow:0 4px 12px #0000001f;border:1px solid rgba(255,255,255,.3);overflow:hidden;min-width:250px;min-height:180px;transition:box-shadow .2s ease}.frame:hover{box-shadow:0 0 0 1px #00000026,0 4px 12px #0003}.frame.dragging{box-shadow:0 0 0 1px #0003,0 8px 24px #00000040}.frame-header{padding:10px 16px;border-bottom:1px solid rgba(229,231,235,.5);cursor:move;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:13px;color:#374151;background:#f9fafb;height:40px;margin:0}.frame-close{background:none;border:none;border-radius:50%;width:16px;height:16px;cursor:pointer;font-size:12px;color:#9ca3af;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.frame-close:hover{background:#ef4444;color:#fff}.frame-content{padding:20px;height:calc(100% - 40px);overflow:hidden;background:transparent;color:#374151;border-radius:0 0 8px 8px}.frame-crossy .frame-content{padding:0;overflow:hidden;background:linear-gradient(to bottom,#87ceeb,#98d8e8)}.frame-crossy .frame-content iframe{border-radius:0 0 8px 8px}.frame-code .frame-content{padding:0;height:calc(100% - 40px);background:#1a1a1a;margin:0}.frame-toggle{background:linear-gradient(135deg,#ffffff40,#ffffff1a);border:2px solid rgba(255,255,255,.4);border-radius:16px;color:#fff;padding:clamp(10px,2vw,14px) clamp(16px,4vw,28px);font-size:clamp(14px,2vw,16px);font-weight:500;cursor:pointer;transition:all .4s cubic-bezier(.25,.8,.25,1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-family:Sora,sans-serif;position:relative;overflow:hidden;box-shadow:0 8px 24px #0000001a,inset 0 1px #ffffff4d}.frame-toggle:hover{background:linear-gradient(135deg,#ffffff4d,#ffffff1f);border-color:#ffffff80;transform:translateY(-1px);box-shadow:0 8px 16px #0000001a,inset 0 1px #ffffff4d}.frame-toggle.active{background:linear-gradient(135deg,#ffffff8c,#ffffff59);color:#1e3a5f;border-color:#fffc;box-shadow:0 12px 24px #00000026,inset 0 1px #fff9,inset 0 0 0 1px #ffffff4d;transform:translateY(-1px);text-shadow:0 1px 2px rgba(255,255,255,.3);font-weight:600}.atmark{padding:0 2px}.atmark:before{content:"@"}.tmark{padding-right:2px}.tmark:before{content:"T"}.resize-handle{position:absolute;background:transparent;transition:background .2s}.resize-handle:hover{background:#3b82f61a}.resize-handle.resize-se{bottom:0;right:0;width:24px;height:24px;cursor:se-resize;border-radius:0 0 16px}.resize-handle.resize-s{bottom:0;left:24px;right:24px;height:12px;cursor:s-resize}.resize-handle.resize-e{top:24px;bottom:24px;right:0;width:12px;cursor:e-resize}.crossy-body{margin:0;padding:0;font-family:Arial,sans-serif;overflow:hidden;background:linear-gradient(to bottom,#87ceeb,#98d8e8)}#game-container{width:100vw;height:100vh;position:relative}#ui{position:absolute;top:20px;left:20px;color:#fff;font-size:24px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:100;line-height:1.3}#ui div{margin-bottom:5px}#ui .best-score{font-size:18px}#timer-display{position:absolute;top:20px;right:20px;color:#fff;font-size:24px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:100;transition:color .3s}#timer-display.warning{color:red;animation:pulse .5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}#controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);text-align:center;z-index:100}.control-buttons{display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:5px;margin-bottom:10px}.control-btn{background:#fffc;border:2px solid #333;border-radius:10px;cursor:pointer;font-size:24px;font-weight:700;transition:all .2s;box-shadow:0 4px 6px #0000001a;user-select:none;-webkit-user-select:none}.control-btn:hover{background:#fffffff2;transform:scale(1.05)}.control-btn:active{transform:scale(.95);background:#c8c8c8e6}.control-btn.up{grid-column:2;grid-row:1}.control-btn.left{grid-column:1;grid-row:2}.control-btn.right{grid-column:3;grid-row:2}.control-btn.down{grid-column:2;grid-row:3}.control-info{color:#fff;font-size:14px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#game-over{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#000000d9,#000000f2);color:#fff;padding:35px 30px;border-radius:10px;text-align:center;display:none;z-index:200;min-width:300px;border:2px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #00000080}#game-over h2{font-size:30px;margin:0 0 30px;font-weight:700;letter-spacing:.05em}#game-over p{font-size:24px;margin:0 0 30px;line-height:1.5}#game-over button{font-size:20px;padding:10px 30px;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:5px;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #4caf504d}#level-display{position:absolute;bottom:20px;right:20px;color:#fff;font-size:32px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:100;background-color:#0009;padding:10px 20px;border-radius:10px;border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}