@font-face{font-family:Geist;src:url(/fonts/GeistVariable.woff2)format("woff2");font-weight:100 900;font-style:normal;font-display:swap}:root{--page-bg:#fff;--canvas-bg:#f0f0f0;--grid-line:#1a1a1a0f;--grid-size:32px;--color-text:#111;--color-text-muted:#6b6b6b;--color-hint:#9a9a9a;--font-display:"Instrument Serif", "Times New Roman", serif;--font-sans:"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;--text-body:16px;--text-h1:56px}*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;height:100%;min-height:640px;margin:0;overflow:hidden}@media (width>=1000px) and (width<=1439px){html,body,#root{min-height:720px}}@media (width>=1440px){html,body,#root{min-height:900px}}body{font-family:var(--font-sans);font-size:var(--text-body);color:var(--color-text);background:var(--page-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;line-height:1.5}button,input,textarea{font:inherit}a{color:inherit}img{max-width:none}@media (width<=999px){:root{--text-h1:40px;--text-body:15px}}@media (width<=480px){:root{--text-h1:40px;--text-body:14px}}.playground-header{box-sizing:border-box;justify-content:space-between;align-items:flex-end;gap:clamp(.75rem,2vw,1.5rem);width:100%;min-height:2.75rem;margin-bottom:1rem;padding:0;display:flex}.playground-header__brand{flex-direction:column;flex:auto;align-items:flex-start;gap:0;min-width:0;display:flex}.playground-header__title{font-family:var(--font-display);font-size:var(--text-h1);letter-spacing:-.02em;color:var(--color-text);flex-shrink:0;margin:0;padding-top:0;padding-bottom:.05rem;font-weight:400;line-height:1}.playground-header__tagline{max-width:34rem;font-family:var(--font-sans);letter-spacing:0;color:#6b6b6b;margin:0;padding-top:12px;font-size:20px;font-weight:400;line-height:1.3}.playground-header__meta{text-align:right;flex:0 auto;justify-content:flex-end;align-items:center;gap:8px;width:fit-content;max-width:min(420px,42vw);margin-left:auto;transition:opacity .14s,transform .14s;display:inline-flex}.playground-header__meta.is-hint{color:var(--color-hint)}.playground-header__meta.is-project{color:var(--color-text)}.playground-header__meta.is-out{opacity:0;transform:translateY(4px)}.playground-header__meta.is-in{opacity:1;transform:translateY(0)}.playground-header__meta.is-reduced-motion{transition:opacity .16s;transform:none!important}.playground-header__copy{justify-content:flex-end;align-items:flex-start;gap:8px;width:fit-content;max-width:100%;display:inline-flex}.playground-header__icon{opacity:.85;flex-shrink:0;justify-content:center;align-items:center;margin:.12rem 0 0;line-height:0;display:inline-flex}.playground-header__meta.is-project .playground-header__icon{opacity:.75}.playground-header__text{width:fit-content;max-width:min(420px,100%);font-family:var(--font-sans);font-size:var(--text-body);letter-spacing:0;text-align:left;white-space:normal;overflow-wrap:break-word;word-wrap:break-word;flex:0 auto;font-weight:400;line-height:1.3;overflow:visible}.playground-header__meta.is-project .playground-header__text{font-weight:500}@media (width>=1024px){.playground-header__meta.is-project{max-width:none}.playground-header__meta.is-project .playground-header__text{white-space:nowrap;overflow-wrap:normal;word-wrap:normal;max-width:none}}.playground-header__tools{flex-shrink:0;align-items:center;gap:4px;display:inline-flex}.playground-header__tool{object-fit:cover;border-radius:3px;width:16px;height:16px;display:block}.playground-header__meta.is-touch{max-width:min(280px,58vw)}.playground-header__meta.is-touch.is-project{flex-direction:column;align-items:flex-start;gap:4px;max-width:100%}.playground-header__meta.is-touch .playground-header__tools{display:none}.playground-header__detail-hint{font-family:var(--font-sans);font-size:max(11px, calc(var(--text-body) - 3px));letter-spacing:0;color:#a3a3a3;margin:0;padding-left:28px;font-weight:400;line-height:1.3;display:block}@media (width<=999px){.playground-header__tagline{max-width:none;font-size:20px}.playground-header__meta,.playground-header__meta.is-touch{justify-content:flex-start;max-width:100%;margin-left:0;margin-right:0;padding-right:0}}@media (width<=640px){.playground-header__brand{min-height:0}.playground-header__text{font-size:max(12px, calc(var(--text-body) - 1px))}.playground-header__tools{display:none}}.canvas-controls{z-index:20;-webkit-backdrop-filter:blur(10px);cursor:default;touch-action:manipulation;background:#ffffffeb;border:1px solid #1a1a1a14;border-radius:999px;align-items:center;gap:.15rem;padding:.3rem;display:flex;position:absolute;top:.85rem;right:.85rem;box-shadow:0 4px 18px #1a1a1a14}.canvas-controls__button{appearance:none;color:var(--color-text);cursor:pointer;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;width:1.85rem;height:1.85rem;padding:0;transition:background .14s,color .14s,opacity .14s;display:inline-flex}.canvas-controls__button:hover:not(:disabled){background:#1a1a1a0f}.canvas-controls__button:focus-visible{outline:2px solid var(--color-text);outline-offset:1px}.canvas-controls__button:disabled{opacity:.35;cursor:default}.canvas-controls__button[aria-pressed=true]{background:#1a1a1a14}.canvas-controls__button--tooltip{position:relative}.canvas-controls__button--tooltip:after{content:attr(data-tooltip);color:#fff;font-family:var(--font-sans);letter-spacing:.01em;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;z-index:30;background:#111111eb;border-radius:.4rem;padding:.35rem .55rem;font-size:.7rem;font-weight:500;line-height:1.2;transition:opacity .12s,transform .12s,visibility .12s;position:absolute;top:calc(100% + .55rem);left:50%;transform:translate(-50%)translateY(-2px)}.canvas-controls__button--tooltip:hover:after,.canvas-controls__button--tooltip:focus-visible:after{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.canvas-controls__views{align-items:center;gap:.1rem;display:inline-flex}.canvas-controls__divider{background:#1a1a1a1f;width:1px;height:1rem;margin:0 .2rem}.canvas-controls__zoom{text-align:center;min-width:2.6rem;font-family:var(--font-sans);letter-spacing:.02em;color:var(--color-text-muted);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;font-size:.75rem;font-weight:500}@media (width<=999px){.canvas-controls{gap:.2rem;padding:.4rem;inset:auto auto .85rem 50%;transform:translate(-50%)}.canvas-controls__button{width:2.75rem;height:2.75rem}.canvas-controls__button svg{width:20px;height:20px}.canvas-controls__divider{height:1.25rem;margin:0 .28rem}.canvas-controls__zoom{min-width:3rem;font-size:.8125rem}.canvas-controls__button--tooltip:after{top:auto;bottom:calc(100% + .55rem)}}.project-list-overlay{z-index:15;-webkit-backdrop-filter:blur(10px);cursor:default;touch-action:manipulation;background:#ffffffb8;justify-content:stretch;align-items:stretch;padding:clamp(.75rem,2vw,1.1rem);display:flex;position:absolute;inset:0}.project-list-overlay__panel{background:#fff;border:1px solid #11111114;border-radius:clamp(.75rem,1.5vw,.95rem);flex-direction:column;width:100%;min-height:0;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #1111110f}.project-list-overlay__close{z-index:2;appearance:none;font-family:var(--font-sans);color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;border-radius:12px;padding:.35rem .6rem;font-size:.8125rem;font-weight:500;position:absolute;top:.45rem;right:.55rem}.project-list-overlay__close:hover{color:var(--color-text);background:#1111110d}.project-list-overlay__close:focus-visible{outline:2px solid var(--color-text);outline-offset:1px}.project-list-overlay__table{scrollbar-width:thin;flex:1;min-height:0;padding:.55rem .55rem .45rem 1.55rem;overflow:auto}.project-list-overlay__row{border-radius:10px;grid-template-columns:minmax(0,17.5rem) minmax(8rem,.7fr) minmax(11rem,1.15fr) auto;align-items:center;gap:0 1.5rem;padding:.38rem .35rem;display:grid}.project-list-overlay__row.is-head{z-index:1;font-family:var(--font-sans);letter-spacing:0;text-transform:none;color:#181818;background:#fff;margin-bottom:0;padding-top:.2rem;padding-bottom:.35rem;font-size:.8125rem;font-weight:500;position:sticky;top:0}.project-list-overlay__row:not(.is-head):hover{background:#11111108}.project-list-overlay__project{min-width:0;max-width:17.5rem}.project-list-overlay__name{font-family:var(--font-sans);color:var(--color-text);margin:0;font-size:.875rem;font-weight:500;line-height:1.2}.project-list-overlay__desc{font-family:var(--font-sans);color:var(--color-text-muted);margin:.1rem 0 0;font-size:.75rem;font-weight:400;line-height:1.3}.project-list-overlay__skill,.project-list-overlay__tool{min-width:0}.project-list-overlay__chip{max-width:100%;font-family:var(--font-sans);white-space:nowrap;border-radius:8px;align-items:center;gap:.28rem;padding:.18rem .4rem .18rem .3rem;font-size:.7rem;font-weight:500;line-height:1.2;display:inline-flex}.project-list-overlay__chip--skill{color:var(--color-text-muted);background:#1111110d;border:0}.project-list-overlay__chip-icon{opacity:.75;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.project-list-overlay__chip--tool{color:var(--color-text);background:0 0;border:0;padding:.12rem .28rem .12rem .12rem}.project-list-overlay__tool-list{flex-wrap:wrap;gap:.45rem .65rem;display:flex}.project-list-overlay__tool-icon{object-fit:cover;border-radius:3px;flex-shrink:0;width:14px;height:14px;display:block}.project-list-overlay__tool-label{text-overflow:ellipsis;overflow:hidden}.project-list-overlay__actions{justify-content:flex-end;gap:.35rem;display:flex}.project-list-overlay__actions-head{text-align:right}.project-list-overlay__button{appearance:none;min-height:1.85rem;color:var(--color-text);font-family:var(--font-sans);cursor:pointer;white-space:nowrap;box-shadow:none;background:#fff;border:1px solid #11111124;border-radius:12px;justify-content:center;align-items:center;padding:.3rem .65rem;font-size:.72rem;font-weight:550;line-height:1;text-decoration:none;display:inline-flex}.project-list-overlay__button--primary{background:var(--color-text);border-color:var(--color-text);color:#fff}.project-list-overlay__button:hover{background:#1111110a}.project-list-overlay__button--primary:hover{background:#2a2a2a}.project-list-overlay__button:focus-visible{outline:2px solid var(--color-text);outline-offset:1px}@media (width<=900px){.project-list-overlay__row{grid-template-columns:minmax(0,14.5rem) minmax(7.25rem,.65fr) minmax(9rem,1fr) auto;column-gap:1.15rem}.project-list-overlay__project{max-width:14.5rem}}@media (width<=720px){.project-list-overlay{padding:.55rem}.project-list-overlay__panel{padding-bottom:3.25rem}.project-list-overlay__close{min-width:6.5rem;min-height:2.75rem;color:var(--color-text);background:#1111110d;border-radius:999px;padding:.55rem 1.1rem;font-size:.875rem;inset:auto auto .55rem 50%;transform:translate(-50%)}.project-list-overlay__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"project actions""skill actions""tool actions";gap:.28rem .75rem;padding:.55rem .5rem}.project-list-overlay__row.is-head{display:none}.project-list-overlay__project{grid-area:project;max-width:none}.project-list-overlay__skill{grid-area:skill}.project-list-overlay__tool{grid-area:tool}.project-list-overlay__actions{flex-direction:column;grid-area:actions;align-items:stretch}.project-list-overlay__tool-label{display:none}}.project-thumbnail{left:var(--thumb-x);top:var(--thumb-y);width:var(--thumb-w);height:var(--thumb-h);transform:scale(calc(var(--thumb-scale,1) * var(--thumb-mobile-scale,1)));transform-origin:50%;will-change:transform, left, top;z-index:1;-webkit-tap-highlight-color:transparent;border:1px solid #1a1a1a14;border-radius:10px;transition:left .42s cubic-bezier(.22,1,.36,1),top .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .22s,z-index;display:block;position:absolute;overflow:hidden;box-shadow:0 1px 2px #1a1a1a0a}.project-thumbnail img{object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}@media (width<=999px){.project-thumbnail img{object-fit:contain}}.project-thumbnail.is-active{z-index:5;border-color:#1a1a1a29;box-shadow:0 8px 24px #1a1a1a1a}.project-thumbnail:focus-visible{outline:2px solid var(--color-text);outline-offset:3px;z-index:6}.project-thumbnail.is-reduced-motion{transition:box-shadow .16s,border-color .16s}@media (prefers-reduced-motion:reduce){.project-thumbnail{transition:box-shadow .16s,border-color .16s}}@media (width<=799px){.project-thumbnail{--thumb-mobile-scale:1;border-radius:8px}}.draggable-canvas{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background-color:var(--canvas-bg);background-image:linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);background-size:var(--grid-cell,var(--grid-size)) var(--grid-cell,var(--grid-size));background-position:var(--grid-x,0) var(--grid-y,0);scrollbar-width:none;overscroll-behavior:none;border:0;border-top:1px solid #1111110f;border-radius:16px;flex:auto;width:100%;min-height:0;position:relative;overflow:hidden}.draggable-canvas::-webkit-scrollbar{display:none}.draggable-canvas.is-dragging{cursor:grabbing}.draggable-canvas.is-dragging .project-thumbnail{pointer-events:none}.draggable-canvas__surface{will-change:transform;transform-origin:0 0;background:0 0;position:absolute;top:0;left:0;transform:translate(0,0)scale(1)}.playground-page{box-sizing:border-box;background:var(--page-bg);flex-direction:column;width:100%;height:100%;margin:0;padding:0;display:flex;overflow:hidden}.playground-page__frame{box-sizing:border-box;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) auto;align-items:stretch;width:100%;max-width:none;height:100%;min-height:0;padding:0;display:grid}.playground-header{display:contents}.playground-header__brand{grid-area:1/1;margin-bottom:1rem}.playground-header__meta{grid-area:1/2;align-self:end;margin-bottom:1rem}.draggable-canvas{grid-area:2/1/auto/-1;align-self:stretch;height:100%;min-height:0}@media (width>=1440px){.playground-page{min-height:900px}}@media (width>=1000px) and (width<=1439px){.playground-page{min-height:720px}}@media (width<=999px){.playground-page{min-height:640px}.playground-page__frame{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);align-items:stretch}.playground-header__brand{grid-area:1/1;margin-bottom:.85rem}.draggable-canvas{grid-area:2/1}.playground-header__meta{grid-area:3/1;align-self:stretch;margin-top:.75rem;margin-bottom:0}}@media (width<=799px){.playground-page__frame{padding-top:.5rem}}