:root{color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;height:100dvh;margin:0;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{font-family:Karla,system-ui,sans-serif;color:#fbebd6;line-height:1.6;background:radial-gradient(circle at 63% 21%,rgba(255,236,190,.95) 0,rgba(255,210,140,.45) 9%,transparent 36%),linear-gradient(#5d6f8a,#c99e7e 28%,#efc088 44%,#e6b075 50%,#e6b075);overscroll-behavior:none;touch-action:manipulation}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.vig{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,transparent 45%,rgba(20,6,10,.6))}.lab{position:fixed;z-index:4;left:0;top:0;transform:translate(-50%);font:inherit;font-weight:600;font-size:.95rem;color:#fff2dd;background:#1c0a0c73;border:1px solid rgba(255,242,221,.3);border-radius:999px;padding:3px 14px;cursor:pointer;white-space:nowrap;text-shadow:0 1px 6px rgba(20,6,10,.8);transition:opacity .3s,background .2s}.lab:hover,.lab:focus-visible{background:#1c0a0ccc}.lab:focus-visible,.close:focus-visible,.row a:focus-visible,.links a:focus-visible{outline:3px solid #fff2dd;outline-offset:3px}.hello{position:fixed;z-index:5;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:min(300px,calc(100vw - 36px));margin:0;padding:14px 16px 14px 18px;display:flex;align-items:flex-start;gap:12px;color:#fff6e8;background:#1c0a0c73;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,242,221,.3);border-radius:22px 28px 26px 18px;pointer-events:none}.hello-leaf{flex:0 0 auto;width:28px;height:28px;margin-top:2px;transform:rotate(-18deg);filter:drop-shadow(0 1px 4px rgba(20,6,10,.45))}.hello p{margin:0;font-size:.95rem;font-weight:600;line-height:1.45;text-shadow:0 1px 8px rgba(20,6,10,.55)}.foot{position:fixed;z-index:5;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 12px;pointer-events:none}.id{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;text-shadow:0 1px 10px rgba(20,6,10,.75)}.name{font-family:"Young Serif",Georgia,serif;font-size:clamp(1.35rem,3.5vw,1.85rem);line-height:1.15;color:#fff6e8}.role{font-size:.95rem;font-weight:600;color:#f1d3b8}.links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;pointer-events:auto}.links a{color:#fbebd6;text-decoration:none;font-weight:600;padding:7px 16px;border-radius:999px;background:#1c0a0c8c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(251,235,214,.25)}.links a:hover{background:#1c0a0ccc}#view{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:none;opacity:0;background:var(--c);transition:opacity .6s}#view.on{opacity:1}.veins{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.tint{position:absolute;top:0;right:0;bottom:0;left:0;background:#19080c9e}.vc{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s}#view.on .vc{opacity:1;transition-delay:.3s}.in{width:100%;max-width:720px;padding:clamp(24px,5vw,56px)}.in h2{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;margin:0 0 8px;color:#fff6e8}.award{margin:0 0 4px;font-weight:600;font-size:1.1rem;color:#fff6e8}.tech{margin:0 0 18px;color:#f1d3b8}.demo{margin:0 0 22px;padding:0}.demo[hidden]{display:none}.demo-btn{position:relative;display:block;width:100%;margin:0;padding:0;border:none;background:none;font:inherit;color:inherit;cursor:zoom-in;text-align:left}.demo-btn:focus-visible{outline:3px solid #fff2dd;outline-offset:3px}.demo img{display:block;width:100%;max-height:min(42vh,360px);object-fit:cover;object-position:top center;border:1px solid rgba(255,246,232,.28)}.demo.fit .demo-btn{width:auto;max-width:100%}.demo.fit img{width:auto;max-width:100%;max-height:min(36vh,280px);margin:0;object-fit:contain;object-position:left center}.demo-hint{position:absolute;right:10px;bottom:10px;font-size:.8rem;font-weight:600;color:#fff6e8;background:#14060a8c;border:1px solid rgba(255,246,232,.35);border-radius:999px;padding:4px 12px;pointer-events:none;opacity:0;transition:opacity .2s}.demo-btn:hover .demo-hint,.demo-btn:focus-visible .demo-hint{opacity:1}.zoom{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px);background:#0c0408e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:zoom-out}.zoom[hidden]{display:none}.zoom img{display:block;max-width:min(96vw,1200px);max-height:calc(100vh - 96px);width:auto;height:auto;object-fit:contain;border:1px solid rgba(255,246,232,.28);cursor:default;box-shadow:0 18px 60px #00000073}.zoom-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));z-index:1;font:inherit;font-weight:600;color:#fff6e8;background:#00000059;border:1.5px solid rgba(255,246,232,.5);border-radius:999px;padding:7px 20px;cursor:pointer}.zoom-close:focus-visible{outline:3px solid #fff2dd;outline-offset:3px}.sum{margin:0 0 24px;color:#fff6e8;font-size:1.05rem;line-height:1.55}.row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.row a{color:#fff6e8;font-weight:600;text-underline-offset:3px}.close{margin-left:auto;font:inherit;font-weight:600;color:#fff6e8;background:#00000040;border:1.5px solid rgba(255,246,232,.5);border-radius:999px;padding:7px 20px;cursor:pointer}@media(hover:none),(pointer:coarse){.demo-hint{opacity:.95}.lab{min-height:34px;padding:6px 12px}.links a,.close,.zoom-close,.demo-btn{min-height:44px}.links a,.close,.zoom-close{display:inline-flex;align-items:center;justify-content:center}}@media(max-width:720px){.lab{font-size:.78rem;padding:5px 10px;max-width:min(42vw,160px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hello{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;left:calc(12px + env(safe-area-inset-left,0px));right:calc(12px + env(safe-area-inset-right,0px));max-width:none;padding:10px 12px;gap:8px}.hello-leaf{width:22px;height:22px}.hello p{font-size:.84rem}.foot{bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:8px}.name{font-size:1.2rem}.role{font-size:.82rem}.links{gap:8px}.links a{padding:8px 14px;font-size:.9rem}.vc{align-items:flex-start;-webkit-overflow-scrolling:touch}.in{max-width:none;padding:calc(18px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}.in h2{font-size:clamp(1.8rem,9vw,2.6rem)}.award{font-size:1rem}.tech,.sum{font-size:.95rem}.demo img,.demo.fit img{max-height:min(34vh,240px)}.demo.fit .demo-btn,.demo.fit img{width:100%;max-width:100%}.row{gap:12px}.close{margin-left:0}.zoom{padding:calc(56px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px))}.zoom img{max-width:100%;max-height:calc(100dvh - 120px)}}@media(max-width:420px){.hello p{font-size:.78rem}.lab{font-size:.72rem;max-width:min(38vw,130px)}}@media(orientation:landscape)and (max-height:520px){.hello{top:calc(8px + env(safe-area-inset-top,0px));bottom:auto;left:calc(8px + env(safe-area-inset-left,0px));right:auto;max-width:min(220px,34vw);padding:8px 10px;gap:8px}.hello-leaf{width:18px;height:18px}.hello p{font-size:.72rem;line-height:1.35}.foot{left:auto;right:calc(8px + env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));align-items:flex-end;gap:6px;max-width:min(280px,48vw);padding:0}.name{font-size:1rem}.role{font-size:.72rem}.links{gap:6px;justify-content:flex-end}.links a{padding:6px 11px;font-size:.8rem;min-height:34px}.lab{font-size:.7rem;padding:4px 9px;max-width:min(26vw,140px)}.in{padding:calc(14px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px))}.demo img,.demo.fit img{max-height:min(46vh,220px)}}@media(prefers-reduced-motion:reduce){#view,.vc,.demo-hint{transition:none}}
