@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap";:root{--bg-color:#0f1115;--panel-bg:#191c23b3;--panel-border:#ffffff14;--text-primary:#f0f0f0;--text-secondary:#a0a5b1;--text-muted:#6b7280;--accent-color:#6366f1;--accent-hover:#818cf8;--font-main:"Inter", "Noto Sans JP", sans-serif;--size-xs:.75rem;--size-sm:.8125rem;--size-base:.875rem;--size-lg:1rem;--size-xl:1.125rem;--size-2xl:1.25rem}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);font-size:var(--size-base);background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh;overflow:hidden}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input[type=range]{accent-color:var(--accent-color)}.app-container{background:radial-gradient(circle at 50% 0%, #1f2335 0%, var(--bg-color) 70%);width:100vw;height:100vh;display:flex}.narrow-sidebar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--panel-border);z-index:15;background:#0f1115e6;flex-direction:column;align-items:center;gap:1.5rem;width:64px;padding:1rem 0;display:flex}.nav-icon{background:linear-gradient(135deg, var(--accent-color), #c084fc);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;margin-bottom:1rem;font-size:1.2rem;font-weight:700;display:flex}.nav-btn{width:44px;height:44px;color:var(--text-secondary);border-radius:12px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}.nav-btn:hover{color:var(--text-primary);background:#ffffff1a}.nav-btn.active{color:var(--accent-color);background:#6366f133}.nav-btn.active:before{content:"";background:var(--accent-color);border-radius:0 4px 4px 0;width:4px;height:20px;position:absolute;top:50%;left:-4px;transform:translateY(-50%)}.sidebar{background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--panel-border);z-index:10;flex-direction:column;gap:1rem;width:360px;padding:1rem;display:flex;overflow-y:auto}.panel-header{margin-bottom:1.5rem;padding:0 .5rem}.panel-title-main{font-size:var(--size-lg);color:var(--text-primary);letter-spacing:-.01em;align-items:center;gap:.75rem;font-weight:700;display:flex}.panel-section{border:1px solid var(--panel-border);background:#ffffff05;border-radius:12px;flex-direction:column;gap:1.25rem;padding:1.25rem .85rem;display:flex}.panel-section-title{font-size:var(--size-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);align-items:center;gap:.5rem;margin-bottom:.25rem;font-weight:800;display:flex}.control-group{flex-direction:column;gap:.6rem;display:flex}.control-group label{font-size:var(--size-sm);color:#ffffffd9;justify-content:space-between;align-items:center;font-weight:600;display:flex}.control-group label span{font-size:var(--size-xs);color:var(--accent-hover);font-variant-numeric:tabular-nums;font-weight:700}.slider-container{align-items:center;gap:1rem;display:flex}.slider-container input[type=range]{flex:1}.slider-value{font-size:var(--size-xs);color:var(--text-primary);text-align:right;min-width:32px;font-weight:700}.btn{border:1px solid var(--panel-border);width:100%;color:var(--text-primary);font-size:var(--size-sm);background:#ffffff0d;border-radius:10px;justify-content:center;align-items:center;gap:.6rem;padding:.75rem 1rem;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.btn:hover{background:#ffffff1a}.btn-primary{background:var(--accent-color);border-color:var(--accent-color)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-outline{color:var(--text-primary);background:0 0;border:1px solid #fff3}.btn-outline:hover{background:#ffffff0d;border-color:#fff6}.word-list-container{margin-top:1rem}.word-list{flex-direction:column;gap:.5rem;max-height:400px;margin-bottom:1rem;padding-right:.5rem;display:flex;overflow-y:auto}.word-list::-webkit-scrollbar{width:6px}.word-list::-webkit-scrollbar-track{background:#0000001a}.word-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.word-item{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:.75rem;padding:.75rem;display:flex}.word-item.dragging{opacity:.5;border-color:var(--accent-color);background:#6366f133}.drag-handle{cursor:grab;color:var(--text-secondary);justify-content:center;align-items:center;display:flex}.drag-handle:active{cursor:grabbing}.word-input{color:var(--text-primary);font-family:var(--font-main);font-size:var(--size-base);background:#0000004d;border:1px solid #ffffff1a;border-radius:8px;flex:1;padding:.6rem .85rem;transition:all .2s}.word-input:focus{border-color:var(--accent-color);background:#00000080;outline:none;box-shadow:0 0 0 2px #6366f133}.pos-badge{font-size:var(--size-xs);color:var(--text-secondary);text-align:center;background:#ffffff14;border-radius:6px;min-width:50px;padding:4px 10px;font-weight:700}.delete-btn{color:var(--text-secondary);border-radius:4px;padding:.25rem}.delete-btn:hover{color:#ef4444;background:#ef44441a}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#0009;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-content{border:1px solid var(--panel-border);background:#1f2335;border-radius:16px;flex-direction:column;width:500px;max-width:90vw;max-height:80vh;display:flex;box-shadow:0 25px 50px -12px #00000080}.modal-header{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.modal-title{font-size:var(--size-xl);color:var(--text-primary);letter-spacing:-.02em;font-weight:700}.close-btn{color:var(--text-secondary);border-radius:50%;justify-content:center;align-items:center;padding:.25rem;display:flex}.close-btn:hover{color:var(--text-primary);background:#ffffff1a}.modal-body{padding:1.5rem;overflow-y:auto}.modal-footer{border-top:1px solid var(--panel-border);justify-content:flex-end;gap:1rem;padding:1.5rem;display:flex}.canvas-area{flex:1;justify-content:center;align-items:center;padding:2rem;display:flex;position:relative;overflow:hidden}.toolbar{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--panel-border);z-index:20;border-radius:12px;align-items:center;gap:.5rem;padding:.5rem;display:flex;position:absolute;top:2rem;left:50%;transform:translate(-50%)}.toolbar-btn{width:40px;height:40px;color:var(--text-secondary);border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex}.toolbar-btn:hover{color:var(--text-primary);background:#ffffff1a}.toolbar-btn.active{color:var(--accent-color);background:#6366f133}.toolbar-group{flex-direction:column;justify-content:center;gap:.15rem;padding:0 .5rem;display:flex}.toolbar-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.6rem;font-weight:800;line-height:1}.toolbar-select{color:var(--text-primary);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;outline:none;min-width:150px;height:32px;padding:0 .5rem;font-size:.85rem;transition:all .2s}.toolbar-select:hover{background:#ffffff1a}.toolbar-select option{color:#fff;background:#1f2335}.mode-indicator{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:25;background:linear-gradient(135deg,#6366f133,#a855f733);border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:.75rem;padding:.5rem 1.25rem;animation:.4s cubic-bezier(.16,1,.3,1) slideInLeft;display:flex;position:absolute;top:2rem;left:2rem;box-shadow:0 4px 20px #0003}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.mode-indicator-dot{background:var(--accent-color);width:8px;height:8px;box-shadow:0 0 10px var(--accent-color);border-radius:50%;animation:2s infinite pulse}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}.mode-indicator-text{color:var(--text-primary);letter-spacing:.05em;text-transform:uppercase;font-size:.85rem;font-weight:700}.canvas-wrapper{transform-origin:50%;flex-shrink:0;position:relative;overflow:hidden}.mock-bg-image{background:#000;width:100%;height:100%;position:absolute;top:0;left:0}.mock-text-obj{cursor:move;background:#0003;border:2px dashed #ffffff80;border-radius:4px;padding:1rem;position:absolute}.mock-text-obj .handle{cursor:nwse-resize;background:#fff;border-radius:50%;width:10px;height:10px;position:absolute;bottom:-5px;right:-5px}.mock-text-obj h1{color:#fff;text-shadow:2px 2px 10px #00000080;font-size:4rem;font-weight:800}.mock-word-cloud{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fffc;background:#ffffff0d;border-radius:20px;justify-content:center;align-items:center;width:400px;height:300px;font-weight:700;display:flex;position:absolute;top:10%;right:5%}.word-cloud-items{width:100%;height:100%;position:relative}.word-1{color:#fca5a5;font-size:3rem;position:absolute;top:20%;left:10%}.word-2{color:#93c5fd;font-size:2rem;position:absolute;top:40%;right:20%}.word-3{color:#86efac;font-size:2.5rem;position:absolute;bottom:30%;left:30%}.word-4{color:#fde047;font-size:1.5rem;position:absolute;top:60%;left:50%}.grid-1{grid-template-columns:1fr;gap:.75rem;display:grid}.grid-2{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:.75rem;display:grid}.mt-auto{margin-top:auto}.panel-footer-fixed{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--panel-border);z-index:20;background:#161925f2;margin:auto -.85rem -1rem;padding:1.25rem .85rem;position:sticky;bottom:-1rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.p-0{padding:0!important}.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-track{background:0 0}.sidebar::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.sidebar::-webkit-scrollbar-thumb:hover{background:#fff3}.tier-card{background:#0003;border:1px solid #ffffff0d;border-radius:10px;flex-direction:column;gap:.75rem;padding:.85rem;display:flex}.tier-header{justify-content:space-between;align-items:center;display:flex}.tier-label{font-size:var(--size-xs);letter-spacing:.1em;font-weight:900}input[type=number],select{color:#fff;width:100%;font-family:var(--font-main);font-size:var(--size-sm);background:#0000004d;border:1px solid #ffffff1a;border-radius:8px;padding:.5rem .75rem;font-weight:500;transition:all .2s}input[type=number]:focus,select:focus{border-color:var(--accent-color);background:#00000080;outline:none}.input-label-small{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem;font-size:.6rem;font-weight:800;display:block}.toggle-switch{width:40px;height:20px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background-color:#ffffff1a;border:1px solid #ffffff1a;border-radius:20px;transition:all .3s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:var(--text-secondary);border-radius:50%;width:14px;height:14px;transition:all .3s;position:absolute;bottom:2px;left:2px}input:checked+.toggle-slider{background-color:var(--accent-color);border-color:var(--accent-color)}input:checked+.toggle-slider:before{background-color:#fff;transform:translate(20px)}