:root{--ink: #16140f;--ink-soft: #5f594d;--cream: #f3efe4;--cream-2: #e8e2d2;--yellow: #ffe24b;--lime: #c6f24b;--pink: #ff8fcf;--blue: #7db4ff;--ui: "Space Grotesk", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, Consolas, monospace;--border: 2px solid var(--ink);--shadow: 3px 3px 0 var(--ink);--shadow-sm: 2px 2px 0 var(--ink);--ease: .12s cubic-bezier(.3, .7, .4, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--ui);background:var(--cream);color:var(--ink);display:flex;flex-direction:column;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.tr-viewport :focus-visible,.tr-spline-editor :focus-visible{outline-color:var(--yellow)}header{display:flex;align-items:stretch;border-bottom:var(--border);background:var(--cream);flex:none}.brand{display:flex;align-items:center;gap:14px;padding:12px 20px;border-right:var(--border)}.mark{width:34px;height:34px;background:var(--ink);color:var(--yellow);display:flex;align-items:center;justify-content:center;flex:none}.mark svg{display:block}.brand h1{font-size:17px;font-weight:700;letter-spacing:.08em;line-height:1.1}.brand .kana{font-family:var(--mono);font-size:9px;color:var(--ink-soft);letter-spacing:.14em;margin-top:3px}.head-spacer{flex:1}.head-cell{display:flex;align-items:center;gap:12px;padding:0 16px;border-left:var(--border)}.ver{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:var(--border);background:var(--lime);padding:3px 8px}.home-link{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);text-decoration:none;padding:4px 6px}.home-link:hover{background:var(--yellow)}.hbtn{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:7px 12px;border:var(--border);background:var(--cream);box-shadow:var(--shadow-sm);transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}.hbtn:hover{background:var(--yellow)}.hbtn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%) translateY(8px);background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:12px;padding:10px 16px;max-width:min(80vw,480px);opacity:0;pointer-events:none;transition:opacity var(--ease),transform var(--ease);z-index:60}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}#toast.error{background:var(--pink);color:var(--ink)}main{flex:1;min-height:0;display:flex}.tr-app{display:flex;flex:1;min-height:0;min-width:0}.tr-sidebar{width:300px;min-width:300px;background:var(--cream);border-right:var(--border);overflow-y:auto;display:flex;flex-direction:column}.tr-sidebar::-webkit-scrollbar{width:6px}.tr-sidebar::-webkit-scrollbar-thumb{background:var(--ink)}.tr-sidebar::-webkit-scrollbar-track{background:var(--cream-2)}.tr-panel{border-bottom:var(--border);flex:none}.tr-panel__header{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;background:var(--cream-2);border:0;text-align:left;transition:background var(--ease)}.tr-panel__header:hover{background:var(--yellow)}.tr-panel__number{font-family:var(--mono);font-size:9px;font-weight:700;background:var(--ink);color:var(--cream);padding:3px 6px;letter-spacing:.05em}.tr-panel__title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;flex:1}.tr-panel__toggle{font-family:var(--mono);font-size:10px;transition:transform var(--ease)}.tr-panel.collapsed .tr-panel__toggle{transform:rotate(-90deg)}.tr-panel__body{padding:14px}.tr-panel.collapsed .tr-panel__body{display:none}.tr-control{margin-bottom:14px}.tr-control:last-child{margin-bottom:0}.tr-control__label{font-family:var(--mono);font-size:9.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}.tr-control__value{font-weight:700;color:var(--ink);background:var(--yellow);padding:1px 5px}.tr-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tr-type-btn{font-family:var(--ui);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:10px 6px;border:var(--border);background:var(--cream);box-shadow:var(--shadow-sm);transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}.tr-type-btn:hover{background:var(--cream-2)}.tr-type-btn[aria-pressed=true]{background:var(--yellow);box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--ink);cursor:pointer;outline-offset:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--yellow);border:var(--border);cursor:pointer}input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--yellow);border:var(--border);border-radius:0;cursor:pointer}.tr-check{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer;font-family:var(--mono);font-size:9.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}.tr-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}.tr-check__box{width:18px;height:18px;border:var(--border);background:var(--cream);display:flex;align-items:center;justify-content:center;flex:none;transition:background var(--ease)}.tr-check__box:after{content:"✓";font-size:12px;font-weight:700;display:none}.tr-check input:checked+.tr-check__box{background:var(--lime)}.tr-check input:checked+.tr-check__box:after{display:block}.tr-check input:focus-visible+.tr-check__box{outline:3px solid var(--ink);outline-offset:2px}.tr-color-row{display:flex;gap:6px;flex-wrap:wrap}.tr-swatch{width:28px;height:28px;padding:0;border:var(--border);box-shadow:var(--shadow-sm);transition:transform var(--ease),box-shadow var(--ease)}.tr-swatch:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}.tr-swatch[aria-pressed=true]{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px);outline:2px solid var(--yellow);outline-offset:2px}.tr-spline-editor{position:relative;width:100%;aspect-ratio:1 / 1;background:var(--ink);border:var(--border);cursor:crosshair;overflow:hidden;margin-bottom:10px;touch-action:none}.tr-spline-editor canvas{width:100%;height:100%;display:block}.tr-spline-hint{position:absolute;bottom:5px;left:7px;right:7px;font-family:var(--mono);font-size:7.5px;color:#f3efe480;text-transform:uppercase;letter-spacing:.02em;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tr-spline-presets{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}.tr-preset-btn{font-family:var(--mono);font-size:8.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;padding:4px 8px;border:var(--border);background:var(--cream);box-shadow:var(--shadow-sm);transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}.tr-preset-btn:hover{background:var(--cream-2)}.tr-preset-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}.tr-btn{font-family:var(--ui);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:10px 16px;border:var(--border);background:var(--cream);box-shadow:var(--shadow);width:100%;transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}.tr-btn:hover{background:var(--cream-2)}.tr-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.tr-btn.primary{background:var(--yellow)}.tr-btn.primary:hover{background:#f5d63a}.tr-btn.lime{background:var(--lime)}.tr-btn.lime:hover{background:#b7e63a}.tr-btn.pink{background:var(--pink)}.tr-btn.pink:hover{background:#f77fc2}.tr-btn.small{font-size:9.5px;padding:7px 12px;box-shadow:var(--shadow-sm)}.tr-btn.small:active{transform:translate(2px,2px)}.tr-viewport{flex:1;min-width:0;position:relative;background:var(--ink);overflow:hidden;touch-action:none}.tr-viewport canvas{display:block}.tr-viewport__hint{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:9px;color:#f3efe473;text-transform:uppercase;letter-spacing:.1em;pointer-events:none}.tr-viewport__controls{position:absolute;top:12px;right:12px;display:flex;gap:6px}.tr-view-btn{font-family:var(--mono);font-size:9.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;padding:6px 12px;background:#16140fd9;color:var(--cream);border:1px solid rgba(243,239,228,.25);transition:background var(--ease)}.tr-view-btn:hover{background:#f3efe426}.tr-view-btn[aria-pressed=true]{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.tr-viewport__info{position:absolute;bottom:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}.tr-info-tag{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;background:#16140fd9;color:var(--cream);border:1px solid rgba(243,239,228,.25)}.tr-info-tag b{color:var(--lime);font-weight:600;margin-left:4px}.tr-export-bar{padding:12px 14px;border-top:var(--border);background:var(--cream-2);margin-top:auto;display:flex;flex-direction:column;gap:8px}footer{flex:none;border-top:var(--border);background:var(--cream);display:flex;align-items:center;gap:26px;padding:8px 20px;font-family:var(--mono);font-size:10.5px;color:var(--ink-soft)}footer b{color:var(--ink);font-weight:500}footer .spacer{flex:1}footer a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}footer a:hover{color:var(--ink)}@media (max-width: 900px){.brand .kana,.hide-sm{display:none}}@media (max-width: 768px){.tr-app{flex-direction:column}.tr-sidebar{width:100%;min-width:0;max-height:45vh;border-right:none;border-bottom:var(--border)}.tr-viewport{min-height:45vh}.tr-viewport__hint{display:none}}@media (max-width: 700px){header{flex-wrap:wrap}.brand{border-right:none;padding:10px 14px}.head-cell{width:100%;border-left:none;border-top:var(--border);justify-content:space-between;padding:6px 14px}}@media (hover: none){.tr-swatch:hover{transform:none;box-shadow:var(--shadow-sm)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation:none!important}}