:root{--paper:#0e111a;--ink:#ece7d9;--accent:#ff3d00}*{box-sizing:border-box}html{color:var(--ink);background:linear-gradient(172deg,#0a0d16 0%,#0e111a 52%,#12100c 100%) fixed,#0e111a;font-family:system-ui,sans-serif}body{min-block-size:100vh;margin:0}.app-footer{border-color:color-mix(in srgb, var(--ink) 17%, transparent);border-style:solid;border-width:0;border-block-start-width:1px;align-items:center;min-block-size:2.375rem;padding-inline:clamp(1rem,4vw,4rem);font-size:.78rem;display:flex}.app-main{grid-template-rows:auto auto;min-block-size:calc(100vh - 2.375rem);padding:0;display:grid}.app-header{z-index:10;background:#0a0c13f5;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem 2rem;min-inline-size:0;padding:.95rem max(2.5rem,50vw - 840px);display:grid;position:sticky;inset-block-start:0;box-shadow:0 1rem 2.2rem #0000004d}.app-header:after{content:"";background:var(--accent);grid-column:1/-1;block-size:.3rem;margin-inline:calc(-1*max(2.5rem,50vw - 840px));display:block}.app-hero{flex-direction:column;justify-content:center;align-items:flex-start;gap:.35rem;display:flex}.app-hero:before{content:"WEB DESIGN CASE LIBRARY";color:var(--accent);letter-spacing:.34em;font-size:.68rem;font-weight:700}.gallery-controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem;min-inline-size:0;display:flex}.gallery-controls button,.gallery-controls select{min-block-size:2.15rem;color:var(--ink);font:inherit;white-space:nowrap;border:1px solid color-mix(in srgb, var(--ink) 30%, transparent);background:0 0;padding:.36rem .62rem;font-size:.92rem}.gallery-effect-select{cursor:pointer;background:#ffffff0f}.gallery-effect-select option{color:var(--ink);background:#151923}.gallery-controls button{cursor:pointer}.gallery-controls button:hover{border-color:color-mix(in srgb, var(--ink) 60%, transparent)}.gallery-controls button:disabled{cursor:wait;opacity:.58}.gallery-controls button[aria-pressed=true]{color:#000;background:var(--accent);border-color:var(--accent);font-weight:700}.gallery-modes{flex-wrap:nowrap;gap:.35rem;display:flex}.gallery-result-count{color:color-mix(in srgb, var(--ink) 62%, var(--paper));white-space:nowrap;margin:0;font-size:.85rem}.play-mode-toggle{border-inline-start:1px solid color-mix(in srgb, var(--ink) 18%, transparent);align-items:center;gap:.6rem;padding-inline-start:1.4rem;display:flex}.play-mode-toggle__label{color:color-mix(in srgb, var(--ink) 62%, var(--paper));white-space:nowrap;-webkit-user-select:none;user-select:none;font-size:.86rem;transition:color .2s}.play-mode-toggle__label--pro{font-weight:700}html[data-play-mode=pro] .play-mode-toggle__label--pro{color:var(--accent)}.play-mode-toggle__switch{cursor:pointer;background:color-mix(in srgb, var(--ink) 22%, transparent);border:1px solid color-mix(in srgb, var(--ink) 38%, transparent);border-radius:999px;block-size:1.8rem;inline-size:3.4rem;padding:0;transition:background .22s,border-color .22s,box-shadow .22s;position:relative}.play-mode-toggle__thumb{background:#fff;border-radius:50%;block-size:1.34rem;inline-size:1.34rem;transition:inset-inline-start .24s cubic-bezier(.22,1,.36,1);position:absolute;inset-block-start:50%;inset-inline-start:.18rem;transform:translateY(-50%);box-shadow:0 1px 4px #00000073}.play-mode-toggle__switch--pro{background:var(--accent);border-color:var(--accent);box-shadow:0 0 1rem color-mix(in srgb, var(--accent) 45%, transparent)}.play-mode-toggle__switch--pro .play-mode-toggle__thumb{inset-inline-start:calc(100% - 1.52rem)}.play-mode-toggle__switch:hover{border-color:color-mix(in srgb, var(--ink) 65%, transparent)}.play-mode-toggle__switch--pro:hover{border-color:var(--accent)}.play-mode-toggle__switch:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.play-mode-toggle__live{clip:rect(0 0 0 0);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.gallery-mount{min-inline-size:0}h1{color:#f4f0e4;letter-spacing:.01em;white-space:nowrap;margin:0;font-size:clamp(2.1rem,3.2vw,3rem);font-weight:800;line-height:1}.skip-link{z-index:30;color:var(--paper);background:var(--ink);padding:.5rem .75rem;position:fixed;top:.75rem;left:.75rem;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}@media (width<=1023px){.app-header{grid-template-columns:1fr auto;align-items:center}.gallery-controls{grid-column:1/-1;justify-content:flex-start}.play-mode-toggle{border-inline-start:0;padding-inline-start:0}}.case-gallery{margin-top:0}.notes-ledger{border-block-end:1px solid color-mix(in srgb, var(--ink) 16%, transparent);padding:1.5rem max(2.5rem,50vw - 840px) 2rem}.notes-ledger__header{justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.25rem;display:flex}.notes-ledger__header h2,.notes-ledger__header p,.notes-ledger__item p{margin:0}.notes-ledger__header h2{font-size:clamp(1.45rem,2vw,2rem)}.notes-ledger__header p{max-inline-size:38rem;color:color-mix(in srgb, var(--ink) 66%, var(--paper));font-size:.88rem;line-height:1.5}.notes-ledger__list{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.65rem;display:grid}.notes-ledger__item{background:color-mix(in srgb, var(--accent) 18%, var(--paper));border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);gap:.5rem;min-block-size:7.25rem;padding:1rem;display:grid}.notes-ledger__item a{color:inherit;text-underline-offset:.15em;font-weight:750}.notes-ledger__item p{font-size:.91rem;line-height:1.5}.notes-ledger__author{margin-inline-end:.1em;font-weight:700}:is(.notes-ledger__item:has(a:hover),.notes-ledger__item:has(a:focus-visible)){background:color-mix(in srgb, var(--accent) 38%, var(--paper))}.gallery-grid{grid-template-columns:1fr;align-items:start;gap:1.25rem;padding:2rem max(2.5rem,50vw - 840px) 5rem;display:grid}@media (width>=721px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:5.5rem 3rem}.gallery-grid>.case-card:nth-child(odd){margin-inline-end:.75rem}.gallery-grid>.case-card:nth-child(2n){margin-block-start:3.25rem;margin-inline-start:.75rem}}@media (width>=1024px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:7rem 4.5rem}.gallery-grid>.case-card:nth-child(odd),.gallery-grid>.case-card:nth-child(2n){margin:0}.gallery-grid>.case-card:nth-child(3n+1){margin-inline-end:1.25rem}.gallery-grid>.case-card:nth-child(3n+2){margin-block-start:4.25rem;margin-inline:.6rem}.gallery-grid>.case-card:nth-child(3n){margin-inline-start:1.25rem}}.case-card{background:color-mix(in srgb, var(--paper) 88%, white);border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);opacity:0;flex-direction:column;transition:opacity .52s,translate .52s cubic-bezier(.22,1,.36,1),border-color .22s,box-shadow .22s;display:flex;overflow:hidden;translate:0 26px;box-shadow:0 .75rem 1.75rem #00000059}.case-card--revealed{opacity:1;transition-delay:var(--reveal-delay,0s), var(--reveal-delay,0s), 0s, 0s;translate:0}.case-card__button{inline-size:100%;color:inherit;text-align:start;cursor:pointer;background:0 0;border:0;padding:0;display:block}.case-card__media{aspect-ratio:16/9;background:color-mix(in srgb, var(--ink) 9%, var(--paper));position:relative;overflow:hidden}.case-card__image,.case-card__video,.case-card__placeholder{object-fit:cover;block-size:100%;inline-size:100%}.case-card__image,.case-card__video{filter:saturate(.55);opacity:.88;transition:filter .5s,opacity .5s,transform .6s cubic-bezier(.22,1,.36,1);display:block;transform:scale(1.02)}.case-card__video{position:absolute;inset:0}.case-card__video--failed{display:none}.case-card--focused .case-card__image,.case-card--focused .case-card__video{filter:saturate();opacity:1}.case-card__placeholder{color:color-mix(in srgb, var(--ink) 75%, var(--paper));text-align:center;place-items:center;padding:1rem;font-size:.95rem;display:grid}.case-card__media-top,.case-card__media-bottom{color:#fff;pointer-events:none;align-items:flex-start;gap:.5rem;padding:.65rem .8rem;display:flex;position:absolute;inset-inline:0}.case-card__media-top{background:linear-gradient(#0a0a0899,#0000);inset-block-start:0}.case-card__media-bottom{background:linear-gradient(#0000,#0a0a089e);inset-block-end:0}.case-card__id{letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 6px #00000073;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem}.case-card__category{letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px #00000059;border:1px solid #ffffff8c;border-radius:999px;max-inline-size:60%;margin-inline-start:auto;padding:.14rem .55rem;font-size:.68rem;overflow:hidden}.case-card__name{text-shadow:0 1px 8px #0000008c;margin:0;padding-block-start:1.6rem;font-size:clamp(1.15rem,1.4vw,1.5rem);line-height:1.15}html[data-mode=notes] .case-card__media{aspect-ratio:21/9}html[data-mode=notes] .case-card .case-card__image,html[data-mode=notes] .case-card .case-card__video{filter:saturate(.4);opacity:.58}html[data-mode=notes] .case-card:hover .case-card__image,html[data-mode=notes] .case-card:focus-within .case-card__image,html[data-mode=notes] .case-card:hover .case-card__video,html[data-mode=notes] .case-card:focus-within .case-card__video{filter:saturate();opacity:1}.case-card__meta{border-block-start:1px solid color-mix(in srgb, var(--ink) 14%, transparent);gap:.45rem;padding:.5rem .8rem;font-size:.76rem;display:grid}.case-card__meta-primary,.case-card__meta-download{align-items:center;gap:.6rem;min-inline-size:0;display:flex}.case-card__meta-download{border-block-start:1px solid color-mix(in srgb, var(--ink) 10%, transparent);min-block-size:1.75rem;padding-block-start:.45rem}.case-card__replica-rate{color:color-mix(in srgb, var(--ink) 76%, var(--paper));flex:auto;font-weight:720}.case-card__download{color:inherit;text-underline-offset:.16em;flex:none;font-weight:720}.case-card__download--unavailable{color:color-mix(in srgb, var(--ink) 44%, var(--paper));cursor:not-allowed}.case-card__download-status{color:color-mix(in srgb, var(--ink) 56%, var(--paper));font-size:.7rem}.case-card__notes{border-block-start:1px solid color-mix(in srgb, var(--ink) 10%, transparent);gap:.4rem;padding:.5rem .8rem .65rem;display:grid}.case-card__notes-list{gap:.35rem;display:grid}.case-card__notes--empty .case-card__notes-list{display:none}.case-card__note{color:color-mix(in srgb, var(--ink) 80%, var(--paper));overflow-wrap:anywhere;margin:0;font-size:.74rem;line-height:1.45}.case-card__note-author{color:var(--ink);margin-inline-end:.1em;font-weight:700}.case-card__note-add{color:color-mix(in srgb, var(--ink) 78%, var(--paper));cursor:pointer;border:1px dashed color-mix(in srgb, var(--ink) 32%, transparent);background:0 0;justify-self:start;padding:.28rem .6rem;font-size:.72rem}.case-card__note-add:hover{color:var(--ink);border-color:var(--accent)}.case-card__note-add:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}.prompt-overlay{z-index:40;background:#06080cb8;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.prompt-dialog{border:1px solid color-mix(in srgb, var(--ink) 26%, transparent);background:#151923;gap:.9rem;inline-size:min(26rem,100%);padding:1.35rem;display:grid;box-shadow:0 1.4rem 3rem #0000008c}.prompt-dialog__title{margin:0;font-size:1.05rem;font-weight:700}.prompt-dialog__input{inline-size:100%;color:var(--ink);font:inherit;border:1px solid color-mix(in srgb, var(--ink) 30%, transparent);resize:vertical;background:#ffffff0f;padding:.6rem .7rem;font-size:.92rem}.prompt-dialog__input:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}.prompt-dialog__actions{justify-content:flex-end;gap:.6rem;display:flex}.prompt-dialog__cancel,.prompt-dialog__confirm{font:inherit;cursor:pointer;border:1px solid color-mix(in srgb, var(--ink) 30%, transparent);padding:.5rem .95rem;font-size:.86rem}.prompt-dialog__cancel{color:var(--ink);background:0 0}.prompt-dialog__confirm{color:var(--paper);background:var(--ink);font-weight:700}.prompt-dialog__cancel:focus-visible,.prompt-dialog__confirm:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}.case-card__source-link{min-inline-size:0;color:color-mix(in srgb, var(--ink) 72%, var(--paper));text-overflow:ellipsis;white-space:nowrap;flex:auto;overflow:hidden}.case-card__copy-link{color:var(--paper);cursor:pointer;background:var(--ink);border:0;flex:none;padding:.35rem .5rem;font-size:.72rem}.case-card:hover,.case-card:focus-within{border-color:color-mix(in srgb, var(--accent) 60%, transparent);box-shadow:0 1.25rem 2.5rem #00000080, 0 0 1.4rem color-mix(in srgb, var(--accent) 32%, transparent);translate:0 -6px}.case-card:hover .case-card__image,.case-card:focus-within .case-card__image,.case-card:hover .case-card__video,.case-card:focus-within .case-card__video{filter:saturate();opacity:1;transform:scale(1.07)}.case-gallery--category-transition .case-card{animation:.22s ease-out both case-category-switch}@keyframes case-category-switch{0%{opacity:0;translate:0 10px;box-shadow:0 .25rem .75rem #0003}to{opacity:1;translate:0;box-shadow:0 .75rem 1.75rem #00000059}}.case-card__button:focus-visible,.case-card__source-link:focus-visible,.case-card__copy-link:focus-visible,.case-card__download:focus-visible,.gallery-empty__clear:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.gallery-empty{border:1px solid color-mix(in srgb, var(--ink) 25%, transparent);gap:1rem;max-inline-size:32rem;margin:1.5rem max(2.5rem,50vw - 840px);padding:2rem;display:grid}.gallery-empty__clear{color:var(--paper);cursor:pointer;background:var(--ink);border:0;justify-self:start;padding:.65rem .9rem}@media (width<=720px){.notes-ledger{padding-inline:1rem}.notes-ledger__header{align-items:start;display:grid}.gallery-grid{gap:1.25rem;padding-inline:1rem}.gallery-empty{margin-inline:1rem}.case-card__meta-download{flex-wrap:wrap}.case-card__download-status{flex-basis:100%}}body.experience-open{overflow:hidden}.experience-overlay{z-index:20;min-block-size:100dvh;color:var(--ink);background:#0b0b0a;grid-template-columns:clamp(20rem,25vw,26rem) minmax(0,1fr);display:grid;position:fixed;inset:0}.experience__info{z-index:2;background:var(--paper);border-inline-end:1px solid color-mix(in srgb, var(--ink) 18%, transparent);flex-direction:column;min-block-size:100dvh;padding:clamp(1.5rem,3vw,3rem);display:flex;overflow:auto}.experience__info>*{margin:0}.experience__close{color:color-mix(in srgb, var(--ink) 72%, var(--paper));font:inherit;cursor:pointer;background:0 0;border:0;border-block-end:1px solid;align-self:flex-start;padding:.55rem 0}.experience__title{letter-spacing:-.055em;overflow-wrap:anywhere;margin-top:clamp(3.5rem,9vh,7rem);font-size:clamp(2.4rem,4vw,4.75rem);line-height:.92}.experience__category{color:color-mix(in srgb, var(--ink) 58%, var(--paper));letter-spacing:.08em;text-transform:uppercase;margin-top:1rem;font-size:.76rem;font-weight:750}.experience__info>.experience__source-link{color:var(--paper);background:var(--ink);align-self:flex-start;margin-top:1.5rem;padding:.7rem 1rem;font-weight:750;text-decoration:none}.experience__details{margin-top:2rem}.experience__description{color:color-mix(in srgb, var(--ink) 82%, var(--paper));margin:0;font-size:.98rem;line-height:1.65}.experience__description a{color:inherit}.experience__personal-note{background:color-mix(in srgb, var(--accent) 42%, var(--paper));margin-top:1.5rem;padding:.8rem .9rem;font-size:.9rem;font-weight:750;line-height:1.45}.experience__navigation{grid-template-columns:1fr 1fr auto;align-items:center;gap:.55rem;margin-top:auto;padding-top:2rem;display:grid}.experience__navigation button,.experience__fallback button{min-block-size:2.5rem;color:var(--ink);font:inherit;cursor:pointer;border:1px solid color-mix(in srgb, var(--ink) 28%, transparent);background:0 0;padding:.6rem .75rem}.experience__navigation button:disabled{cursor:default;opacity:.35}.experience__position{color:color-mix(in srgb, var(--ink) 55%, var(--paper));white-space:nowrap;margin:0;font-size:.78rem}.experience__preview{background:#0b0b0a;min-block-size:100dvh;min-inline-size:0;position:relative;overflow:hidden}.experience__frame-host,.experience__preview iframe,.experience__motion-preview{border:0;block-size:100%;inline-size:100%;position:absolute;inset:0}.experience__motion-preview{object-fit:contain;background:#0b0b0a}.experience__status{z-index:3;color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0a09c7;border:1px solid #ffffff2e;max-inline-size:min(28rem,100% - 3rem);margin:0;padding:.65rem .85rem;font-size:.82rem;line-height:1.4;position:absolute;inset:1.5rem auto auto 1.5rem}.experience__fallback{background:#111;position:absolute;inset:0;overflow:hidden}.experience__fallback:after{content:"";pointer-events:none;background:linear-gradient(#0000,#000000c7);position:absolute;inset:55% 0 0}.experience__fallback img{object-fit:cover;object-position:center;block-size:100%;inline-size:100%}.experience__fallback-actions{z-index:2;flex-wrap:wrap;align-items:center;gap:.65rem;display:flex;position:absolute;inset:auto 1.5rem 1.5rem}.experience__fallback-actions span{color:#ffffffb8;letter-spacing:.08em;margin-inline-end:auto;font-size:.75rem}.experience__fallback-actions .experience__source-link,.experience__fallback-actions button{color:var(--ink);background:var(--paper);border:0;padding:.7rem .9rem;font-weight:750;text-decoration:none}.experience__close:focus-visible,.experience__navigation button:focus-visible,.experience__fallback button:focus-visible,.experience__source-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media (width<=1023px){.experience-overlay{grid-template-rows:auto minmax(70svh,1fr);grid-template-columns:1fr;overflow:auto}.experience__info{min-block-size:auto;padding:1.25rem;overflow:visible}.experience__title{margin-top:2.75rem;font-size:clamp(2.3rem,11vw,4.5rem)}.experience__navigation{margin-top:2.5rem}.experience__preview{min-block-size:70svh}.gallery-controls:after{content:"画廊以网格排列，向下滚动浏览全部案例；原站将在新标签页打开。";color:color-mix(in srgb, var(--ink) 68%, var(--paper));flex:0 0 100%;font-size:.8rem;line-height:1.45}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.case-card:hover,.case-card:focus-within{translate:none}}